如何使用kbone解决Vue项目同时支持小程序问题 - 行业资讯

　　介绍

这篇文章主要为大家展示了“如何使用kbone解决Vue项目同时支持小程序问题”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“如何使用kbone解决Vue项目同时支持小程序问题”这篇文章吧。

<强>什么是kbone

微信小程序开发过程中,许多开发者会遇到小程序与Web端一起的需求,由于小程序与Web端的运行环境不同,开发者往往需要维护两套类似的代码,这对开发者来说比较耗费力气,并且会出现不同步的情况。

为了解决上述问题,微信小程序推出了同构解决方案<代码> kbone>

那么,<代码> kbone> todo>

<>强基本结构

首先,我们来看下一个基本的kbone项目的目录结构(这里的<代码> todo> Vue> kbone> ,<代码>超前,<代码> Omi>

因为kbone是为了解决小程序与Web端的问题,所以每个目录下的配置都会有两份(小程序与Web端各一份)

<强>入口

不管是小程序端还是网页端,都需要入口文件。在<代码> src/指数目录下,<代码>主要。js代码为Web端用主入口,<代码> main.mp。js代码则为小程序端用主入口。

当然,Web端会比小程序多一个入口页面,即<代码>索引。>

下面两段代码分别是小程序端入口与Web端入口的代码,可以看到小程序端的入口代码封装在<代码> createApp 函数里面(这里固定即可),内部会比Web端多一个创建<代码>软件> //,小程序端入口　　import Vue 得到& # 39;vue # 39; 　　import todo 得到& # 39;。/todo.vue& # 39; 　　　　export default function createApp (), { 　　,//创建应用节点用于绑定　　,const container =, document.createElement (& # 39; div # 39;)=,container.id & # 39;应用# 39; 　　,document.body.appendChild(容器) 　　　　Vue ({, return new 　　,el: & # 39; #应用# 39; 　　,呈现:h =祝辞,h (todo) 　　,}) 　　}//,web端入口　　import Vue 得到& # 39;vue # 39; 　　import todo 得到& # 39;。/todo.vue& # 39; 　　　　Vue ({new 　　,el: & # 39; #应用# 39; 　　,呈现:h =祝辞,h (todo) 　　})

待办事项。vue

在上面的入口图可以看的到,源码目录中,除了入口文件分开之前,页面文件就是共用的了,这里直接使用vue的写法即可,不用做特殊的适应。

<强>配置

写完代码之后,我们要怎么跑项目呢?这时,配置就派上用场啦。

Web端配置为正常的vue配置,小程序端配置与Web端配置的唯一不同就是需要引入<代码> mp-webpack-plugin>