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

准备工作:

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: ['.*']
      }
    ])
微信小程序mpvue+Vant Weapp初始化插图
image.png
第四步、代码里引用vant

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

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

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

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

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

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

您可以选择一种方式赞助本站

支付宝扫一扫赞助

微信钱包扫描赞助

未经允许不得转载:共享博客 » 微信小程序mpvue+Vant Weapp初始化

分享到: 更多 (0)
avatar

评论 抢沙发

  • QQ号
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
切换注册

登录

忘记密码 ?

切换登录

注册

我们将发送一封验证邮件至你的邮箱, 请正确填写以完成账号注册和激活