都說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`，如下圖，如果出現相應的版本號，則說明安裝成功。  **②** **全局安裝vue-cli**，在cmd中輸入命令: ~~~csharp npm install --global vue-cli ~~~ （我已經安裝過，為了更直觀我在電腦上重新演示下）  安裝成功：  安裝完成之后輸入 vue -V（注意這里是大寫的“V”），如下圖，如果出現相應的版本號，則說明安裝成功。  打開C:\\Users\\Andminster\\AppData\\Roaming\\npm目錄下可以看到：  打開node\_modules也可以看到：  #### 2.用vue-cli來構建項目 **①** 我首先在D盤新建一個文件夾（dxl\_vue）作為項目存放地，然后使用命令行cd進入到項目目錄輸入： ~~~kotlin vue init webpack baoge ~~~ baoge是自定義的項目名稱，命令執行之后，會在當前目錄生成一個以該名稱命名的項目文件夾。  輸入命令后，會跳出幾個選項讓你回答： * Project name (baoge)： -----項目名稱，直接回車，按照括號中默認名字（注意這里的名字不能有大寫字母，如果有會報錯Sorry, name can no longer contain capital letters），阮一峰老師博客[為什么文件名要小寫](https://link.jianshu.com?t=http://www.ruanyifeng.com/blog/2017/02/filename-should-be-lowercase.html) ，可以參考一下。 * Project description (A Vue.js project)： ----項目描述，也可直接點擊回車，使用默認名字 * Author ()： ----作者，輸入dongxili 接下來會讓用戶選擇： * 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進入這個文件夾： **安裝依賴**： ~~~undefined 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.啟動項目 ~~~undefined 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配置。可以說，這個文件相當重要。 * 還有**config/index.js 、build/utils.js 、build/build.js**等，具體請看這篇介紹： [https://segmentfault.com/a/1190000008644830](https://link.jianshu.com?t=https%3A%2F%2Fsegmentfault.com%2Fa%2F1190000008644830) #### 5.打包上線 注意，自己的項目文件都需要放到 src 文件夾下。 在項目開發完成之后，可以輸入 `npm run build` 來進行打包工作。 ~~~undefined npm run build ~~~ 另： ~~~css 1.npm 開啟了npm run dev以后怎么退出或關閉？ ctrl+c 2.--save-dev 自動把模塊和版本號添加到模塊配置文件package.json中的依賴里devdependencies部分 3. --save-dev 與 --save 的區別 --save 安裝包信息將加入到dependencies（生產階段的依賴） --save-dev 安裝包信息將加入到devDependencies（開發階段的依賴），所以開發階段一般使用它 ~~~ 打包完成后，會生成 dist 文件夾，如果已經修改了文件路徑，可以直接打開本地文件查看。 項目上線時，只需要將 dist 文件夾放到服務器就行了。 好了，史上最詳細版vue2腳手架出爐了，由于是全家桶第一篇，所以過于詳細，后面我只會寫關鍵步驟，多加入點實例。\[微笑\] 198人點贊 [技術文檔](/nb/22744967) 作者：東西里 鏈接：[https://www.jianshu.com/p/32beaca25c0d](https://www.jianshu.com/p/32beaca25c0d) 來源：簡書 著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。