mpvue入门教程梳理

简介

名称由来：mpvue：Vue.js in mini program

mpvue 是一个使用 Vue.js 开发小程序的前端框架。基于 vue.js 的核心，修改了 runtime 和 compiler 实现，使其可以 运行在小程序环境中，从而为小程序开发引入了整套 vue.js 开发体验。

• 美团工程师推出的基于Vue.js封装的用于开发小程序的框架
• 融合了原生小程序和Vue.js的特点
• 可完全组件化开发

特点

1. 组件化开发
2. 完整的Vue.js开发体验(前提是熟悉Vue)
3. 可使用Vuex管理状态
4. Webpack构建项目
5. 支持使用 npm 外部依赖
6. 使用 Vue.js 命令行工具 vue-cli 快速初始化项目
7. 最终H5转换工具将项目编译成小程序识别的文件

初始化项目

1. npm install vue-cli -g   下载vue脚手架
2. vue init mpvue/mpvue-quickstart my-project  初始化项目
3. cd my-project  进入项目根目录
4. npm install  根据package.json安装项目依赖包
5. npm start || npm run dev  启动初始化项目

开启项目

注册小程序

1. src/app.json 全局配置文件

2. src/App.vue 等同于原生小程序中的app.js, 可再次写小程序应用实例的声明周期 函数 || 全局样式(style中编写)

3. main.js应用入口文件, 声明组件类型，挂载组件

入口文件介绍

main.js

import Vue from 'vue'
import App from './App.vue'
// Vue.config.productionTip = false 默认为false，用于启动项目的时候提示信息，设置为false关闭提示
Vue.config.productionTip = true
// 这个值是为了与后面要讲的小程序页面组件所区分开来，因为小程序页面组件和这个App.vue组件的写法和引入方式是一致的，为了区分两者，需要设置mpType值
App.mpType = 'app'
// 生成Vue实例
const app = new Vue(App)
// 挂载组件
app.$mount()

编写页面 pages

文件目录

1. index.vue 等同于原生中的wxml + wxss + js

2. main.js 当前组件页面的入口文件，用于生成当前组件实例，并挂载组件

3. main.json 当前页面的局部配置文件(注意：index.vue组件最终会被转化为main.wxml以及main.wxss文件, 所以当前的json文件需命名main)

4. src源文件

   

5. 自动打包后的dist文件

index/index.vue

采用 vue.js 的写法

<template>
  <div class="indexContainer">
    <img v-show="isShow" :src="userInfo.avatarUrl" alt="">
    <button open-type="getUserInfo" @getuserinfo="handleGetUserInfo" class="btn" v-show="!isShow">获取用户信息</button>
    <p>hello {
   {
   userInfo.nickName}}</p>
    <button @tap="toDetail"