快速上手小程序的mpvue框架
一.什么是mpvue框架?
mpvue 是一个使用 Vue.js 开发小程序的前端框架。框架基于 Vue.js 核心(所以建议熟练掌握vue再使用mpvue框架,否则还是建议去使用原生框架去写小程序),mpvue 修改了 Vue.js 的 runtime 和 compiler 实现,使其可以运行在小程序环境中,从而为小程序开发引入了整套 Vue.js 开发体验。
二.必要的开发基础
① 熟练掌握vue.js(未曾使用过vue这个框架的话,建议vue的官方文档进行学习:https://cn.vuejs.org/v2/guide/)
② 微信开发者工具(这个工具是开发、调试和模拟运行微信小程序的最核心的工具了,下载地址:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html)
③ Visual Studio Code(一个轻量级代码编辑器,拥有非常多好用的辅助开发插件,下载地址:https://code.visualstudio.com)
④ node.js(前端工具链现在基本都依赖Node.js,下载地址:https://nodejs.org/en/download/)
⑤ vue-cli (vue专用的项目脚手架工具,打开cmd,输入命令:npm install --global vue-cli)
三.初始化项目
1.打开cmd,快捷键win+R;
2.检查node.js是否安装成功,输入命令:
node -v
出现版本号即为成功;
3.检查vue-cli是否安装成功,输入命令:
vue -V
出现版本号即为成功;
4.然后我们执行以下命令,将npm的下载源切换到国内淘宝的镜像,以提高下载时的速度和成功率;
npm set registry https://registry.npm.taobao.org/
5.进入你想保存项目的文件夹(比如d盘,就先输入命令d:),创建一个基于 mpvue-quickstart 模板的新项目:
vue init mpvue/mpvue-quickstart wxvueshop
接着我们选择或填写项目的配置信息,不知道的你就回车(依次是,项目名称,小程序appid,项目介绍,作者,然后是否安装vuex等等,你想安装就写yes,否则no)
这个时候你就能看见d盘有一个wxvueshop的项目文件了。
6.不急,我们这时候进入这个文件夹,输入命令:
cd wxvueshop
7.然后,我们进行依赖库的安装,输入命令:
npm install
8.安装完成后,我们运行一下,输入命令:
npm run dev
随着运行成功的运行之后,可以看到本地wxvueshop多了个 dist
目录,这个目录里就是生成的小程序相关代码,这个时候我们就成功初始化项目了。跑起来了...
四.运行查看项目
打开微信web开发者工具,选择新增项目,打开我们刚刚创建的项目,如图:
点击“确定”按钮,进入小程序开发主界面,在左边的小程序模拟器中就能看到wxvueshop小程序的执行结果了:
五.编写代码
如上图,我们新创建的项目有生成默认页面,现在我们把它全部去掉,具体如下:
1.删掉src/components
、src/pages
、src/utils
三个目录下的所有代码文件;
2.将src/App.vue
文件中的内容重置成:
<script>
/* 这部分相当于原生小程序的 app.js */
export default {
created () {
console.log('miniapp created!!!')
}
}
</script> <style>
/* 这部分相当于原生小程序的 app.wxss */
.container {
background-color: #cccccc;
}
</style>
3.将src/main.js
文件中的内容重置成:
import Vue from 'vue'
import App from './App' Vue.config.productionTip = false
App.mpType = 'app' const app = new Vue(App)
app.$mount() export default {
config: {
pages: [
'^pages/login/main'
],
window: {
backgroundTextStyle: 'light',
navigationBarBackgroundColor: '#fff',
navigationBarTitleText: '我的小程序',
navigationBarTextStyle: 'black'
}
}
}
现在,我们的代码就成了一个小程序页面都没有的初始状态。
4.新建页面,以后的每一个mpvue页面组件都会拥有如下图片这样的结构。
页面写法如下:
login.vue:
<template>
<div class="container" @click="clickHandle">
<div class="message">{{msg}}</div>
</div>
</template> <script>
export default {
data () {
return {
msg: 'login'
}
}, methods: {
clickHandle () {
this.msg = 'yes!!!!!!'
}
}
}
</script> <style scoped>
.message {
color: red;
padding: 10px;
text-align: center;
}
</style>
main.js:
import Vue from 'vue'
import App from './login' const app = new Vue(App)
app.$mount() export default {
config: {
// 注意,页面级可配置属性相当于只是`src/main.js`中配置里的`window`部分
"navigationBarBackgroundColor": "#3dc1c7",
"navigationBarTitleText": "登录",
"navigationBarTextStyle": "white"
}
}
5.我们在src里面用vue写法创建页面的时候,小程序的页面会自动创建和代码转化,文件夹为dist,图片如下:
就这样我们已经初步了解mpvue框架了,之后有时间会写进阶版,上面内容如果有出错的地方,麻烦大佬们指正,谢谢!
快速上手小程序的mpvue框架的更多相关文章
- 使用Vue开发微信小程序:mpvue框架
使用Vue开发微信小程序:mpvue框架:https://www.jianshu.com/p/8f779950bfd9
- 小程序使用mpvue框架无缝接入Vant Weapp组件库
有美团开源出的mpvue以其vue的语法和良好的开发效率再搭配上用户体验良好的UI组件无疑是定制化微信小程序的开发方式,然而由于mpvue是对微信原生开发的再次封装,这也为我们引入UI组件添加了不少麻 ...
- 微信小程序(mpvue框架) 购物车
效果图: 说明:全选/全不选, 1.数据: products:[{checked:true,code:"4",echecked:false,hasPromotions:true,i ...
- 用Vue.js开发微信小程序:开源框架mpvue解析
前言 mpvue 是一款使用 Vue.js 开发微信小程序的前端框架.使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为 H5 和小程序提供了代码复用的能力.如果想将 H5 项目改造为小程 ...
- 小程序组件化框架 WePY 在性能调优上做出的探究
作者:龚澄 导语 性能调优是一个亘古不变的话题,无论是在传统H5上还是小程序中.因为实现机制不同,可能导致传统H5中的某些优化方式在小程序上并不适用.因此必须另开辟蹊径找出适合小程序的调估方式. 本文 ...
- EMAS Serverless系列~4步教你快速搭建小程序
体验简介 本实验基于 EMAS Serverless 的云函数.云数据库.云存储等云服务能力一站式快速开发小程序<私人云相册>.Demo 主要包括如下功能: 1 相册管理 2 上传相片 3 ...
- 微信小程序搭建mpvue+vant+flyio
导语 上一篇文章微信小程序搭建mpvue+vant已经介绍了如何搭起mpvue项目及引入vant,本篇文章继续在它的基础上,引入flyio,并做一些封装,目的是为了在小程序发起请求. 这时读者会有些疑 ...
- 微信小程序搭建mpvue+vant
第一步:查看是否已经装了node.js $ node -v $ npm -v 正确姿势 没有装的话前往Node.js官网安装 第二步:安装cnpm $ npm install -g cnpm -- ...
- 快速上手最棒的网格框架ag-Grid
由于对aggrid由衷的感谢, 又忍不住写了一篇软文来推广它(其实主要是为了弥补我把enterprise版扣下来后内心的愧疚...) ag-Grid是速度最快,功能最丰富的JavaScript dat ...
随机推荐
- SpringMVC 请求映射注解
@GetMapping: 处理get请求,传统的RequestMapping来编写应该是@RequestMapping(value = “/get/{id}”, method = RequestMet ...
- 第10组Alpha冲刺(3/4)
队名:凹凸曼 组长博客 作业博客 组员实践情况 童景霖 过去两天完成了哪些任务 文字/口头描述 继续学习Android studio和Java 制作登录注册界面前端 展示GitHub当日代码/文档签入 ...
- linux基础技巧
命令行颜色显示: \[\e]0;\u@\h: \w\a\]${debian_chroot:+($debian_chroot)}\[\033[01;32m\]\u@\h\[\033[00m\]:\[\0 ...
- phpstorm配置了git后Terminal 不能使用显示:git' 不是内部或外部命令,也不是可运行的程序
问题:在phpstorm上配置好git后,将代码拉了下来 ,但是命令行无法使用显示如图 解决方法:①找到安装git的位置,然后在该目录的子目录下分别找到git-core.bin 两个目录,我的安装在了 ...
- pytorch-VGG网络
VGG网络结构 第一层: 3x3x3x64, 步长为1, padding=1 第二层: 3x3x64x64, 步长为1, padding=1 第三层: 3x3x64x128, 步长为1, paddin ...
- 快速解决设置Android 23.0以上版本对SD卡的读写权限无效的问题
快速解决设置Android 23.0以上版本对SD卡的读写权限无效的问题 转 https://www.jb51.net/article/144939.htm 今天小编就为大家分享一篇快速解决设置And ...
- Oracle 中的进制转换
Oracle 中的进制转换 */--> Oracle 中的进制转换 Table of Contents 1. 进制名 2. 10进制与16进制互相转换 2.1. 10进制转换为16进制 2.2. ...
- ResourceUtils 创建资源目录工具类
package com.jcf.utilsdemo; import android.content.Context; import android.content.res.Resources; pub ...
- kafka整合springboot
1.pom.xml添加依赖 <dependency> <groupId>org.springframework.kafka</groupId> <artifa ...
- Python之滑动窗口
需求 对于一个数组array = ["n","v","l","f",...,"y","c& ...