新建一个mpvue小程序

1.初始化一个 mpvue 项目

在终端输入以下命令

//创建一个基于 mpvue-quickstart 模板的新项目
vue init mpvue/mpvue-quickstart my-project
//进入my-project项目
cd my-project
//安装依赖
npm install
//运行小程序
npm run dev

2.运行并调试开发 mpvue

需安装微信微信开发者工具，才能看到小程序的运行界面。
选择 小程序项目并依次填好需要的信息：
项目目录：就是刚刚创建的项目目录（非 dist 目录）
AppID：没有的话可以点选体验“小程序”，只影响是否可以真机调试。
项目名称。

3.程序入口

学习过使用小程序原生框架开发的朋友都知道，一个小程序的入口应该包含这三个最重要的部分：
1）app.json
2）app.js
3）首页
有了这三个部分，才能成功运行起一个最简单的小程序。

app.json

app.json是小程序的全局配置文件，其包含了小程序的页面文件路径配置、窗口的全局样式信息、底部选项卡式菜单栏的配置，以及一些小程序网络超时的配置等等。在mpvue中我们应如下配置：

{
  "pages": [
    "pages/home/main",
    "pages/list/main",
    "pages/user/main"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "我的第一个小程序",
    "navigationBarTextStyle": "black",
    "disableScroll": true
  },
  "tabBar": {
    "selectedColor": "#1296db",
    "color": "#000",
    "list": [
      {
        "pagePath": "pages/home/main",
        "text": "首页",
        "iconPath": "static/img/home.png",
        "selectedIconPath": "static/img/home-select.png"
      },
      {
        "pagePath": "pages/list/main",
        "text": "列表",
        "iconPath": "static/img/list.png",
        "selectedIconPath": "static/img/my-select.png"
      },
      {
        "pagePath": "pages/user/main",
        "text": "我的",
        "iconPath": "static/img/my.png",
        "selectedIconPath": "static/img/my-select.png"
      }
    ]
  }
}

app.js

app.js中包含了小程序的各种原生生命周期方法，如onLaunch、onShow等等。而在mpvue中，它使用了一个简单的Vue组件App.vue来实现等价的功能。我们在这个App.vue组件中可以编写小程序的生命周期方法（通常使用Vue的生命周期方法，但也兼容原生的生命周期方法），也可以在其中加入小程序的全局样式（等价于原生方式下的app.wxss）：

接着，这个App.vue组件被src/main.js引入并被设置了一个mpType的属性值，其值为app。这个值是为了与后面要讲的小程序页面组件所区分开来，因为小程序页面组件和这个App.vue组件的写法和引入方式是一致的，为了区分两者，需要设置mpType值。引入这个App.vue组件后，会用它作为参数来创建一个Vue的实例，并调用$mount()方法加载。下面是这个过程的关键代码行：

App.mpType = 'app'
const app = new Vue(App)
app.$mount()

首页、以及其他页面
每个小程序都需要至少有一个页面，第一个展示的页面被叫做首页。因为前面已经把所有的页面代码都删完了，所以我们现在要新建一个首页。在src/pages目录下，我们新建一个名为index的子目录（请遵循每个页面放入一个子目录的良好习惯），然后在该子目录下，新建2个文件：一个用于实现页面主体功能的index.vue组件，另一个则用于将这个页面组件生成Vue实例并加载的main.js。以后的每一个mpvue页面组件都会拥有这样的结构。

image.png

然后在main.js中编写如下代码，非常简单的一段代码，它的功能是引入index.vue并创建Vue实例：

import Vue from 'vue'
import App from './index'

const app = new Vue(App)
app.$mount()

接着，我们需要实现index.vue页面组件，它的写法是最典型的Vue组件写法。