Vue.js+Koa2移動電商 筆記
阿新 • • 發佈:2018-11-27
一、搭建專案架構:
專案採用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資料