使用mpvue快速构建一个小程序

之前开发前端项目基本用Vue.js比较多，算是对这个框架比较喜欢。一直就打算用mpvue写一款小程序，现在终于开始行动了。

初始化项目

开发环境依赖于node,如果没有的话请先安装。（下载地址 https://nodejs.org/en/download/）

# 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 codehui
# 5. 安装依赖，走你
$ cd codehui
$ npm install
# 6. 构建项目
$ npm run dev

如果显示这样就代表成功了。运行完发现项目了多了个dist目录，这个就是经过编译的小程序代码。

目录结构

codehui  #项目目录
├── package.json #mpvue项目配置文件
├── project.config.json  #小程序项目配置文件
├── static            #存放静态资源
├── dist              #存放小程序代码的目录
|    ├── wx           #小程序的代码 部署时候用
├── src               #开发目录
│    ├── components   #vue组件目录
│    ├── pages        #小程序页面目录
│    ├── utils        #公共方法存放
│    ├── App.vue      #入口文件
│    └── main.js      #入口文件
├── config    #配置目录 
│   ├── index.js     #定义开发环境和生产环境中所需要的参数
│   ├── dev.env.js   #开发环境配置
│   └── prod.env.js  #生产环境配置
└── build   #node和webpack相关文件 无需修改