小米官宣：2023年上半年出貨量中國第一！
今日早間，小米電視官方微博帶來消息，稱2023年小米電視上半年出貨量達到了中國第一，同時還表示小米電視的巨屏風暴即將開始?！肮家粋€好消息2023年#小米電視上半年出貨量中國
圖片
前端開發有2種方式：
前后臺混合開發，顧名思義就是前臺后臺代碼混在一起開發，前后臺混合開發模式有如下缺點：
所以我們目前基本都是采用的前后臺分離開發方式，那么可能小伙伴會問我一個寫后端的人為啥要學習一下前端?
在現在這個卷王之王的當下，我們可以不精通前端，但是前端基礎的curd(增刪改查)操作，最好可以實現自己編寫
那么基于前后臺分離開發的模式下，我們后臺開發者開發一個功能的具體流程如何呢？如下圖所示：
圖片
如果我們只學過Html,CSS和JS(前端三劍客)，使用前端三劍客開發存在如下問題：
所以現在企業開發中更加講究前端工程化方式的開發，主要包括如下4個特點
所以對于前端工程化，說白了，就是在企業級的前端項目開發中，把前端開發所需要的工具、技術、流程、經驗進行規范化和標準化。從而提升開發效率，降低開發難度等等。接下來我們就需要學習vue的官方提供的腳手架幫我們完成前端的工程化。
vue前端工程化是通過官方提供的腳手架Vue-cli來完成的，用于快速的生成一個Vue的項目模板
Vue-cli主要提供了如下功能：
我們需要運行Vue-cli，需要依賴NodeJS，NodeJS是前端工程化依賴的環境。所以我們需要先安裝NodeJS，然后才能安裝Vue-cli
給大家演示安裝的nodejs版本是node-v16.17.1-x64.msi，如果大家沒有該虛擬機軟件，可以在公眾號發VM獲取下載地址。
圖片
圖片
圖片
圖片
NodeJS 安裝完畢后，會自動配置好環境變量，我們驗證一下是否安裝成功， 通過：
node -v
圖片
圖片
使用管理員身份運行命令行，在命令行中，執行如下指令：
npm config set prefix "D:/allsoftware/install/nodejs"注意：D:/allsoftware/install/nodejs 這個目錄是NodeJS的安裝目錄
使用管理員身份運行命令行，在命令行中，執行如下指令：
npm config set registry https://registry.npm.taobao.org使用管理員身份運行命令行，在命令行中，執行如下指令：
npm install -g @vue/cli注意：這個過程中，會聯網下載，可能會耗時幾分鐘，耐心等待。
圖片
Vue項目-創建方式
## vue create 項目名稱vue create vue-project01vue ui本次介紹對初學者比較友好的圖形化界面創建項目
在命令行中，執行如下指令：
vue ui
圖片
圖片
圖片
圖片
創建項目的過程，需要聯網進行，這可能會耗時比較長的時間，請耐心等待。 windows的命令行，容易卡頓，我們可以敲擊一下鍵盤
圖片
最后我們只需要等待片刻，即可進入到創建創建成功的界面，如下圖所示：
圖片
我們通過VS Code打開之前創建的vue文件夾，打開之后，呈現如下圖所示頁面：
圖片
vue項目的標準目錄結構以及目錄對應的解釋如下圖所示:
圖片
其中我們平時開發代碼就是在src目錄下
那么vue項目開發好了，我們應該怎么運行vue項目呢？
圖片
點擊之后，我們等待片刻，即可運行，在終端界面中，我們發現項目是運行在本地服務的8080端口，我們直接通過瀏覽器打開地址
圖片
最終瀏覽器打開后，呈現如下界面，表示項目運行成功
圖片
對于8080端口，經常被占用，所以我們可以去修改默認的8080端口。我們修改vue.config.js文件的內容，添加如下代碼
devServer:{ port:7000}如下圖所示，然后我們關閉服務器，并且重新啟動
圖片
重新啟動如下圖所示：
圖片
補充：NPM腳本窗口調試出來
第一步：通過設置/用戶設置/擴展/MPM更改NPM默認配置，如下圖所示
圖片
然后重啟VS Code，并且雙擊打開package.json文件，然后點擊資源管理器處的3個小點，勾選npm腳本選項，如圖所示
圖片
然后就能都顯示NPM腳本小窗口了。
本文鏈接：http://www.www897cc.com/showinfo-26-35576-0.html前后臺分離開發，你會了嗎？
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權所有 sitemap.xml
違法及侵權請聯系：2376512515@qq.com 津ICP備18001702號
津公網安備 12010102000574號