vue-cli這個(gè)構(gòu)建工具大大降低了webpack的使用難度九默，支持熱更新，有webpack-dev-server的支持，相當(dāng)于啟動(dòng)了一個(gè)請求服務(wù)器拳恋，給你搭建了一個(gè)測試環(huán)境，只關(guān)注開發(fā)就OK砸捏。
1.安裝vue-cli
- 使用npm（需要安裝node環(huán)境）全局安裝webpack谬运，打開命令行工具輸入：
npm install webpack -g或者（npm install -g webpack），安裝完成之后輸入webpack -v垦藏，如下圖梆暖，如果出現(xiàn)相應(yīng)的版本號(hào)，則說明安裝成功掂骏。
注意：webpack 4.X 開始轰驳，需要安裝 webpack-cli 依賴 ,所以使用這條命令 npm install webpack webpack-cli -g
- 全局安裝vue-cli，在cmd中輸入命令:
npm install --global vue-cli
-
安裝成功：
安裝成功之前的圖
安裝完成之后輸入 vue -V（注意這里是大寫的“V”）弟灼，如下圖级解，如果出現(xiàn)相應(yīng)的版本號(hào)，則說明安裝成功田绑。
vue版本
打開C:\Users\Andminster\AppData\Roaming\npm目錄下可以看到：
目錄地址
打開node_modules也可以看到：
node_modules
2.用vue-cli來構(gòu)建項(xiàng)目
(1)我首先在F盤新建一個(gè)文件夾（F:\vue）作為項(xiàng)目存放地勤哗，然后使用命令行cd進(jìn)入到項(xiàng)目目錄輸入：
vue init webpack vue-ruler// vue-ruler是項(xiàng)目名稱
vue-ruler 是自定義的項(xiàng)目名稱，命令執(zhí)行之后掩驱，會(huì)在當(dāng)前目錄生成一個(gè)以該名稱命名的項(xiàng)目文件夾芒划。
輸入命令后，會(huì)跳出幾個(gè)選項(xiàng)讓你回答：
Project name (vue-ruler)： -----項(xiàng)目名稱欧穴，直接回車民逼，按照括號(hào)中默認(rèn)名字（注意這里的名字不能有大寫字母，如果有會(huì)報(bào)錯(cuò)Sorry, name can no longer contain capital letters）苔可，阮一峰老師博客為什么文件名要小寫 缴挖，可以參考一下。
Project description (A Vue.js project)： ----項(xiàng)目描述焚辅，也可直接點(diǎn)擊回車映屋，使用默認(rèn)名字
Author ()： ----作者苟鸯，輸入你的大名
4.接下來會(huì)讓用戶選擇：
- Runtime + Compiler: recommended for most users 運(yùn)行加編譯，既然已經(jīng)說了推薦棚点，就選它了
- Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere 僅運(yùn)行時(shí)早处，已經(jīng)有推薦了就選擇第一個(gè)了
5.Install vue-router? (Y/n) 是否安裝vue-router，這是官方的路由瘫析，大多數(shù)情況下都使用砌梆，這里就輸入“y”后回車即可。
6.Use ESLint to lint your code? (Y/n) 是否使用ESLint管理代碼贬循，ESLint是個(gè)代碼風(fēng)格管理工具咸包，是用來統(tǒng)一代碼風(fēng)格的，一般項(xiàng)目中都會(huì)使用杖虾。
7.接下來也是選擇題Pick an ESLint preset (Use arrow keys) 選擇一個(gè)ESLint預(yù)設(shè)烂瘫，編寫vue項(xiàng)目時(shí)的代碼風(fēng)格，直接y回車
- Setup unit tests with Karma + Mocha? (Y/n) 是否安裝單元測試奇适，我選擇安裝y回車
-
Setup e2e tests with Nightwatch(Y/n)? 是否安裝e2e測試 坟比，我選擇安裝y回車
創(chuàng)建項(xiàng)目中
回答完畢后上圖就開始構(gòu)建項(xiàng)目了。
(2)配置完成后嚷往，可以看到目錄下多出了一個(gè)項(xiàng)目文件夾vue-ruler葛账，然后cd進(jìn)入這個(gè)文件夾：
安裝依賴：
npm install
( 如果安裝速度太慢∑と剩可以安裝淘寶鏡像籍琳，打開命令行工具，輸入：
?npm install -g cnpm --registry=https://registry.npm.taobao.org
?然后使用cnpm來安裝魂贬，這里不再贅述 )
npm install ：安裝所有的模塊巩割，如果是安裝具體的哪個(gè)個(gè)模塊，在install 后面輸入模塊的名字即可付燥。而只輸入install就會(huì)按照項(xiàng)目的根目錄下的package.json文件中依賴的模塊安裝（這個(gè)文件里面是不允許有任何注釋的），每個(gè)使用npm管理的項(xiàng)目都有這個(gè)文件愈犹，是npm操作的入口文件键科。因?yàn)槭浅跏柬?xiàng)目，還沒有任何模塊漩怎，所以我用npm install 安裝所有的模塊勋颖。安裝完成后，目錄中會(huì)多出來一個(gè)node_modules文件夾勋锤，這里放的就是所有依賴的模塊饭玲。
然后現(xiàn)在，vue-ruler文件夾里的目錄是這樣的：
3.啟動(dòng)項(xiàng)目
npm run dev
如果瀏覽器打開之后叁执，沒有加載出頁面茄厘，有可能是本地的 8080 端口被占用矮冬，需要修改一下配置文件 config里的index.js
4.打包上線
注意，自己的項(xiàng)目文件都需要放到 src 文件夾下次哈。
在項(xiàng)目開發(fā)完成之后胎署，可以輸入 npm run build 來進(jìn)行打包工作。
npm run build
打包完成后窑滞，會(huì)生成 dist 文件夾琼牧，如果已經(jīng)修改了文件路徑，可以直接打開本地文件查看哀卫。
項(xiàng)目上線時(shí)巨坊，只需要將 dist 文件夾放到服務(wù)器就行了。
5.npm的一些總結(jié)
1.npm 開啟了npm run dev以后怎么退出或關(guān)閉此改？
ctrl+c
2.--save-dev
自動(dòng)把模塊和版本號(hào)添加到模塊配置文件package.json中的依賴?yán)飀evdependencies部分
3. --save-dev 與 --save 的區(qū)別
--save 安裝包信息將加入到dependencies（生產(chǎn)階段的依賴）
--save-dev 安裝包信息將加入到devDependencies（開發(fā)階段的依賴）趾撵，所以開發(fā)階段一般使用它
npm install grunt --save-dev
