028-86261949

当前位置:首页 > 技术交流 > 微信小程序框架之mpvue(入门教程)

微信小程序框架之mpvue(入门教程)

2018/12/24 14:38 分类: 技术交流 浏览:74

本文章主要用于接触一段时间的微信小程序的开发者或者开发团队,当然,今天主要给大家分享一下,近期研究的mpvue,属于美团小程序框架,本期主要做基础的安装及配置说明,好了,我们首先还是简单了解一下mpvue.
 
Mpvue是一个使用vue.js开发程序的前端框架,框加基于Vue.js为核心,mpvue修改了vue.js的runtime和compiler实现,使用其可以运行在小程序环境中,从而为小程研修班开发引入了整套Vue.js开发体验.
 
主要特性:(来源于官方网站)
使用 mpvue 开发小程序,你将在小程序技术体系的基础上获取到这样一些能力:
1. 彻底的组件化开发能力:提高代码复用性
2. 完整的 Vue.js 开发体验
3. 方便的 Vuex 数据管理方案:方便构建复杂应用
4. 快捷的 webpack 构建机制:自定义构建策略、开发阶段 hotReload
5. 支持使用 npm 外部依赖
6. 使用 Vue.js 命令行工具 vue-cli 快速初始化项目
7. H5 代码转换编译成小程序目标代码的能力
 
回到正题,学习最好的方式,就是直接上手,现来实现一下,先配置一个小程序出来试,对熟悉vue开发的小伙伴,应该就不陌生了,对于有开发经验的,请自行安装试用,如果己经使用过vue可直接使用vue-cli创建项目,如果没有安装过的朋友,请先执行以下命令:
npm install --g vue-cli
安装vue-cli后,我们可以使用以下命令来创建一个项目,可以根据提示一步一步完成,(过程中会安装一些插件及小工作,如果看不懂的小伙伴直接选择n即可)
vue init mpvue/mpvue-quickstart wxapp
等待安装完成后,我们就可以进入项目了,安装相关依赖包,使用以下命令:
cd wxapp
npm i(或者yarn)
完成后,可以直接运行我们开发服务了!命令以下
npm run dev
注意:此时仅是项目进行了打包,项目就跑起来了,此时,我们打开微信开发者工具,选择小程序,然后新建一个,项目目录填
我们项目目录下的dist目录 wxapp/dist/wx,就可以看到效果了
 
到此为止,一个基本的项目就完成了
 
 

如何新建页面呢???

正确的打开方式:如下
 
1. 在src/pages/目录下新增.vue文件,每个一个.vue文件都需要加上一个main.js
2. src/pages.js文件新增页面路径
3. 支持热更新,无需重启
 
示例如下:
 
main.js文件说明:
mport Vue from 'vue'
import App from './index'

const app = new Vue(App)
app.$mount()
Index.vue文件说明:
<template>
<div class="mainbox" >
这个是首页哦
</div>
</template>

<script>

export default {
data () {
return {
motto: 'Hello World',
userInfo: {}
}
},
methods: {
},
created () {
}
]
}
}
</script>

<style scored>
.mainbox{
display: flex;
flex-direction: column;
}
.content{
background: #fda99f;
display: flex;
flex-direction: column;
align-items: center;
}
</style>
基本测试页面就己经制作完成了哦,然后,再进行wxapp中的进行cmd命令:npm run dev哦
 
总结:本期属于入门级别的教程,如果有不太清楚的地方可以私聊我,近期一直在研究mpvue,下期我会更新mpvue踩坑日记,当然还有一些官方明确指出的问题,我就不一一列举,下期我会整理一份常见BUG给大家,本期文章分享至此,有志同道合的朋友,可以进行私聊哦!!
 
#标签:小程序,H5,前端