本文章主要用于接触一段时间的微信小程序的开发者或者开发团队,当然,今天主要给大家分享一下,近期研究的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给大家,本期文章分享至此,有志同道合的朋友,可以进行私聊哦!!
