第一步:查看是否已经装了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
 
正确姿势

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

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

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

因此我需要执行

$ 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

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

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

 
错误截图

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

 
正确姿势

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

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

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

微信小程序搭建mpvue+vant的更多相关文章

  1. 微信小程序搭建mpvue+vant+flyio

    导语 上一篇文章微信小程序搭建mpvue+vant已经介绍了如何搭起mpvue项目及引入vant,本篇文章继续在它的基础上,引入flyio,并做一些封装,目的是为了在小程序发起请求. 这时读者会有些疑 ...

  2. 使用Vue开发微信小程序:mpvue框架

    使用Vue开发微信小程序:mpvue框架:https://www.jianshu.com/p/8f779950bfd9

  3. 微信小程序之mpvue+iview踩坑之旅

    因为之前参照微信的原生的文档写过一些小程序的demo,写的过程比较繁琐,后来出了美团的mpvue,可以直接使用vue开发,其他的不作对比,这篇文章记录一下踩坑之旅. 参照mpvue http://mp ...

  4. 为苹果ATS和微信小程序搭建 Nginx + HTTPS 服务

    昨天测试开发微信小程序,才发现微信也要求用HTTPS加密数据,想来是由于之前苹果的ATS审核政策的缘故吧,微信想在苹果上开放小程序必然也只能要求开发者必须使用HTTPS了,于是在服务器上测试安装Ngi ...

  5. mpvue 开发微信小程序搭建项目

    首先 mpvue 是一款基于vue的框架,mpvue 修改了 Vue.js 的 runtime 和 compile 实现,可以运行在小程序的环境中. 第一步:安装 vue-cli vue-cli是vu ...

  6. 微信小程序搭建和开发相关指引

    几点: 1.环境搭建 2.开发和调试 3.发布 原文链接: http://www.lookdaima.com/WebForms/WebPages/Blanks/Pm/Docs/DocItemDetai ...

  7. 微信小程序错误——mpvue小程序:未找到 app.json 中的定义的 pages "pages/XXX/XXX" 对应的 WXML 文件

    背景 在刚开始学习开发小程序时,使用微信开发工具在app.json建立页面,写好配置文件名称后,应该会自动生成页面的4个文件,结果没有生成文件,反而报错:mpvue小程序:未找到 app.json 中 ...

  8. 微信小程序(mpvue) wx.openSetting 无法调起设置页面

    在开发过程有个需要保存图片/视频到设备相册的业务,so easy~   巴啦啦撸下来了完整功能, wx.saveVideoToPhotosAlbum 会自动调起用户授权,美滋滋~~   btu.... ...

  9. 【微信小程序】mpvue中页面之间传值(全网唯一真正可行的方法,中指推了一下隐形眼镜)

    摘要: mpvue中页面之间传值(注意:是页面之间,不是组件之间) 场景:A页面跳转B页面,在B页面选择商品,将商品名带回A页面并显示 使用api: getCurrentPages step1: A页 ...

随机推荐

  1. 长沙理工大学第十二届ACM大赛-重现赛 大家一起来数二叉树吧 (组合计数)

    大意: 求n结点m叶子二叉树个数. 直接暴力, $dp[i][j][k][l]$表示第$i$层共$j$节点, 共$k$叶子, 第$i$层有$l$个叶子的方案数, 然后暴力枚举第$i$层出度为1和出度为 ...

  2. Java EE javax.servlet.http中的HttpRequest抽象类

    HttpRequest抽象类 public abstract class HttpServlet extends GenericServlet 实现的接口有:Serializable, Servlet ...

  3. lua的数据类型

    Lua 是动态(弱)类型的语言,它有一下几种数据结构: nil(空) nil 类型表示一种没有任何有效值,它只有一个值 -- nil,例如打印一个没有赋值的变量,便会输出一个 nil 值: print ...

  4. vue.js对列表进行编辑未保存随时变更

    1.不要建立在同一vm对象下 2.使用深拷贝$.extend(true, vm.model, obj); 3.开新标签页

  5. Pytorch中nn.Conv2d的用法

    Pytorch中nn.Conv2d的用法 nn.Conv2d是二维卷积方法,相对应的还有一维卷积方法nn.Conv1d,常用于文本数据的处理,而nn.Conv2d一般用于二维图像. 先看一下接口定义: ...

  6. 小程序API接口调用

    1.在config.js中写入api接口及appkey   2.在HTTP.js中引入config.js,然后新建HTTP.js,在里进行wx.request的封装. 定义一个HTTP的类,来类里定义 ...

  7. windows下修改vagrant虚拟机中的html ,通过nginx访问后不生效

    更改本地html文件,通过nginx配置的虚拟域名访问, 无论怎么修改内容,都不变化,即使我把内容删除一半,它显示的也是以前内容的一半,除非删除文件,才会从新生成. 解决办法 修改nginx.conf ...

  8. Scrapy框架之高级 转

    一.CrawlSpider模板 创建项目 scrapy startproject 项目名称 查看模板 scrapy genspider -l 创建crawl模板 scrapy genspider -t ...

  9. jsonp的原理介绍及Promise封装

    什么叫jsonp? jsonp是json with padding(填充式json或参数式json)的简写,是通过ajax请求跨域接口,获取数据的新实现方式 jsonp的实现原理: 动态创建scrip ...

  10. Oracle【增删改&数据的备份】

    增删改的SQL语句执行完毕后,不会立马进行数据的写入数据库(这时数据在内存中),需要手动对数据进行提交(commit),如果数据出问题,可以使用回滚.主键:非空唯一的 --在一张表中,某字段值是非空唯 ...