1.下載node.js
https://nodejs.org/zh-cn/
推薦下載 .mis安裝包，下一步下一步...
安裝完后，通過cmd控制臺輸入node -v 彈出版本號即成功
2.通過node.js中內置的npm（包/依賴）插件來下載其他開發所需的環境
(可選)注意：如設定了代理限制，可通過cmd控制臺輸入npm config set proxy=http://代理服務器地址:8080 設定代理（網路有代理限制時下載不到依賴包時，按需設定）
npm config delete proxy 為取消代理模式
(可選)npm默認尋找國外服務器下載依賴包，建議安裝cnpm淘寶鏡像，然后以后npm的操作可以更換為cnpm，國內鏡像下載依賴會更快
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm淘寶鏡像設定完成
用npm下載webpack
通過cmd控制臺輸入npm install webpack -g 就會進行下載并安裝到本機，此時不要關閉cmd視窗
下載安裝中
安裝成功，之前安裝過所以提示略有不同
用npm下載vue-cli手腳架
提醒：這里的教程是安裝手腳架2.0的方式，如果需要安裝3.0，請到下方“2020-03-16新增手腳架vue-cli3.0安裝教程”字樣處，
具體表現會導致用手腳架的生成的專案結構會有一點不同，默認啟動專案命令也會從
npm run dev 變更為 npm run serve
通過cmd控制臺輸入npm install --global vue-cli 就會進行下載并安裝到本機，此時不要關閉cmd視窗
下載安裝中
安裝成功，之前安裝過所以提示略有不同
3.使用vue-cli創建vue前端專案
提醒：這里的教程是通過vue-cli2.0手腳架的方式創建專案，如果需要使用vue-cli3.0手腳架的方式創建專案，請到下方“2020-03-16新增手腳架vue-cli3.0安裝教程”字樣處，
win7下，可以進入到專案的目標檔案夾，然后在地址欄輸入cmd回車，彈出cmd控制臺，xp要在cmd控制臺中cd過去檔案夾中
在彈出cmd控制臺中輸入vue init webpack vuetest 其中vuetest是各位專案的名稱
此時會詢問需要安裝那些功能，我除了下面兩個test功能是NO外，其他保持回車默認配置
可以看到已經多了一個檔案夾，里面裝了默認的vue專案
點擊進入新建的檔案夾，再在地址欄輸入cmd打開控制臺，輸入npm install下載安裝專案所需依賴（當下載別人的專案下來時也需要進專案檔案夾內執行npm install 因為打包發布環境與開發環境包大小和數量有所不同）
下載安裝中
安裝成功，之前安裝過所以提示略有不同
3.啟動專案
在專案處執行npm run dev，前提是已經通過npm install安裝過包依賴的專案，否則可能啟動不成功
運行中
運行完畢
打開瀏覽器，輸入剛剛cmd回傳的url地址http://localhost:8080
顯示出此界面，則成功運行專案
--------------------------2020-03-16新增手腳架vue-cli3.0安裝教程--------------------------
如果安裝了上面的教程中的手腳架cli2.x版本，建議升級到cli3.x版本
1.安裝vue-cli3.0
1.首先卸載掉舊的vue-cli手腳架，cmd打開控制臺，輸入 npm uninstall -g vue-cli
卸載完成
2.全域安裝vu-cli 3.0 npm install -g @vue/cli
安裝中
2.通過vue-cli3.0創建專案
1.win7中，在要新建專案的檔案夾地址欄中，輸入cmd，快速彈出命令視窗
2.輸入命令 vue create (專案名) 回車，然后會出現下圖 (可能因為網速原因會慢點)
上下方向鍵選擇專案需要的插件，一般選擇第二個，手動配置，回車
3.這里上下方向鍵選擇專案需要的插件，空格鍵作為選擇和不選擇，我這里只選擇Babel，這個插件的作用是打包程式時的es6語法可以降級為es5，適配更多瀏覽器識別，回車
4.詢問配置書寫在哪里，選擇 In packge.json 回車
5.詢問是否保存此次配置為默認創建專案的配置，填入 N 回車
6.等待專案從網上拉取下載(我的專案名稱叫feitian)
7.專案拉取到本地完成
3.運行專案
1.CD到專案檔案夾，然后直接輸入 npm run serve 回車，等待啟動，這個時候叫我們訪問 http://localhost:8081/ 來查看專案
2.打開瀏覽器，訪問 http://localhost:8081/ 看到這個頁面或者這個大V的標志，可以判斷專案，專案初始成功
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/144314.html
標籤：JavaScript
上一篇：Node.js 創建第一個應用
下一篇：02.正則運算式