三分钟快速入门mpvue

初始mpvue

mp：mini program 的缩写
mpvue：Vue.js in mini program

一个使用 Vue.js 开发小程序的前端框架。

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

主要特性

彻底的组件化开发能力：提高代码复用性
完整的 Vue.js 开发体验
方便的 Vuex 数据管理方案：方便构建复杂应用
快捷的 webpack 构建机制：自定义构建策略、开发阶段 hotReload
支持使用 npm 外部依赖
使用 Vue.js 命令行工具 vue-cli 快速初始化项目
H5 代码转换编译成小程序目标代码的能力

完整的技术体系

mpvue-loader 提供 webpack 版本的加载器
mpvue-webpack-target webpack 构建目标
postcss-mpvue-wxss 样式代码转换预处理工具
px2rpx-loader 样式转化插件
mpvue-lint 开发辅助插件，包括语法检查，内存检查等功能
qa
其它

在这里插入图片描述

快速构建

# 全局安装 vue-cli
$ npm install --global vue-cli

# 创建一个基于 mpvue-quickstart 模板的新项目
$ vue init mpvue/mpvue-quickstart my-project

# 进入项目
$ cd my-project
# 安装依赖
$ npm install
# 启动项目
$ npm run dev

启动项目后，终端会显示如下提示：
在这里插入图片描述

此时我们需要打开微信开发者工具，导入我们的项目就可以看到项目运行的效果啦~

项目核心：建构流程

项目目录

在这里插入图片描述

package.json:项目的主配置文件（含项目基本信息、可执行的脚本信息、项目所依赖的各种第三方库和版本）

在这里插入图片描述

管理微信开发者工具的小程序项目的配置文件

在微信开发者工具中导入小程序项目的时候主要是通过该配置文件读取和写入配置信息
在这里插入图片描述

static：于存放各种小程序本地静态资源（图片、文本文件）

可通过相对路径或绝对路径进行访问
在这里插入图片描述

src：主要进行小程序功能编写

在这里插入图片描述

项目Demo实战

html绑定class / js绑定class
html绑定style / js绑定style

<div :class="[isActive ? 'htmlActive' : '', 'errorClass']"> html绑定class </div>
<div :class="computedClassObject"> js绑定class </div>

<div :style="{ color : isActive ? 'green' : '' }"> html绑定style </div>
<div :style="computedStyleObject"> js绑定style </div>

data () {
    
    
  return {
    
    
    isActive: true
  }
},
computed: {
    
    
  computedClassObject() {
    
    
    return [ this.isActive ? 'jsActive' : '', 'errorClass' ]
  },
  computedStyleObject() {
    
    
    return {
    
     color : this.isActive ? 'yellow' : '' }
  }
}

.htmlActive {
    
    
  color:crimson
}
.jsActive {
    
    
  color: orange
}
.errorClass {
    
    
  font-weight: 700;
  font-size: 30px;
}

微信小程序显示效果：
在这里插入图片描述

注意事项

1.新增页面，要重启项目，即重新执行npm run dev
2.在 input 和 textarea 中 change 事件会被转为 blur 事件
3.在所有页面的组件内可以通过 this.$mp.query 获取小程序在跳转页面传递的 options
4.静态文件放在static文件夹下面是不会被打包压缩的
5.通过 js在组件的 data 选项中声明初始值

参考

http://mpvue.com/
https://www.wenjiangs.com/doc/aohhrjmg
https://blog.csdn.net/qq_44979541/article/details/107423776

结尾~

逆风的方向，确实更适合飞翔。下次见~
在这里插入图片描述