vue+webpack+npm搭建的純前端項目

轉載來源：https://www.cnblogs.com/shenyf/p/8341641.html

 

搭建node環境

下載

1.進入node.js官方網站下載頁，點擊下圖中框出位置，進行下載便可，當前版本爲8.9.4，下載網址爲：https://nodejs.org/zh-cn/download/

2.至於什麼是LTS，請參考該知乎問題：https://www.zhihu.com/question/35512237，總之LTS意味着更加穩定，所以此處選擇安裝該版本，具體請依照自身需求。

安裝

1.安裝十分簡單，只需雙擊剛下載完成的node-v8.9.4-x64.msi文件，期間能夠更換安裝路徑，其他只需點擊下一步直至安裝完成便可，

2.以下圖所示，則表示安裝成功。

測試

1.安裝完成則自動安裝好了npm這個包，而且自動將路徑配置到系統路徑中，使用windows+R快捷鍵，輸入cmd，即打開命令提示符窗口，經過以下命令查看是否安裝成功；

node -v --查看當前node版本
npm -v  --查看當前npm版本

2.獲得以下圖所示，則表示安裝成功。

安裝cnpm

1.因爲使用npm工具會自動去查找國外的網站下載包，可能會被防火牆屏蔽致使下載失敗，所以咱們須要安裝cnmp淘寶鏡像來代替npm，使用cnpm下載包會大大提升下載速率；

2.安裝方式，在命令提示符窗口，輸入以下命令，等待1至2分鐘便可

npm install cnpm -g --安裝cnpm，-g表明全局

3.使用以下命令查看cnpm是否安裝成功

cnpm -v --查看當前cnpm版本

4.以下圖所示，則表示cnpm安裝成功。

安裝webpack

 1.至於爲何要安裝webpack，能夠參考這篇博客：https://www.cnblogs.com/-walker/p/6056529.html，或者參考webpack中文官方文檔：https://doc.webpack-china.org/

npm run dev

 2.安裝webpack只須要一條命令便可

npm install webpack -g --全局安裝webpack

 3.使用以下命令查看是否安裝成功

webpack -v

4.以下圖所示，則說明安裝成功

安裝vue-cli

1.安裝vue-cli一樣只須要一條命令便可

npm install vue-cli -g --全局安裝vue-cli

2.具體方式，同上，這裏再也不作詳細敘述。

正式開始一個vue項目

1.下面準備在D盤目錄下的WebstormProjects下建立一個vue項目

2.首先按照下圖中所示方式進入到當前目錄下的cmd窗口

 

3.在Cmd命令窗口輸入以下命令，新建一個vue項目

vue init webpack my-project

4.在創建vue項目中主要須要輸入以下信息

Project name my-project               --項目的名稱，直接默認回車
Project description A Vue.js project  --項目描述，直接默認回車
Author syf                            --做者姓名，輸入名字（syf）回車
Install vue-router? Yes               --是否安裝路由，輸入y回車
Use ESLint to lint your code? No      --是否用ESLint規範代碼，輸入n回車
Set up unit tests No                  --是否須要單元測試，輸入n回車
Setup e2e tests with Nightwatch? No   --是否須要單元測試，輸入n回車

5.進入到my-project文件夾下

cd my-project

6.安裝依賴

cnpm install

7.啓動項目

npm run dev

8.具體過程以下所示

9.使用瀏覽器訪問上圖中的網址，獲得以下圖所示結果，表示一個vue項目搭建成功

 

 

 

 

---

參考文檔：

1.VUE官方文檔：https://cn.vuejs.org/

說明：本文爲原創做品，如有參考會在文中說起，若有遺漏，涉及侵權，請聯繫本人，將當即修正