解决方案

开源框架mpvue入门教程

作者:仙宝云 | 发布时间:2021-06-23 11:34:27 | 阅读:398

mpvue是什么?

mpvue 是一套定位于开发小程序的前端开发框架,其中心目标是提高开发效率,加强开发体验利用该框架,开发者只需开端了解小程序开发标准、熟悉 Vue.js 基本语法即可上手框架提供了完好的 Vue.js 开发体验,开发者编写 Vue.js 代码,mpvue 将其剖析转换为小程序并确保其正确运转此外,框架还经过 vue-cli 工具向开发者提供 quick start 示例代码,开发者只需实行一条简略下令,即可取得但是运转的项目

mpvue如何运用?

mpvue框架本身由大都个npm模块组成,进口模块已经处理好依赖关联,开发者只需要施行如下代码即可完成当地项目创立

实行终了上述下令,在当前项目的 dist 子目录将构建出小程序目标代码,利用小程序开发者工具载入 dist 目次即可启动本地调试和预览示例项目遵照 Vue.js 模板项目标准,经过Vue.js 命令行工具vue-cli创建代码组织形式与 Vue.js 官方实例保持一致,我们为小程序定制了 Vue.js runtime 和 webpack 加载重视,此局部依赖也已经内置到项目中

针对小程序开发中常见的两类代码复用场景,mpvue 框架为开发者提供了解决思绪和技能支持,开发者只需要在此指点下进行项目配置和改造我们内部实践了一个将 H5 转换为小程序的项目,下图为运用 mpvue 框架的转换效果:

将小程序转换为H5:直接运用 Vue.js 标准开发小程序,代码本身与H5并无不同,具体代码差别会面集中在平台 Api 局部此外并不需要明明改动,改造首要划分如下几局部:

  • 将小程序平台的 Vue.js 框架调换为规范 Vue.js
  • 将小程序平台的 vue-loader 加载器调换为规范 vue-loader
  • 适配和改造小程序与 H5 的底层 Api 差别

将H5转换为小程序:已经运用 Vue.js 开发竣工 H5,我们需要做的事情如下:

  • 将规范 Vue.js 调换为小程序平台的 Vue.js 框架
  • 将规范 vue-loader 加载器调换为小程序平台的 vue-loader
  • 适配和改造小程序与 H5 的底层 Api 差别

根据小程序开发平台提供的能力,我们最大水平的支持了 Vue.js 语法特征,但局部功用现阶段暂时尚未实现。

智慧商业服务商仙宝云欢迎您!

请加微信: 18962171986 (宋经理)

在线咨询