1，安裝vue-cli
（1）全局安裝webpack
使用npm（需要安裝node環(huán)境）全局安裝webpack，打開命令行工具輸入：npm install webpack -g或者（npm install -g webpack），安裝完成之后輸入 webpack -v，如下圖，如果出現(xiàn)相應(yīng)的版本號，則說明安裝成功。
注意：webpack 4.X 開始，需要安裝 webpack-cli 依賴 ,所以使用這條命令 ：
npm install webpack webpack-cli -g
如果需要 可以安裝cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
（2）全局安裝vue-cli，在cmd中輸入命令
npm install --global vue-cli
安裝完成之后輸入 vue -V（注意這里是大寫的“V”），如下圖，如果出現(xiàn)相應(yīng)的版本號，則說明安裝成功。
2,用vue-cli來構(gòu)建項目
（1）生成項目
我首先在D盤新建一個文件夾（vue）作為項目存放地，然后使用命令行cd進(jìn)入到項目目錄輸入：
vue init webpack baoge
baoge是自定義的項目名稱，命令執(zhí)行之后，會在當(dāng)前目錄生成一個以該名稱命名的項目文件夾。
輸入命令后，會跳出幾個選項讓你回答：
- Project name (baoge)： -----項目名稱，直接回車，按照括號中默認(rèn)名字（注意這里的名字不能有大寫字母，如果有會報錯Sorry, name can no longer contain capital letters），阮一峰老師博客為什么文件名要小寫 ，可以參考一下。
- Project description (A Vue.js project)： ----項目描述，也可直接點擊回車，使用默認(rèn)名字
- Author ()： ----作者，輸入你的大名
接下來會讓用戶選擇： - Runtime + Compiler: recommended for most users 運行加編譯，既然已經(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 僅運行時，已經(jīng)有推薦了就選擇第一個了 - Install vue-router? (Y/n) 是否安裝vue-router，這是官方的路由，大多數(shù)情況下都使用，這里就輸入“y”后回車即可。
- Use ESLint to lint your code? (Y/n) 是否使用ESLint管理代碼，ESLint是個代碼風(fēng)格管理工具，是用來統(tǒng)一代碼風(fēng)格的，一般項目中都會使用。
接下來也是選擇題Pick an ESLint preset (Use arrow keys) 選擇一個ESLint預(yù)設(shè)，編寫vue項目時的代碼風(fēng)格，直接y回車 - Setup unit tests with Karma + Mocha? (Y/n) 是否安裝單元測試，我選擇安裝y回車
- Setup e2e tests with Nightwatch(Y/n)? 是否安裝e2e測試 ，我選擇安裝y回車
（2）安裝依賴
配置完成后，可以看到目錄下多出了一個項目文件夾baoge，然后cd進(jìn)入這個文件夾：
npm install
npm install ：安裝所有的模塊，如果是安裝具體的哪個個模塊，在install 后面輸入模塊的名字即可。而只輸入install就會按照項目的根目錄下的package.json文件中依賴的模塊安裝（這個文件里面是不允許有任何注釋的），每個使用npm管理的項目都有這個文件，是npm操作的入口文件。因為是初始項目，還沒有任何模塊，所以我用npm install 安裝所有的模塊。安裝完成后，目錄中會多出來一個node_modules文件夾，這里放的就是所有依賴的模塊。
3.啟動項目
npm run dev
4，生成項目
npm run build
加入vant
npm i vant -S：這是簡寫形式。 npm install vant --save:這是完整寫法。
如果你網(wǎng)絡(luò)很慢的話，可以使用淘寶的源，但是不建議使用cnpm來進(jìn)行安裝，用cnpm安裝時我個人是會出現(xiàn)一些未知的問題的，所以我在實際項目中，都是用了這種安裝方式。
cnpm install vant --save
安裝好后，看一下我們的package.json文件，并確認(rèn)一下版本。如果以后版本有所升級，可能下面課程中的使用方法有所不同，這個需要注意。
引入Vant的第一種方法（不推薦）
安裝好vant后，可以使用以前常用的方法進(jìn)行引入-這是一種全局引入的方式。 直接在src/main.js進(jìn)行全局引入。
import Vant from 'vant'
import 'vant/lib/vant-css/index.css'
Vue.use(vant)
簡單的三行代碼已經(jīng)可以把Vant引入進(jìn)來了，但是這并不夠優(yōu)雅，也使得最后打包發(fā)布時會增加包的大小，Vue的SPA首屏打開時本來就有些慢，所以不建議使用這種方法進(jìn)行引入。
優(yōu)雅的引入Vant
vant是支持babel-plugin-import引入的，它可以讓我們按需引入組件模塊，并且不用管理我們的樣式，現(xiàn)在Vue項目組件庫的主流引入方法。 安裝babel-plugin-import
npm install babel-plugin-import --save-dev
或者
cnpm install babel-plugin-import --save-dev
按需使用Vant組件
我們設(shè)置好.babelrc后，就可以按需引入Vant框架了。比如現(xiàn)在我們引入一個Button組件. 在src/main.js里加入下面的代碼
import { Button } from 'vant'
Vue.use(Button)
多個引入
import { Button, Row, Col } from 'vant'
Vue.use(Button).use(Row).use(Col)
或者在需要的頁面單獨引入：
import { Button } from "vant"
export default {
components:{
[Button.name]:Button
},
}
有了這段代碼之后，我們就可以在需要的組件頁面中加入Button了.
<van-button type="primary">主要按鈕</van-button>
