使用mpvue搭建一个初始小程序

1. 初始化一个 mpvue 项目

现代前端开发框架和环境都是须要 Node.js 的，若是没有的话，请先下载 nodejs 并安装。

而后打开命令行工具：

# 1. 先检查下 Node.js 是否安装成功 $ node -v v8.9.0 $ npm -v 5.6.0 # 2. 因为众所周知的缘由，能够考虑切换源为 taobao 源 $ npm set registry https://registry.npm.taobao.org/ # 3. 全局安装 vue-cli # 通常是要 sudo 权限的 $ npm install --global vue-cli@2.9 # 4. 建立一个基于 mpvue-quickstart 模板的新项目 # 新手一路回车选择默认就能够了 $ vue init mpvue/mpvue-quickstart my-project # 5. 安装依赖，走你 $ cd my-project $ npm install $ npm run dev 

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

2. 搭建小程序的开发环境

小程序本身有一个专门的微信开发者工具，最新版本下载地址。

这一步比较简单，按照提示一步步安装好就行，而后用微信扫描二维码登录。 至此小程序的开发环境差很少完成。

3. 调试开发 mpvue

选择 小程序项目 并依次填好须要的信息：

• 项目目录：就是刚刚建立的项目目录（非 dist 目录）
• AppID：没有的话能够点选体验“小程序”，只影响是否能够真机调试。
• 项目名称。

如图：

点击“肯定”按钮后会跳到正式的开发页面，点击“编辑器”按钮，关闭自带的小程序编辑器。而后如图：

此时，整个 mpvue 项目已经跑起来了。

用本身趁手的编辑器（或者IDE）打开 my-project 中的 src 目录下的代码试试。

 

原文：http://mpvue.com/mpvue/quickstart/