mpvue开发小程序记录

mpvue 是一个使用 Vue.js 开发小程序的框架。它借助 Vue.js 的开发思想和模块化思想，让开发者可以使用 Vue.js 的方式去开发小程序，在增强开发体验和提升开发效率的同时，还可以获得更好的代码管理、组件复用、测试和维护等等。

mpvue 的原理

mpvue 开发小程序的原理是将 Vue.js 的开发体验和编译机制与小程序的API进行了整合。mpvue 开发小程序的流程和 Vue.js 开发 Web 应用的流程非常相似，主要包括三个阶段：

1. 编写 .vue 文件

在 mpvue 中，我们使用和 Vue.js 类似的 .vue 单文件组件开发方式编写小程序组件。

一个 .vue 文件主要包含三个部分：

- template - 界面模板，也就是小程序的 WXML

- script - 组件逻辑，包括了小程序的生命周期、数据绑定等等

- style - 样式表，同样也支持 CSS 预处理器

2. 编译 .vue 文件

mpvue 允许我们使用 Vue.js 的模板语法和 vue-loader 进行模板编译，将 .vue 组件编译成 Vue.js 的渲染函数，然后将该函数转换成小程序所需的 WXML、WXSS 和 JS 文件。

mpvue 的编译过程主要依靠了两个工具：

- vue-loader：编译和加载 .vue 文件

- mpvue-loader：将编译完成的 Vue.js 组件文件转换成小程序所需的 WXML、WXSS 和 JS 文件

3. 编译后的文件上传到小程序平台

编译完成后，我们只需要将编译出来的小程序代码上传到小程序开发工具中进行预览和调试即可。

mpvue 的详细介绍

1. 安装

使用 mpvue 开发小程序需要先进行安装，在命令行使用 npm 安装 mpvue-cli 和 mpvue-template-compiler：

```

npm install --global mpvue-cli mpvue-template-compiler

```

2. 创建项目

通过 mpvue-cli 创建一个新项目，使用以下命令：

```

mpvue init

```

3. 目录结构

mpvue 创建的项目主要包含以下文件和文件夹：

- build - webpack 配置文件

- config - 项目配置文件

- dist - 编译后的小程序代码

- node_modules - 项目依赖

- src - 项目源代码

- static - 静态资源文件

- App.vue - 小程序主页面

- main.js - 入口文件

4. 组件开发

mpvue 组件的编写方式和 Vue.js 组件的编写方式非常相似。一个 mpvue 组件主要包含三个部分：模板、逻辑和样式。

模板

在模板中，我们可以使用 Vue.js 的模板语法编写小程序的 WXML 文件。比如，我们可以使用 v-if、v-for 和 v-bind 等指令来控制界面的显示和数据绑定。

```

```

逻辑

在逻辑中，我们可以使用 Vue.js 的生命周期和数据绑定来处理组件的数据和事件。例如，我们可以使用 data 函数来初始化组件的数据，使用 methods 和 computed 来处理组件的事件和计算属性。

```

```

样式

在样式中，我们可以使用 CSS 和 Sass 等样式预处理器对小程序的样式进行处理。

```

```

5. 组件注册

在 mpvue 中，我们需要使用 Vue.component() 来将一个组件注册到全局，或使用 components 属性将一个组件注册到父组件中。

```

```

6. 路由设置

mpvue 使用了小程序提供的路由功能来实现页面的跳转。因此，在 mpvue 中我们需要定义一个新的路由器，使用小程序的 API 跳转到不同的页面。

在 app.vue 中，我们可以定义要使用的路由器：

```

```

然后在 MyApp.vue 中，定义路由：

```

```

最后在 router 中，定义要使用的路由：

```

import Vue from 'vue'

import Router from 'vue-router'

import Hello from '@/components/Hello'

Vue.use(Router)

export default new Router({

routes: [

{

path: '/',

name: 'Hello',

component: Hello

}

]

})

```

7. 状态管理

在 mpvue 中，我们可以使用 vuex 来进行状态管理。

我们需要安装 vuex 并将其注册到 Vue 构造器中：

```

import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({

state: {},

mutations: {},

actions: {}

})

```

然后在模板中使用 $store 来访问状态管理器：

```

```

8. 小程序 API

在 mpvue 中，我们可以直接使用小程序提供的 API 来访问底层的小程序功能。

例如，我们可以使用 wx.showToast() 来弹出一个消息框，使用 wx.request() 来进行 HTTP 请求。

```

```