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
Last login: Tue Sep 4 18:58:29 on ttys001 mujinkeji:~ syd$ npm -v 6.2.0
mujinkeji:~ syd$ webpack -v
One CLI for webpack must be installed. These are recommended choices, delivered as separate packages:
- webpack-cli (https://github.com/webpack/webpack-cli)
The original webpack full-featured CLI.
- webpack-command (https://github.com/webpack-contrib/webpack-command)
A lightweight, opinionated webpack CLI.
We will use "npm" to install the CLI via "npm install -D".
Which one do you like to install (webpack-cli/webpack-command):
mujinkeji:~ syd$ npm install webpack webpack-cli -g
/usr/local/bin/webpack -> /usr/local/lib/node_modules/webpack/bin/webpack.js
/usr/local/bin/webpack-cli -> /usr/local/lib/node_modules/webpack-cli/bin/cli.js
+ webpack@4.17.2
+ webpack-cli@3.1.0
added 111 packages from 50 contributors and updated 1 package in 15.095s
mujinkeji:~ syd$ webpack -v
4.17.2
② 全局安裝vue-cli，在cmd中輸入命令:___安裝完成之后輸入 vue -V（注意這里是大寫的“V”），如下圖，如果出現相應的版本號，則說明安裝成功。
mujinkeji:~ syd$ webpack -v 4.17.2 mujinkeji:~ syd$ npm install --global vue-cli npm WARN deprecated coffee-script@1.12.7: CoffeeScript on NPM has moved to "coffeescript" (no hyphen) /usr/local/bin/vue -> /usr/local/lib/node_modules/vue-cli/bin/vue /usr/local/bin/vue-list -> /usr/local/lib/node_modules/vue-cli/bin/vue-list /usr/local/bin/vue-init -> /usr/local/lib/node_modules/vue-cli/bin/vue-init + vue-cli@2.9.6 added 253 packages from 220 contributors in 21.081s mujinkeji:~ syd$ vue -V
2.用vue-cli來構建項目
① 我首先在桌面新建一個文件夾（dxl_vue）作為項目存放地，然后使用命令行cd進入到項目目錄輸入：
vue init webpack baoge
baoge是自定義的項目名稱，命令執行之后，會在當前目錄生成一個以該名稱命名的項目文件夾
mujinkeji:~ syd$ cd /Users/shenzhenshimujinkejiyouxiangongsi/Desktop/dxl_vue mujinkeji:dxl_vue syd$ vue init webpack VueTestDemo ? Project name vuetest ? Project description a vue.js project ? Author syd ? Vue build standalone ? Install vue-router? Yes ? Use ESLint to lint your code? Yes ? Pick an ESLint preset Standard ? Set up unit tests Yes ? Pick a test runner jest ? Setup e2e tests with Nightwatch? Yes ? Should we run `npm install` for you after the project has been created? (recom mended) npm vue-cli · Generated "VueTestDemo". # Installing project dependencies ... # ======================== npm WARN deprecated browserslist@2.11.3: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools. npm WARN deprecated bfj-node4@5.3.1: Switch to the `bfj` package for fixes and new features! npm WARN deprecated browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools. npm WARN deprecated istanbul-lib-hook@1.2.1: 1.2.0 should have been a major version bump npm WARN deprecated @types/commander@2.12.2: This is a stub types definition for commander (https://github.com/tj/commander.js). commander provides its own type definitions, so you don't need @types/commander installed! npm WARN deprecated socks@1.1.10: If using 2.x branch, please upgrade to at least 2.1.6 to avoid a serious bug with socket data flow and an import issue introduced in 2.1.0 > fsevents@1.2.4 install /Users/shenzhenshimujinkejiyouxiangongsi/Desktop/dxl_vue/VueTestDemo/node_modules/fsevents > node install [fsevents] Success: "/Users/shenzhenshimujinkejiyouxiangongsi/Desktop/dxl_vue/VueTestDemo/node_modules/fsevents/lib/binding/Release/node-v64-darwin-x64/fse.node" already installed Pass --update-binary to reinstall or --build-from-source to recompile > chromedriver@2.41.0 install /Users/shenzhenshimujinkejiyouxiangongsi/Desktop/dxl_vue/VueTestDemo/node_modules/chromedriver > node install.js Downloading https://chromedriver.storage.googleapis.com/2.41/chromedriver_mac64.zip Saving to /var/folders/pd/sjkpjvx50hl3yydt39hjg9x40000gn/T/chromedriver/chromedriver_mac64.zip ChromeDriver installation failed Error with http(s) request: Error: read ECONNRESET npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! chromedriver@2.41.0 install: `node install.js` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the chromedriver@2.41.0 install script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! A complete log of this run can be found in: npm ERR! /Users/shenzhenshimujinkejiyouxiangongsi/.npm/_logs/2018-09-04T11_20_47_977Z-debug.log Running eslint --fix to comply with chosen preset rules... # ======================== > vuetest@1.0.0 lint /Users/shenzhenshimujinkejiyouxiangongsi/Desktop/dxl_vue/VueTestDemo > eslint --ext .js,.vue src test/unit test/e2e/specs "--fix" # Project initialization finished! # ======================== To get started: cd VueTestDemo npm run dev Documentation can be found at https://vuejs-templates.github.io/webpack
輸入命令后，會跳出幾個選項讓你回答：
- 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 -g cnpm --registry=https://registry.npm.taobao.org 然后使用cnpm來安裝
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配置。可以說，這個文件相當重要。
還有config/index.js 、build/utils.js 、build/build.js等，具體請看這篇介紹：https://segmentfault.com/a/1190000008644830
5.打包上線:注意，自己的項目文件都需要放到 src 文件夾下。
在項目開發完成之后，可以輸入 npm run build 來進行打包工作。
npm run build
1.npm 開啟了npm run dev以后怎么退出或關閉？ ctrl+c 2.--save-dev 自動把模塊和版本號添加到模塊配置文件package.json中的依賴里devdependencies部分 3. --save-dev 與 --save 的區別 --save 安裝包信息將加入到dependencies（生產階段的依賴） --save-dev 安裝包信息將加入到devDependencies（開發階段的依賴），所以開發階段一般使用它
打包完成后，會生成 dist 文件夾，如果已經修改了文件路徑，可以直接打開本地文件查看。
項目上線時，只需要將 dist 文件夾放到服務器就行了