vantui如何开发微信小程序

vantui是一个基于Vue.js的移动端组件库，可以快速构建出漂亮的移动应用界面。在这篇文章中，我们将详细介绍如何在微信小程序中使用vantui组件库。

一、开发环境

在开始使用vantui之前，我们需要先准备好开发环境，包括：

1.微信小程序开发工具

2.Node.js

3.Vue.js

4.vantui组件库

二、初始化项目

在微信小程序开发工具中创建一个新的小程序项目，然后在项目目录下打开命令行工具，执行以下命令：

npm init -y

这个命令会生成一个package.json文件，用于记录项目的基本信息和依赖库。

接下来，我们安装vue.js和vantui组件库：

npm i vue vant

npm i vantui@next -S

其中-S参数的意思是将vantui安装到我们的项目中，并写入到package.json的dependencies中。

三、在微信小程序中使用Vue.js

由于微信小程序并不原生支持Vue.js，我们需要引入一个小程序版的Vue.js框架，比如mpvue或者uni-app，本文选择了mpvue作为演示工具。

安装mpvue：

npm i --global vue-cli

vue init mpvue/mpvue-quickstart my-project

进入项目目录，安装依赖：

cd my-project

npm install

安装mpvue-loader：

npm install --save-dev mpvue-loader@^1.1.4

打开项目中的build目录下的webpack.base.conf.js文件，在module.exports中的module.rules数组中添加以下配置项：

{

test: /\.vue$/,

loader: 'mpvue-loader',

options: {

// mpvue-loader options

}

}

接下来，我们在src目录下创建一个新的vue组件：

在小程序中使用Vue.js需要注意：

1.组件名称全部为小写。

2.使用小程序中的组件时，需要加上wx:前缀。

四、在微信小程序中使用vantui

为了在微信小程序中使用vantui组件库，我们需要将组件库中的样式和脚本文件导入到我们的项目中，并进行相应的配置。

1.导入组件

在我们需要使用vant组件的页面或组件中，导入vantui组件库：

import vant from 'vant';

import 'vant/lib/index.css';

export default {

name: 'HelloWorld',

components: {

vant,

},

};

2.配置构建工具

由于微信小程序不支持require或者import的方式引用资源文件，我们需要在构建阶段将vantui的样式和脚本文件打包到小程序中。

打开package.json，添加以下配置：

{

"mpvue": {

"config": {

"style": [

"node_modules/vant/lib/index.css"

],

"script": [

// swiper默认指向 web 中引用的 js

{ "src": "node_modules/vant/lib/vant.js" }

],

"uglifyjs": {

"uglifyOptions": {

"compress": {

"warnings": false,

// 是否注释 console

"drop_console": true,

// 是否注释 debugger

"drop_debugger": true

},

"output": {

// 是否保留注释

"comments": false

},

"sourceMap": true

},

"parallel": true

}

}

},

}

五、小技巧

1.可以使用postcss-mpvue-wxss插件自动处理vantui中样式文件中的rpx为px，避免样式混乱：

npm i --save-dev postcss-mpvue-wxss

在build目录下的webpack.base.conf.js中添加以下配置：

const wxss = {

loader: 'postcss-loader',

options: {

ident: 'postcss',

plugins: [

require('postcss-mpvue-wxss')(),

// require('postcss-url')({

// // 处理图片相对路径的插件

// url: 'inline',

// maxSize: 0,

// basePath: '../src/assets'

// })

]

}

};

在module.exports中的module.rules数组中，找到对wxss文件进行处理的配置，在options中添加wxss配置。

2.使用mpvue-entry插件，自动处理所有的页面和组件入口文件。

npm i --save-dev mpvue-entry

在build目录下的entry.js中添加以下代码：

const MpVueEntry = require('mpvue-entry');

const entry = MpVueEntry.getEntry('./src/router/index.js');

entry.vant = './src/vantUI/vant.js';

第一个参数是我们自己编写的页面和组件的入口文件，第二个参数是vantui的相关配置。

六、总结

使用vantui开发微信小程序并不难，只需要准备好开发环境、使用小程序版的Vue.js框架、导入vantui组件库并进行相关配置即可。值得一提的是，由于微信小程序对Vue.js支持还不够完善，我们需要在使用过程中注意一些细节和小技巧，才能让开发过程更加顺畅。