当前位置: 代码迷 >> 综合 >> 微信小程序mpvue+Vant Weapp初始化
  详细解决方案

微信小程序mpvue+Vant Weapp初始化

热度:85   发布时间:2023-09-13 11:34:56.0

准备工作:

1.安装node.js nodejs官网

//可查看node版本
$ node -v
$npm -v

2.安装淘宝镜像cnpm

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

3.安装vue-cli脚手架构建工具

$ cnpm install -g vue-cli
第一步、创建一个基于 mpvue-quickstart 模板的新项目

可参考mpvue官网

$ vue init mpvue/mpvue-quickstart my-project

随即一路回车就好 (ESlint要是嫌麻烦可以选择N不装)

第二步、进入项目->安装依赖->启动项目
$ cd my-project
$ npm install
$ npm run dev

运行成功之后,可以看到本地多了个 dist 目录,这个目录里就是生成的小程序相关代码。
Vue开发环境已经搭建好,接下来打开微信开发者工具,打开我们的项目my-project

第三步、引入Vant Weapp小程序 UI 组件库

可参考Vant Weapp官网

# 通过 npm 安装
npm i vant-weapp -S --production

安装完后,打开项目里的build/Webpack.base.conf.js文件,在baseWebpackConfig.plugins数组里增加多一个CopyWebpackPlugin。主要是为了mpvue在编译成微信小程序开发语言的时候,也顺带把vant组件复制到目录里,这样的话才能被项目找到。

new CopyWebpackPlugin([{from: resolve('node_modules/vant-weapp/dist'),to: resolve('dist/wx/vant-weapp/dist'),ignore: ['.*']}])
image.png
第四步、代码里引用vant

在src/app.json文件用全局引用某个组件,比如按钮组件

"usingComponents": {"van-button": "vant-weapp/dist/button/index"
}

页面中直接引用组件就好了

默认按钮主要按钮信息按钮警告按钮危险按钮

注意:在微信开发者工具中选择ES6 转 ES5,否则要报错

第五步、重启项目,就可以在微信开发者工具中查看效果了
$ npm run dev