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中輸入命令:
安裝成功：
安裝完成之後輸入
vue -v如下圖，如果出現相應的版本號，則說明安裝成功。
開啟node_modules也可以看到：
2.用vue-cli來構建專案
① 我首先在d盤新建乙個資料夾（dxl_vue）作為專案存放地，然後使用命令列cd進入到專案目錄輸入：
輸入命令後，會跳出幾個選項讓你回答：
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進入這個資料夾：
安裝依賴
如果安裝速度太慢。可以安裝**映象，開啟命令列工具，輸入下面的命令，然後使用cnpm來安裝
npm install ：安裝所有的模組，如果是安裝具體的哪個個模組，在install 後面輸入模組的名字即可。而只輸入install就會按照專案的根目錄下的package.json檔案中依賴的模組安裝（這個檔案裡面是不允許有任何注釋的），每個使用npm管理的專案都有這個檔案，是npm操作的入口檔案。因為是初始專案，還沒有任何模組，所以我用npm install 安裝所有的模組。安裝完成後，目錄中會多出來乙個node_modules資料夾，這裡放的就是所有依賴的模組。
然後現在，baoge資料夾裡的目錄是這樣的：
解釋下每個資料夾代表的意思(仔細看一下這張圖）：
3.啟動專案
還有，如果本地除錯專案時，建議將build 裡的assetspublicpath的路徑字首修改為 ' ./ '（開始是 ' / '），因為打包之後，外部引入 js 和 css 檔案時，如果路徑以 ' / ' 開頭，在本地是無法找到對應檔案的（伺服器上沒問題）。所以如果需要在本地開啟打包後的檔案，就得修改檔案路徑。
我的埠沒有被占用，直接成功（服務啟動成功後瀏覽器會預設開啟乙個「歡迎頁面」）：
4.vue-cli的webpack配置分析
5.打包上線
注意，自己的專案檔案都需要放到 src 資料夾下。
在專案開發完成之後，可以輸入npm run build來進行打包工作。
搭建vue cli腳手架
前期工作準備 2.安裝 映象，因為我們用的npm的伺服器是外國，有的時候我們安裝 依賴 的時候會超級慢，所以就用這個cnpm來安裝我們說需要的 依賴 命令列輸入 npm install g cnpm registry 安裝完成後，就可以用cnpm 代替 npm 速度會快很多。3.安裝webpack，...
搭建vue cli腳手架
腳手架 cd xz vue 先進入專案資料夾 vue create後的那個資料夾 xz vue npm run serve 執行live server babel的效果。是先將腳手架中瀏覽器不懂的 翻譯為瀏覽器能懂的 然後，再將翻譯後的頁面執行在乙個臨時的開發伺服器中。強調 npm run serv...
vue cli腳手架搭建
是vue官方提供的腳手架工具。腳手架工具簡單講就是自動將專案需要的環境 依賴等資訊都配置好。檢查npm 版本，建議安裝到最新版本。命令列檢視版本號 node v npm v 公升級npm 可選操作 npm install g npm 修改為 映象 可選操作 npm config set regist...