1.安裝 vue-cli 腳手架
npm install --g vue-cli
2.創建項目
vue init mpvue/mpvue-quickstart test-wxapp cd test-wxapp npm i npm run dev
項目就跑起來了,這個時候,我們打開微信開發者工具,選擇小程序,然后新建一個,項目目錄填 我們項目目錄下的dist
目錄 test-wxapp/dist
,就可以看到效果了
3.引入 iview
(1)下載 iView Weapp 的代碼
https://github.com/TalkingData/iview-weapp
(2)下載完后將dist文件夾中的所有文件(也可以只選擇需要的組件)導入到mpvue項目的static文件夾中
(3)在需要使用組件的頁面中配置。
main.js
import Vue from 'vue' import App from './index' const app = new Vue(App) app.$mount() export default { config: { usingComponents: { 'i-card': '../../../static/iview/card/index' } } }
(4)然后在頁面中使用標簽就可成功調用
<i-card full title="卡片標題" extra="額外內容" thumb="https://i.loli.net/2017/08/21/599a521472424.jpg"> <view slot="content">內容不錯</view> <view slot="footer">尾部內容</view> </i-card>
(5)效果圖