详解mpvue开发小程序.话不多说,直接进入正题!
首先当然是创建一个mpvue项目,需要执行以下命令
vue init mpvue/mpvue-quickstart 项目名
我这里用的是windows自带的PowerShell,按住Shift键同时点击鼠标右键
直接执行上面的命令开始创建项目
可以选择后续再安装,这里可以直接回车
项目创建好后会有提示按照给出的命令执行进入项目
开发工具用的是vscode,所以运行项目直接用的vscode的终端,项目运行后在微信开发者工具中导入刚刚创建好的项目,运行起来效果
,显然,这不是我们要的效果,所以接下来就要对项目进行改造,删除里面不需要的文件以及组件
组件里面的文件都可以删掉,后期根据自己的需要创建,pages里面的文件夹删掉,改成自己想要的文件夹,我这里新建了四个页面,
每个页面的基本配置
app.json里面就是存放的页面路径以及tab栏的相关配置
项目改动之后会有一个报错,直接打开项目找到里面的dist文件夹里面的wx,直接删掉再npm run dev运行项目即可
注意 : 对app.json改动之后要新建不少于两个页面并且在里面配置好页面路径以及tab栏配置,tab栏的必要需求就是不能少于两个,否则可能会有以下报错,这里官方文档也给出了说明
developers.weixin.qq.com/miniprogram…
到这里基本的项目就已经完成,当然要一个完整的项目还需要很多注意的地方,特别是用mpvue开发小程序.
真正开发项目时,可能在mpvue里面无法实现而自己又不想浪费太多时间时,可以考虑使用 Vant Weapp ,相当于vue中的vant组件库
我这里因为公司项目一个人负责,为了更快的完成任务,有些组价能不写就不写啦,直接引入vant写好的,当然有利有弊,根据个人情况来,需要就引入,不需要就还是自己写吧,毕竟也是成长的过程,下面介绍一下在mpvue中使用vant的步骤,希望可以对你们有帮助.
首先应该在github中下载好vant的文件,安装步骤可以自行看看[github.com/youzan/vant…]
点进去可以选择直接将项目clone到本地,clone成功后将dist目录中的所有文件复制到自己项目中
我这里是在static文件夹中建了vant文件夹,然后将复制的文件夹粘贴到此文件夹中,这里可以根据自己的需求需要用到哪些组件就只复制对应的文件即可,所有的都复制过来可能项目会变得很大,当然有些文件之间可能会有相互依赖的关系,所以使用的时候还是要看清楚官方文档
注意:在微信开发者工具中做一些勾选
在自己项目中做一些配置,在页面的单独配置项中,我这里是main.js文件中加入下面的代码
"component": true,
此项是必须的,之前也是查了好多资料,运行一直报错
接着引入需要使用的插件就可以了,我这里是用到了vant的toast轻提示,就只引入了toast组件,其他 组件也是类似,有些需要做额外的配置,可仔细阅读文档
详细可以多看看官方文档,[youzan.github.io/vant-weapp/…]
关于更多技术下次会继续更新
