首先介绍一下Mapvue ,Mpvue是一个使用 Vue.js 开发小程序的前端框架。框架基于 Vue.js 核心,修改了 Vue.js 的 runtime 和 compiler 实现,使其可以运行在小程序环境中,从而为小程序开发引入了整套 Vue.js 开发体验,同样也使得一套代码同时复用在小程序和 Web 中成为可能。
好不容易休息了一下,欠下的许久许久的电商项目接下回来有时间的话还是会逐步写下去的,可能时间 跨度会很漫长,不要急。
本文以一个基础框架为例子,简单介绍一下其中的转化过程和一些暂时接触到的注意事项,也会在在我这边的使用中逐步的进行完善。
相对于普通快速脚手架构建 mapVue 项目而言,想要完成两端的转化必定需要一套两端转化的 webpack配置,引入了 *[mpvue-packager] 打包工具 ,进行相应的打包配置,目前默认支持 map小程序 和h5页面两种打包。process.env.mode==='map' 和'h5'全局变量 相关其他变量可以进一步自行配置 。
好了,闲话不多说,我们接下来展示一段项目结构代码我
dist =>构建的文件
node_modules =>相关依赖包
src =>项目代码
static =>相关静态资源
package-lock.json => 依赖
package =>命令行
webpack.conf.js =>webpack配置
前期注意:尽量避免使用不必要的小程序特有标签,如 text,image 等
避免直接使用 wx 对象,使用import wx from 'wx'的方式引入,便于 web 中改写
使用flyio作为请求库,配置 alias 将 flyio 指向flyio/dist/npm/wx,原先我们用的axios小程序用不了!!!!用不了!!!