微信小程序搭建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
正确姿势
第四步:想好项目名称,并创建它
先要进入你的代码目录,然后再创建,需要了解
我本地代码目录:/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的更多相关文章
- 微信小程序搭建mpvue+vant+flyio
导语 上一篇文章微信小程序搭建mpvue+vant已经介绍了如何搭起mpvue项目及引入vant,本篇文章继续在它的基础上,引入flyio,并做一些封装,目的是为了在小程序发起请求. 这时读者会有些疑 ...
- 使用Vue开发微信小程序:mpvue框架
使用Vue开发微信小程序:mpvue框架:https://www.jianshu.com/p/8f779950bfd9
- 微信小程序之mpvue+iview踩坑之旅
因为之前参照微信的原生的文档写过一些小程序的demo,写的过程比较繁琐,后来出了美团的mpvue,可以直接使用vue开发,其他的不作对比,这篇文章记录一下踩坑之旅. 参照mpvue http://mp ...
- 为苹果ATS和微信小程序搭建 Nginx + HTTPS 服务
昨天测试开发微信小程序,才发现微信也要求用HTTPS加密数据,想来是由于之前苹果的ATS审核政策的缘故吧,微信想在苹果上开放小程序必然也只能要求开发者必须使用HTTPS了,于是在服务器上测试安装Ngi ...
- mpvue 开发微信小程序搭建项目
首先 mpvue 是一款基于vue的框架,mpvue 修改了 Vue.js 的 runtime 和 compile 实现,可以运行在小程序的环境中. 第一步:安装 vue-cli vue-cli是vu ...
- 微信小程序搭建和开发相关指引
几点: 1.环境搭建 2.开发和调试 3.发布 原文链接: http://www.lookdaima.com/WebForms/WebPages/Blanks/Pm/Docs/DocItemDetai ...
- 微信小程序错误——mpvue小程序:未找到 app.json 中的定义的 pages "pages/XXX/XXX" 对应的 WXML 文件
背景 在刚开始学习开发小程序时,使用微信开发工具在app.json建立页面,写好配置文件名称后,应该会自动生成页面的4个文件,结果没有生成文件,反而报错:mpvue小程序:未找到 app.json 中 ...
- 微信小程序(mpvue) wx.openSetting 无法调起设置页面
在开发过程有个需要保存图片/视频到设备相册的业务,so easy~ 巴啦啦撸下来了完整功能, wx.saveVideoToPhotosAlbum 会自动调起用户授权,美滋滋~~ btu.... ...
- 【微信小程序】mpvue中页面之间传值(全网唯一真正可行的方法,中指推了一下隐形眼镜)
摘要: mpvue中页面之间传值(注意:是页面之间,不是组件之间) 场景:A页面跳转B页面,在B页面选择商品,将商品名带回A页面并显示 使用api: getCurrentPages step1: A页 ...
随机推荐
- 长沙理工大学第十二届ACM大赛-重现赛 大家一起来数二叉树吧 (组合计数)
大意: 求n结点m叶子二叉树个数. 直接暴力, $dp[i][j][k][l]$表示第$i$层共$j$节点, 共$k$叶子, 第$i$层有$l$个叶子的方案数, 然后暴力枚举第$i$层出度为1和出度为 ...
- Java EE javax.servlet.http中的HttpRequest抽象类
HttpRequest抽象类 public abstract class HttpServlet extends GenericServlet 实现的接口有:Serializable, Servlet ...
- lua的数据类型
Lua 是动态(弱)类型的语言,它有一下几种数据结构: nil(空) nil 类型表示一种没有任何有效值,它只有一个值 -- nil,例如打印一个没有赋值的变量,便会输出一个 nil 值: print ...
- vue.js对列表进行编辑未保存随时变更
1.不要建立在同一vm对象下 2.使用深拷贝$.extend(true, vm.model, obj); 3.开新标签页
- Pytorch中nn.Conv2d的用法
Pytorch中nn.Conv2d的用法 nn.Conv2d是二维卷积方法,相对应的还有一维卷积方法nn.Conv1d,常用于文本数据的处理,而nn.Conv2d一般用于二维图像. 先看一下接口定义: ...
- 小程序API接口调用
1.在config.js中写入api接口及appkey 2.在HTTP.js中引入config.js,然后新建HTTP.js,在里进行wx.request的封装. 定义一个HTTP的类,来类里定义 ...
- windows下修改vagrant虚拟机中的html ,通过nginx访问后不生效
更改本地html文件,通过nginx配置的虚拟域名访问, 无论怎么修改内容,都不变化,即使我把内容删除一半,它显示的也是以前内容的一半,除非删除文件,才会从新生成. 解决办法 修改nginx.conf ...
- Scrapy框架之高级 转
一.CrawlSpider模板 创建项目 scrapy startproject 项目名称 查看模板 scrapy genspider -l 创建crawl模板 scrapy genspider -t ...
- jsonp的原理介绍及Promise封装
什么叫jsonp? jsonp是json with padding(填充式json或参数式json)的简写,是通过ajax请求跨域接口,获取数据的新实现方式 jsonp的实现原理: 动态创建scrip ...
- Oracle【增删改&数据的备份】
增删改的SQL语句执行完毕后,不会立马进行数据的写入数据库(这时数据在内存中),需要手动对数据进行提交(commit),如果数据出问题,可以使用回滚.主键:非空唯一的 --在一张表中,某字段值是非空唯 ...