都說Vue2簡單上手容易，的確，看了官方文件確實覺得上手很快，除了ES6語法和webpack的配置讓你感到陌生，重要的是思路的變換，以前用jq隨便拿全域性變數和修改dom的錘子不能用了，vue只用關心資料本身，不用再頻繁繁瑣的操作dom，註冊事件、監聽事件、取消事件。。。。（確實很煩）。vue的官方文件還是不錯的，由淺到深，如果不使用構建工具確實用的很爽，但是這在實際專案應用中是不可能的，當用vue-cli構建一個工程的時候，發現官方文件還是不夠用，需要熟練掌握es6，而vue的全家桶(vue-cli,vue-router,vue-resource,vuex)還是都要上的。

vue.js有著名的全家桶系列，包含了vue-router，vuex， vue-resource，再加上構建工具vue-cli，就是一個完整的vue專案的核心構成。

vue-cli這個構建工具大大降低了webpack的使用難度，支援熱更新，有webpack-dev-server的支援，相當於啟動了一個請求伺服器，給你搭建了一個測試環境，只關注開發就OK。

1.安裝vue-cli

① 使用npm（需要安裝node環境）全域性安裝webpack，開啟命令列工具輸入：npm install webpack -g或者（npm install -g webpack），安裝完成之後輸入 webpack -v，如下圖，如果出現相應的版本號，則說明安裝成功。

注意：webpack 4.X 開始，需要安裝 webpack-cli 依賴 ,所以使用這條命令  npm install webpack webpack-cli -g

② 全域性安裝vue-cli，在cmd中輸入命令:

1. npm install --global vue-cli

（我已經安裝過，為了更直觀我在電腦上重新演示下）

安裝成功：

安裝完成之後輸入 vue -V（注意這裡是大寫的“V”），如下圖，如果出現相應的版本號，則說明安裝成功。

開啟C:\Users\Andminster\AppData\Roaming\npm目錄下可以看到：

開啟node_modules也可以看到：

2.用vue-cli來構建專案

① 我首先在D盤新建一個資料夾（dxl_vue）作為專案存放地，然後使用命令列cd進入到專案目錄輸入：

vue init webpack baoge

baoge是自定義的專案名稱，命令執行之後，會在當前目錄生成一個以該名稱命名的專案資料夾。

輸入命令後，會跳出幾個選項讓你回答：

• Project name (baoge)： -----專案名稱，直接回車，按照括號中預設名字（注意這裡的名字不能有大寫字母，如果有會報錯Sorry, name can no longer contain capital letters），阮一峰老師部落格為什麼檔名要小寫 ，可以參考一下。
• Project description (A Vue.js project)： ----專案描述，也可直接點選回車，使用預設名字
• Author ()： ----作者，輸入你的大名
  接下來會讓使用者選擇：
• Runtime + Compiler: recommended for most users 執行加編譯，既然已經說了推薦，就選它了
  Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere 僅執行時，已經有推薦了就選擇第一個了
• Install vue-router? (Y/n) 是否安裝vue-router，這是官方的路由，大多數情況下都使用，這裡就輸入“y”後回車即可。
• Use ESLint to lint your code? (Y/n) 是否使用ESLint管理程式碼，ESLint是個程式碼風格管理工具，是用來統一程式碼風格的，一般專案中都會使用。
  接下來也是選擇題Pick an ESLint preset (Use arrow keys) 選擇一個ESLint預設，編寫vue專案時的程式碼風格，直接y回車
• Setup unit tests with Karma + Mocha? (Y/n) 是否安裝單元測試，我選擇安裝y回車
• Setup e2e tests with Nightwatch(Y/n)? 是否安裝e2e測試 ，我選擇安裝y回車

回答完畢後上圖就開始構建專案了。

② 配置完成後，可以看到目錄下多出了一個專案資料夾baoge，然後cd進入這個資料夾：
安裝依賴：

npm install

 ( 如果安裝速度太慢。可以安裝淘寶映象，開啟命令列工具，輸入：
 npm install -g cnpm --registry=https://registry.npm.taobao.org
 然後使用cnpm來安裝 )

npm install ：安裝所有的模組，如果是安裝具體的哪個個模組，在install 後面輸入模組的名字即可。而只輸入install就會按照專案的根目錄下的package.json檔案中依賴的模組安裝（這個檔案裡面是不允許有任何註釋的），每個使用npm管理的專案都有這個檔案，是npm操作的入口檔案。因為是初始專案，還沒有任何模組，所以我用npm install 安裝所有的模組。安裝完成後，目錄中會多出來一個node_modules資料夾，這裡放的就是所有依賴的模組。

然後現在，baoge資料夾裡的目錄是這樣的：

解釋下每個資料夾代表的意思(仔細看一下這張圖）：

image.png

3.啟動專案

npm run dev

如果瀏覽器開啟之後，沒有加載出頁面，有可能是本地的 8080 埠被佔用，需要修改一下配置檔案 config裡的index.js

還有，如果本地除錯專案時，建議將build 裡的assetsPublicPath的路徑字首修改為 ' ./ '（開始是 ' / '），因為打包之後，外部引入 js 和 css 檔案時，如果路徑以 ' / ' 開頭，在本地是無法找到對應檔案的（伺服器上沒問題）。所以如果需要在本地開啟打包後的檔案，就得修改檔案路徑。
我的埠沒有被佔用，直接成功（服務啟動成功後瀏覽器會預設開啟一個“歡迎頁面”）：

注意：在進行vue頁面除錯時，一定要去谷歌商店下載一個vue-tool擴充套件程式。

4.vue-cli的webpack配置分析

• 從package.json可以看到開發和生產環境的入口。

  

• 可以看到dev中的設定，build/webpack.dev.conf.js，該檔案是開發環境中webpack的配置入口。
• 在webpack.dev.conf.js中出現webpack.base.conf.js，這個檔案是開發環境和生產環境，甚至測試環境，這些環境的公共webpack配置。可以說，這個檔案相當重要。

5.打包上線

注意，自己的專案檔案都需要放到 src 資料夾下。
在專案開發完成之後，可以輸入 npm run build 來進行打包工作。

npm run build

另：

1. 1.npm 開啟了npm run dev以後怎麼退出或關閉？

2. ctrl+c

3. 2.--save-dev

4. 自動把模組和版本號新增到模組配置檔案package.json中的依賴裡devdependencies部分

5. 3. --save-dev 與 --save 的區別

6. --save 安裝包資訊將加入到dependencies（生產階段的依賴）

7. --save-dev 安裝包資訊將加入到devDependencies（開發階段的依賴），所以開發階段一般使用它

打包完成後，會生成 dist 資料夾，如果已經修改了檔案路徑，可以直接開啟本地檔案檢視。
專案上線時，只需要將 dist 資料夾放到伺服器就行了。

此文章是轉載文章，若本人原創作者覺得有侵權，馬上私聊我進行刪除。非常感謝您的文章！