微信小程序搭建mpvue+vant

2019-04-02 本文已影响385人 hrongzhuang

导语

之前有搭建过mpvue+vant，不过没有做记录，这次公司又有新的小程序项目启动，所以再从头搭建。顺便记录一下，要不然时间久了也就忘记怎么搭建了。文章末尾含有代码，需要学习的童鞋，拿走不谢。

第一步：查看是否已经装了node.js

$ node -v

$ npm -v

没有装的话前往Node.js官网安装

第二步：安装cnpm

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

第三步：安装 Vue Cli

$ sudo cnpm install -g @vue/cli

第四步：想好项目名称，并创建它

先要进入你的代码目录，然后再创建，需要了解

因此我需要执行

$ cd /Users/hrz/myworkspace
$ vue init mpvue/mpvue-quickstart lawyer-card-wxss

执行后，过一会它会再次询问你，项目名称，微信小程序appid，项目描述，作者，是否开启ESLint等信息。

完成后，它就会在你执行命令的目录创建项目，接下来进入项目，下载依赖，并启动。

$ cd lawyer-card-wxss
$ cnpm install
$ npm run dev

这时，我们用微信开发者工具导入项目目录，运行起来看看效果

第五步：添加vant组件

回到刚才的命令窗口，还是依旧在项目目录下面，添加vant组件的依赖

$ cnpm i vant-weapp -S --production

执行后，可以进入package.json文件，查看dependencies是不是已经包含了vant-weapp，有的话，说明添加成功。接下来，打开项目里的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"
}

我们去首页的文件中加入按钮的代码，看看效果

运行项目，然后微信开发者工具看看

$ npm run dev

发现了，微信开发者工具控制台报错

解决方法
将ES6转ES5的复选框，钩上

就这样，就可以看到首页，已经成功显示vant的按钮。mpvue+vant搭建成功！！！
下一篇文章，我们来介绍怎么引入flyio：微信小程序搭建mpvue+vant+flyio

这里我上传了一个名字叫mpvue-vant-flyio的项目，步骤是按照上文操作的，只是项目名不同而已。mpvue-vant-flyio项目源码