三分钟快速入门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
结尾~
逆风的方向,确实更适合飞翔。下次见~
三分钟快速入门mpvue相关推荐
- 深入理解 Redis Template及4种序列化方式__spring boot整合redis实现RedisTemplate三分钟快速入门
概述 使用Spring 提供的 Spring Data Redis 操作redis 必然要使用Spring提供的模板类 RedisTemplate, 今天我们好好的看看这个模板类 . RedisTem ...
- 【NodeJS笔记】三分钟快速入门NodeJS
官网:https://www.runoob.com/nodejs/nodejs-tutorial.html 初始NodeJS 简单的说 Node.js 就是运行在服务端的 JavaScript. No ...
- redistemplate set方法_spring boot整合redis ---- RedisTemplate 三分钟快速入门
引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spri ...
- python新手教程 从零开始-Python零基础从零开始学习Python十分钟快速入门
原标题:Python零基础从零开始学习Python十分钟快速入门 学习Python的,都知道Python 是一个高层次的结合了解释性.编译性.互动性和面向对象的脚本语言.Python是一种动态解释型的 ...
- Dart语言——45分钟快速入门(下)
类和对象 类的定义 // Dart中定义一个类 class Person {String name;int age;Person(String name, int age) {this.name = ...
- Vue-60分钟快速入门篇-下篇
概述 上一篇我们重点介绍了组件的创建.注册和使用,熟练这几个步骤将有助于深入组件的开发.另外,在子组件中定义props,可以让父组件的数据传递下来,这就好比子组件告诉父组件:"嘿,老哥,我开 ...
- Dart语言——45分钟快速入门(上)
文章目录 前言 视频课程 环境准备 安装Dart SDK 配置环境变量 配置 VSCode 编辑器 测试环境 基础语法 代码注释 内置数据类型 变量与常量 定义变量 定义常量 内置类型的常用操作 数值 ...
- thinkcmf搭建教程_5分钟快速入门
# 5分钟快速入门 [TOC=1,5] ## 1.创建模板目录 在`public/themes/`目录下创建`quick_start`目录 ## 2.添加模板描述文件 在`public/themes/ ...
- 不会几个框架,都不好意思说搞过前端: Vue.js - 60分钟快速入门
Vue.js--60分钟快速入门 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的 ...
最新文章
- Python使用matplotlib可视化分布点图、自定义设置分布点图的中位数数据点的颜色(Distributed Dot Plot)
- Linux / CentOs 7搭建DHCP服务
- nginx反向代理、负载均衡、动态请求
- 小而美的个人博客——前端——types and archives
- Excel 2007 Open XML文件结构(2)
- excel添加列下拉框票价_excel表格下拉表格添加数据-excel2017表格中怎么制作下拉菜单列表框...
- 《机器学习》周志华 习题答案9.4
- c 关闭html,运行node Server.js后如何关闭?
- 《Java语言程序设计与数据结构》编程练习答案(第十九章)(一)
- 电商业务设计:社交电商产品核心设计
- java pos58打印_POS58小票打印机
- delphi打印pdf文件_在Delphi应用程序中使用Adobe Acrobat(PDF)文件
- 串口仪器控制(下篇)——利用虚拟串口模拟仪器
- 如何查找qq邮箱的服务器地址
- 怎么在csdn中找到自己发布的帖子
- react native 渐变 BVLinearGradient报错不存在
- MySQL高可用架构MHA
- Unity3d任务模型自动寻路(人员疏散)
- 博士读一半,导师跳槽了!博士生把亲身经历发在了Science上
- Qtcreator远程调试arm开发板程序指南
热门文章
- 魔众企业VI系统 v3.3.0 常规优化升级 系统更稳定
- python覆盖数据库重复数据_Python操作MySQL数据库,插入重复数据
- Git 删除 GitHub仓库的文件——详细操作
- 六级考前必看单词总结(5)
- Python实用案例,python10行脚本打造实时截图识别OCR,轻松搞定“百度文库”
- 浏览器提示代理服务器拒绝连接怎么处理
- 圆周率for python
- 因爱而诞生,又因何而存在?
- 挖掘肖特基二极管与快恢复二极管两者之间到底有何区别?
- django-simple-captcha验证码的使用