微信小程序搭建mpvue+vant

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

$ node -v
$ npm -v
 
微信小程序搭建mpvue+vant
正确姿势

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

第二步:安装cnpm

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

第三步:安装 Vue Cli

$ sudo cnpm install -g @vue/cli
 
微信小程序搭建mpvue+vant
正确姿势

第四步:想好项目名称,并创建它

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

我本地代码目录:/Users/hrz/myworkspace
项目名:lawyer-card-wxss
appid:我的微信小程序appid

因此我需要执行

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

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

 
微信小程序搭建mpvue+vant
正确姿势

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

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

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

 
微信小程序搭建mpvue+vant
导入项目目录

 
微信小程序搭建mpvue+vant
能看到首页了

第五步:添加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: [‘.*‘]
      }
    ])
 
微信小程序搭建mpvue+vant
正确姿势

第六步:代码里引用vant

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

"usingComponents": {
  "van-button": "vant-weapp/dist/button/index"
}
 
微信小程序搭建mpvue+vant
正确姿势

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

 
微信小程序搭建mpvue+vant
加入按钮代码看效果

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

$ npm run dev

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

thirdScriptError
sdk uncaught third Error
Unexpected token export
SyntaxError: Unexpected token export


 
微信小程序搭建mpvue+vant
错误截图

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

 
微信小程序搭建mpvue+vant
正确姿势

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

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




转载链接:https://www.jianshu.com/p/58c33e8389fe

微信小程序搭建mpvue+vant

上一篇:网站如何接入微信公众号JSAPI支付PHP版


下一篇:小程序 wx.navigateTo和 wx.redirectTo区别