快速初始化一个mpvue 项目原创
honey缘木鱼
6人赞赏了该文章
705次浏览
编辑于2019年02月27日 15:05:05
mpvue 是一个使用 Vue.js 开发小程序的前端框架。框架基于 Vue.js 核心，mpvue 修改了 Vue.js的 runtime 和 compiler 实现，使其可以运行在小程序环境中，从而为小程序开发引入了整套 Vue.js 开发体验。
mpvue特性：
一. 开发环境
检查下 Node.js 是否安装
node -v
已安装
2.检查npm是否安装
npm -v
已安装
切换源为 taobao 源
npm set registry https://registry.npm.taobao.org/
4.全局安装 vue-cli
npm install --global vue-cli@2.9
二. 创建mpvue项目
1.项目路径
cd '你想保存的路径'//cd /Users/zj/Desktop/新建mpvue项目(以桌面为例)
创建一个基于 mpvue-quickstart 模板的新项目
vue init mpvue/mpvue-quickstart my-project
如图所示：
三. 安装项目依赖
cd my-project npm install npm run dev
执行cd my-project 进入项目
执行npm install命令后,项目文件中多了node_moudules文件夹
3.npm run dev执行完成后，本地多了个 dist 目录，这个目录里就是生成的小程序相关代码。
四. 运行项目
1.用微信开发者工具打开
2.编译后效果图
注：
在npm install --global vue-cli@2.9时如果报错如下图所示：
解决方案：
1. cd /usr/local/lib/node_modules/ 2. open /usr/local/lib/node_modules/ 3. 删除vue-cli文件夹 4. npm install --global vue-cli@2.9
2. 在输入项目名称时报错
解决方案：
项目名称字符要小写，不能大写
3.假如 node.js 没有安装
1. 到[node官网](https://nodejs.org/en/download/) 选择跟自己的电脑匹配的版本进行下载，然后一步步的安装即可。 2. 检查下 Node.js 是否安装 node -v
本篇独发金蝶云社区
推荐阅读