微信小程序搭建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
最新文章
- 谈谈基于OAuth 2.0的第三方认证 [下篇]
- Java Native Interface 编程系列一
- 十分钟使用github pages +hexo拥有个人博客
- Asp.net 实现Session分布式储存(Redis,Mongodb,Mysql等) sessionState Custom
- [Effective JavaScript 笔记] 第14条:当心命名函数表达式笨拙的作用域
- MySql存储过程学习总结
- java-脚本-编译-注解
- T4模板语法
- Unable to execute dex: method ID not in [0, 0xffff]: 65536
- php 之 分页查询的使用方法及其类的封装
- getDeclaredConstructor()与getConstructor的差别
- 在Windows下用Eclipse+CDT+MinGW搭建C++开发平台
- MySQL 水平拆分(读书笔记整理)
- Java面试题中的Redis大合集,所有你想找的都在这里!
- 线程中的join方法
- 如何给Elasticsearch安装中文分词器IK
- Java如何设定二维数组的上限?
- appt查看应用包报名和入口页面
- python网络编程之线程
- 007-shiro与spring web项目整合【一】基础搭建
热门文章
- Hyperledger Fabric-sdk-java
- 另类--kafka集群中jmx端口设置
- 题解 POJ1964/UVA1330/SP277 【City Game】
- 百度 Ueditor 使用及规则
- JavaMaven【五、Maven集成Eclipse使用】
- 深入学习Mybatis框架(二)- 进阶
- 平时工作常用linux命令总结
- Delphi WriteFile函数
- 04.ZabbixWEB网站监控
- /build-impl.xml:1030: The module has not been deployed.(netbean javaweb)