一起进步,一起共勉~

初始化mpvue项目

需提前安装好node跟npm,请自行google安装

1
2
3
4
5
6
7
8
9
10
11
# 全局安装 vue-cli
$ npm install --global vue-cli

# 创建一个基于 mpvue-quickstart 模板的新项目
$ vue init mpvue/mpvue-quickstart my-project

# 安装依赖
$ cd my-project
$ npm install
# 启动构建
$ npm run dev

接下来启动微信开发者工具,引入项目即可预览到 mpvue 小程序!

使用 iView 组件库

1、下载iView

这里下载iview-weapp项目

2、配置iView

将iview-weapp中的dist文件夹(此处我重命名为iview,以便区分)复制到mpvue项目的输出目录中(默认是dist,编译后的vue代码在此)

3、使用iView

比如,现在我要在src/pages/index/index.vue中使用iView中的i-button组件,那么就先要在src/pages/index/main.json(如果没有该文件,则新建一个)中进行如下配置:

1
2
3
4
5
{
"usingComponents": {
"i-button": "../../iview/button/index"
}
}

经过上一步的配置,我们就可以开始在src/pages/index/index.vue中使用这个i-button组件了,就像这样:

1
2
3
4
5
<template>
<div class="container">
<i-button type="primary" @click="bindViewTap">这是一个按钮</i-button>
</div>
</template>

运行这个小程序,能看到如下的样子: