一、搭建專案架構：

專案採用Webpack+Vue-router的架構方式，開始安裝（基於windows系統）

 1.按Win+R，然後在文字框中輸入cmd，回車開啟命令列，輸入vue-cli安裝命令：

npm install vue-cli -g

這裡的-g代表全域性安裝。

2.在命令列中初始化專案，我們採用的是webpack模板，輸入初始化命令：

vue init webpack MobileEcommerce

這裡的MobileEcommerce是我的專案資料夾名稱，你可以起一個自己喜歡的名稱。安裝時根據專案需要配置所需要的模組。這裡有一個小技巧，就是在你已經提前建立好了資料夾的時候，我們也進入了資料夾，這時候我們可以省略這個資料夾名稱。如下情況：

mikdir MobileEcommerce

cd MobileEcommerce

vue init webpack

3.測試環境是否安裝成功

使用如下指令 進行測試環境的開啟：

npm run dev

在瀏覽器中輸入 http://localhost:8080 進行測試。

在瀏覽器中開啟頁面，出現Vue的正常頁面時，說明你的專案已經初始化成功了。下節課我們就可以愉快的進行程式設計了。

二、Vant的引入

1.安裝Vant

安裝指令（簡寫形式）

npm i vant -S

完整寫法為：

npm install vant --save

2.優雅的引入Vant

vant是支援babel-plugin-import引入的，它可以讓我們按需引入元件模組，並且不用管理我們的樣式，現在Vue專案元件庫的主流引入方法。 安裝babel-plugin-import

npm i babel-plugin-import -D

完整寫法為：

npm install babel-plugin-import --save-dev

3.在.babelrc中配置plugins（外掛）

"plugins": [
    "transform-vue-jsx", 
    "transform-runtime",
    [
 
"import",{"libraryName":"vant","style":true}]
  ]

4.按需使用Vant元件

我們設定好.babelrc後，就可以按需引入Vant框架了。比如現在我們引入一個Button元件. 在src/main.js里加入下面的程式碼：

import { Button } from 'vant'
Vue.use(Button)

有了這段程式碼之後，我們就可以在需要的元件頁面中加入Button了.

<van-button type="primary">主要按鈕</van-button>

三、自己mokr資料

https://www.easy-mock.com