基于mpvue的小程序项目搭建的步骤

mpvue 是美团开源的一套语法与vue.js一致的、快速开发小程序的前端框架，按官网说能够达到小程序与H5界面使用一套代码。使用此框架，开发者将获得完整的 Vue.js 开发体验，同时为 H5 和小程序提供了代码复用的能力。若是想将 H5 项目改造为小程序，或开发小程序后但愿将其转换为 H5，mpvue 将是十分契合的一种解决方案。

Mpvue官网：http://mpvue.com/
demo地址 ：https://github.com/ccwyn/mpvuedemo/tree/master/my-project

使用Vue开发微信小程序：mpvue框架。端开发框架和环境都是须要 Node.js ，先安装node.js开发环境，下载https://nodejs.org/en/，安装完成以后，打开cmd开始输入命令。（我用的是win10系统，因此须要管理员权限，右键点击以管理员身份运行cmd），否则会出现不少报错。

步骤1. 检查下 Node.js 是否安装成功

$ node -v $ node -v

个人node是安装在d盘，因此先切入进D盘，在执行node -v命令，结果以下，出现版本号则表示安装成功。

图片.png

步骤2：检查npm版本

$ npm -v $ npm -v

步骤3： 安装淘宝镜像

$ npm set registry https://registry.npm.taobao.org/ $ npm set registry https://registry.npm.taobao.org/

因为npm是国外的，使用起来比较慢，咱们这里使用淘宝的cnpm镜像来安装vue.

步骤4： 全局安装 vue-cli

$ npm install --global vue-cli $ npm install --global vue-cli

通常是要 sudo 权限的(打开cmd时要以管理员的身份，否则就会报错

注意：不少人在这一步安装报错了，缘由是要权限哦

例如：
网上的解决方案用经过快捷键win+ r打开cmd，这样木有用，会被误导，在win8或者win10下，win+R不是以管理员身份来运行的。在开始菜单中选择command以管理员身份运行便可。

打开管理员运行以后，全局安装成功提示以下：

步骤5：建立一个基于 mpvue-quickstart 模板的新项目

$ vue init mpvue/mpvue-quickstart my-project $ vue init mpvue/mpvue-quickstart my-project

至于项目名称，做者，使用何种框架等提问信息，新手一路回车选择默认便可。

打开d盘，查看建立生成的目录my-project

步骤6：安装my-project项目所须要的依赖

$ cd my-project $ npm install $ npm run dev $ cd my-project $ npm install $ npm run dev

1：执行cd my-project命令，进入项目

2：执行npm install命令以后，本地多了一个node_moudules文件夹

3：执行npm run dev，运行成功

随着运行成功的回显以后，能够看到本地多了个 dist 目录，这个目录里就是生成的小程序相关代码。

以上，Vue开发环境已经搭建好，接下来打开微信开发者工具，，调试开发咱们的框架 mpvue，依次填写须要的信息，微信开发者工具环境搭建详见教程：https://www.jianshu.com/p/0ff8c3b2f59f

填写以后跳转到编辑工具页面，mpvue框架项目已经跑起来了，完美，get到技能了吗？投入开发便可

官方五分钟快速上手教程：http://mpvue.com/mpvue/quickstart/

注：

原文做者：祈澈姑娘技术博客：https://www.jianshu.com/u/05f416aefbe1
90后前端妹子，爱编程，爱运营，爱折腾。
坚持总结工做中遇到的技术问题，坚持记录工做中所所思所见，欢迎你们一块儿探讨交流。

关注「编程微刊」公众号 ，在微信后台回复「领取资源」，获取IT资源300G干货大全。

公众号回复“1”，拉你进程序员技术讨论群.