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

本文章主要用于接触一段时间的微信小程序的开发者或者开发团队,当然,今天主要给大家分享一下,近期研究的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文件说明:

这个是首页哦

export default {

data () {

return {

motto: 'Hello World',

userInfo: {}

}

},

methods: {

},

created () {

}

]

}

}

.mainbox{

display: flex;

flex-direction: column;

}

.content{

background: #fda99f;

display: flex;

flex-direction: column;

align-items: center;

}

基本测试页面就己经制作完成了哦,然后,再进行wxapp中的进行cmd命令:npm run dev哦

总结:本期属于入门级别的教程,如果有不太清楚的地方可以私聊我,近期一直在研究mpvue,下期我会更新mpvue踩坑日记,当然还有一些官方明确指出的问题,我就不一一列举,下期我会整理一份常见BUG给大家,本期文章分享至此,有志同道合的朋友,可以进行私聊哦!!