Vue基礎（十八）vue-cli（Vue腳手架）

注意：該方法針對於Vue-cli4.0如下的版本

1. 做用

​ 快速建立一個基於webpack模板的項目

2. 安裝

1. 安裝webpack：使用npm全局安裝webpack,打開命令行工具，輸入 npm install webpack -g，安裝完成以後，輸入 webpack -v 便可查看當前安裝版本，出現版本號說明安裝成功
2. **全局安裝vue-cli：**在命令行輸入 npm install --global vue-cli，安裝完成以後，輸入 vue -V查看當前版本號

3. 使用Vue-cli來構建項目

1. 新建文件夾Vue，進入文件夾，輸入 vue init webpack vue-cli-test，其中vue-cli-test爲新項目文件名

2. 跳入選擇項來進行項目信息填寫與確認

   • Project name (baoge)： -----項目名稱，直接回車，按照括號中默認名字（注意這裏的名字不能有大寫字母，若是有會報錯Sorry, name can no longer contain capital letters），阮一峯老師博客爲何文件名要小寫 ，能夠參考一下。

   • Project description (A Vue.js project)： ----項目描述，也可直接點擊回車，使用默認名字

   • Author ()： ----做者，輸入mapengfei 接下來會讓用戶選擇：

   • 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回車

3. 配置完成以後，Vue目錄下面多了一個vue-cli-test的文件夾，進入文件夾，下載依賴 npm install

4. 修改配置，啓動項目

   • 修改 config裏面的index.js文件

• 修改端口號是爲了防止端口號被佔用，修改assetsPublicPath屬性是由於打包後，外部引入js和css文件時，若是路徑是以'/'開頭，在本地是沒法找到對應文件的，因此若是要在本地打開打包後的文件，就得修改路勁爲'/'

• 輸入 npm run dev 啓動項目，成功後輸入訪問地址，顯示以下界面

4. 項目目錄介紹

在 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等，具體請看這篇介紹： segmentfault.com/a/119000000…

5. 打包部署

• 本身開發的項目文件都須要放到src目錄下面
• 在項目開發完成以後，使用 npm run build來打包項目，打包完成後會生成dist文件夾，若是已修改了文件路徑，能夠直接在本地打開
• 項目上線時，直接將dist文件夾放到服務器便可

6. 參考文章

www.jianshu.com/p/32beaca25…