從零開始搭建vue開發環境及構建vue項目


1.安裝node.js
安裝完成之后,打開dos(windows+R或者直接windows鍵打開,輸入cmd,按回車鍵)窗口,輸入命令node -v可以查看安裝的
node.js版本
node.js自帶npm(包管理)安裝完成之后,npm本地倉庫默認在 C:\Users\Administrator\AppData\Roaming 目錄下。注:有
的電腦會自己隱藏文件夾,可以復制上面的目錄地址在自己電腦上直接進入。看到如下圖的兩個文件夾:npm和npm-cache
接下來就是將上面的npm和npm-cache移動到node.js的安裝目錄下
2.改變npm本地倉庫地址
先找到自己的node.js安裝目錄,不記得安裝目錄的,可以在dos窗口輸入where node查看
現在在node.js目錄下手動新建兩個名字為node_cache和node_global空文件夾,注意是空的文件夾
輸入命令移動文件夾:cmd中執行npm config set prefix "D:\Program Files\nodejs\node_global"回車,然后繼續執行命
令npm config set cache "D:\Program Files\nodejs\node_cache"。命令里面的目錄寫自己剛在nodejs安裝目錄下創建的
node_cache和node_global目錄

3.配置淘寶鏡像站
4.安裝VUE
在cmd窗口輸入全局安裝vue命令npm install vue -g進行安裝,正常第一次安裝應該是執行命令后出現added 1 package,安
裝完成之后可以在node.js/node_global/node_modules下面找到vue目錄,dist(distribution)是最終發布的產品,最后vue項目打
包發布會生成一個這樣的dist文件給我們來發布,這個后面寫部署的時候補上說明。
安裝vue-router,這個差不多是使用vue開發很常用的,所以一般使用全局安裝。在cmd窗口輸入命令npm install vue-
router -g進行安裝,安裝完成之后同樣可以在node.js/node_global/node_modules下面找到vue-router目錄。跟上面vue目錄同級
安裝腳手架:在cmd窗口輸入命令npm install vue-cli -g並執行。
5.構建一個新的VUE項目
在cmd窗口到達項目目錄后,繼續執行命令vue init webpack vueDemo來新建項目(vueDemo為項目名稱)
繼續按Enter鍵,項目開始構建,
“Project name”:這個是項目名稱,默認是輸入時的那個名稱,想改的話直接輸入修改,也可以直接回車

“Install vue-router”:是否需要vue-router,這里默認選擇使用,這樣生成好的項目就會有相關的路由配置文件

“Use ESLint to lint your code”:是否使用ESLint,剛才說了我們這個項目需要使用所以也是直接回車,默認使用,這樣會生成
相關的ESLint配置

“Setup unit tests with Karma + Moch?”: 是否安裝單元測試。

“Setup e2e tests with Nightwatch”:是否安裝e2e測試,這里我也同樣選擇的是“N”

這幾個配置選擇yes 或者 no 對於我們項目最大的影響就是,如果選擇了yes 則生成的項目會自動有相關的配置,有一些loader我們
就要配套下載。所以如果我們確定不用的話最好不要yes,要么下一步要下很多沒有用的loader
.初始化項目:在cmd窗口到達項目路徑下這里的項目路徑是上一步中的project Name下,就是要到你的項目下,去運行項目
,執行命令npm install
運行項目:繼續在上圖的窗口中執行命令cnpm run dev
運行完畢會出現項目的地址

 

 

部分內容參考

手把手教你用vue-cli搭建vue項目


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM