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

青梅煮码

发布于 2023-02-18 08:19:54

31300

代码可运行

文章被收录于专栏：青梅煮码青梅煮码

运行总次数：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: ['.*']
      }
    ])

第四步、代码里引用vant

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

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

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

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

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

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

$ npm run dev

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2020-08-11 ，如有侵权请联系 cloudcommunity@tencent.com 删除

vue.js

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度

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

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

准备工作：

第一步、创建一个基于 mpvue-quickstart 模板的新项目

第二步、进入项目->安装依赖->启动项目

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

第四步、代码里引用vant

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

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐