微信小程序-mpvue初始化项目
微信小程序开发-mpvue配置
mpvue是需要有vue.js基础的,它是基于Vue的微信小程序框架,如果没有学过的vue框架的,要先去学一下vue基础,去看vue的官方文档是最好的学习方法,附上链接:vue官网
下面是我初次学习mpvue的学习心得:
用Vue的方式来写小程序,支持发布多个平台的小程序, 目前不支持H5。
初始化一个mpvue项目
- 需要安装Node.js环境,如果还没有安装的,先下载安装Node.js
#先检查下 Node.js 是否安装成功,查看版本
$ node -v
v8.9.0
查看npm的版本
$ npm -v
5.6.0
2.设置淘宝镜像源
因为npm默认的源在某些国内主机(如阿里云)的某些时间段访问会非常的慢,使用国内的淘宝镜像源会比较快
#查看是否设置为淘宝源
npm config list
#没有的话要设置:
npm set registry https://registry.npm.taobao.org/
3.安装[email protected]版本,全局安装一个桥接工具
npm install -g @vue/cli-init
mpvue官网上的全局安装它会覆盖你之前的脚手架vue-cli的版本,而上面那个命令会兼容几个版本的脚手架
4.创建项目
vue init mpvue/mpvue-quickstart 项目名
新手的话,所有选项都选yes,按enter键就可以了, 除了vuex选择no
像这样就是创建项目成功啦
5.然后就运行提示中的指令运行项目
如果你用的是vscode开发工具的话,
执行:
code 项目名称
#就可以直接在vscode里面打开编辑了
6.调试开发mpvue
微信开发工具导入该项目,导入目录选择项目名
建议用vscode来写代码,用微信开发者工具来查看效果。
npm安装的问题
- npm set registry https://registry.npm.taobao.org/
- 以管理员的身份打开cmd,npm install
Mac里面 sudo npm install -g eslint - 有.stagingerror的,就运行npm cache clean --force
- 网络的问题
- 提示Yarn安装cli-init
不管装的是vue3.x或者vue4.x都需要桥接 - npm install动不了,直接ctrl+c结束安装。然后删除掉node_module再进行npm install
我是用VSCode开发的,比较好用,插件丰富
因为mpvue是基于vue开发的微信小程序框架,所以支持vue语法,但是也不是完全支持