微信小程序接入UI框架

作为一个微信小程序开发者半年，开发过几个小程序。但是页面总是不尽人意，所以现在接入UI框架（以mpvue为例）

1. 初始化一个 mpvue 项目

打开命令行工具：

1、 先检查下 Node.js 是否安装成功

$ node -v
v10.15.0

$ npm -v
6.4.1

2、由于众所周知的原因，可以考虑切换源为 taobao 源

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

3、 全局安装 vue-cli
一般是要 sudo 权限的

$ npm install --global [email protected]

4、创建一个基于 mpvue-quickstart 模板的新项目
新手一路回车选择默认就可以了

$ vue init mpvue/mpvue-quickstart my-project

5、安装依赖

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

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

2、调试开发 mpvue

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

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

确认->整个 mpvue 项目已经跑起来了(如下图)

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

到此，上手完毕