1.安裝 vue-cli 腳手架javascript
npm install --g vue-cli
2.建立項目vue
vue init mpvue/mpvue-quickstart test-wxapp cd test-wxapp npm i npm run dev
項目就跑起來了,這個時候,咱們打開微信開發者工具,選擇小程序,而後新建一個,項目目錄填 咱們項目目錄下的dist
目錄 test-wxapp/dist
,就能夠看到效果了java
3.引入 iviewgit
(1)下載 iView Weapp 的代碼github
https://github.com/TalkingData/iview-weappvue-cli
(2)下載完後將dist文件夾中的全部文件(也能夠只選擇須要的組件)導入到mpvue項目的static文件夾中npm
(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)效果圖