都說vue2簡單上手容易，的確，看了官方文件確實覺得上手很快，除了es6語法和webpack的配置讓你感到陌生，重要的是思路的變換，以前用jq隨便拿全域性變數和修改dom的錘子不能用了，vue只用關心資料本身，不用再頻繁繁瑣的操作dom，註冊事件、監聽事件、取消事件。。。。（確實很煩）。vue的官方文件還是不錯的，由淺到深，如果不使用構建工具確實用的很爽，但是這在實際專案應用中是不可能的，當用vue-cli構建乙個工程的時候，發現官方文件還是不夠用，需要熟練掌握es6，而vue的全家桶(vue-cli,vue-router,vue-resource,vuex)還是都要上的。
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（注意這裡是大寫的「v」），如下圖，如果出現相應的版本號，則說明安裝成功。開啟node_modules也可以看到：
2.用vue-cli來構建專案
① 我首先在d盤新建乙個資料夾（dxl_vue）作為專案存放地，然後使用命令列cd進入到專案目錄輸入：
baoge是自定義的專案名稱，命令執行之後，會在當前目錄生成乙個以該名稱命名的專案資料夾。輸入命令後，會跳出幾個選項讓你回答：
回答完畢後上圖就開始構建專案了。
② 配置完成後，可以看到目錄下多出了乙個專案資料夾baoge，然後cd進入這個資料夾：
安裝依賴：
( 如果安裝速度太慢。可以安裝**映象，開啟命令列工具，輸入：npm install -g cnpm --registry=
然後使用cnpm來安裝 )
npm install ：安裝所有的模組，如果是安裝具體的哪個個模組，在install 後面輸入模組的名字即可。而只輸入install就會按照專案的根目錄下的package.json檔案中依賴的模組安裝（這個檔案裡面是不允許有任何注釋的），每個使用npm管理的專案都有這個檔案，是npm操作的入口檔案。因為是初始專案，還沒有任何模組，所以我用npm install 安裝所有的模組。安裝完成後，目錄中會多出來乙個node_modules資料夾，這裡放的就是所有依賴的模組。
然後現在，baoge資料夾裡的目錄是這樣的：
解釋下每個資料夾代表的意思(仔細看一下這張圖）：
3.啟動專案
如果瀏覽器開啟之後，沒有載入出頁面，有可能是本地的 8080 埠被占用，需要修改一下配置檔案 config裡的index.js還有，如果本地除錯專案時，建議將build 裡的assetspublicpath的路徑字首修改為 ' ./ '（開始是 ' / '），因為打包之後，外部引入 js 和 css 檔案時，如果路徑以 ' / ' 開頭，在本地是無法找到對應檔案的（伺服器上沒問題）。所以如果需要在本地開啟打包後的檔案，就得修改檔案路徑。
我的埠沒有被占用，直接成功（服務啟動成功後瀏覽器會預設開啟乙個「歡迎頁面」）：
4.vue-cli的webpack配置分析
5.打包上線
注意，自己的專案檔案都需要放到 src 資料夾下。
在專案開發完成之後，可以輸入npm run build來進行打包工作。
專案上線時，只需要將 dist 資料夾放到伺服器就行了。
如果我的內容能對你有所幫助，我就很開心啦！
標籤: 前端 vue-cli
Vue cli vue腳手架 安裝
準備工作 首先安裝node 和 npm 不會安裝的話請參考 並且保證node版本是v6及以上，話不多說，上圖 安裝和解除安裝 一.安裝 1.安裝2.x 安裝npm install vue cli g 版本檢視 vue v 或者 vue version 2.安裝3.x 或 4.x 安裝cnpm ins...
vue cli vue腳手架使用配置
index.html js路徑問題 config index.js build物件下的 assetspublicpath 改為 assetspublicpath css背景路徑問題 build utils.js if options.extract icon不顯示 build webpack.pro...
vue cli（vue腳手架）搭建專案
vue cli 是乙個官方發布 vue.js 專案腳手架，使用 vue cli 可以快速建立 vue 專案。這篇文章將會從實操的角度，介紹整個搭建的過程。其實這次使用vue cli的過程並不順利，反覆嘗試幾次都遇到以下這個報錯 建立vue cli工程專案時的報錯 在網上查了很多資料才發現原來是nod...