介绍
小编给大家分享一下小程序中帆布怎么实现图案在线定制的功能,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!
前言
最近收到一个这样的需求,要求做一个基于vue和element-ui的通用后台框架页,具体要求如下:
<李> 要求通用性高,需要在后期四十多个子项目中使用,所以大部分地方都做成可配置的。
<李> 要求做成脚手架的形式。可以npm安装
<李> 要求实现多页签,并且可以通过浏览器url回显多页签。而且页签内要维护一个历史记录,可以后退
<李> 组件要求异步加载,减少首屏加载时间。
很明显,这就是一个<代码>类ERP>
那接下来我们就来谈谈实现。
通用性高
这点其实没啥难点,无非就是麻烦了点,把所有的数据,都提取出来,放在一个<代码>配置文件里面。然后在框架页里面引入,并且绑定到相应的位置上去。这边有个比较难以取舍的问题,就是如果把一溜的数据全部绑定到vue的数据上面,由于数据量比较多,会导致性能问题,如果分开,又会使配置文件看起来相对复杂,增加后期使用人员的学习成本。这块要看具体的项目需求,由于我这边暂时对前端的性能要求没那么高,所以暂时用全部绑定到数据的方案
做成脚手架形式
起初产品对这个的需求使做成组件的形式,然后发布npm包,方便后期更新的时候,只需更新一下npm就可以了,无需每个项目去复制粘贴替换,但是基于这是一个框架页,而且可配置项非常多,还要实现选项卡多页签等多方面的考虑,最终选择了脚手架的方案,即便这样后期升级会稍微麻烦一点(起初的方案是框架页放在一个文件夹里,到时候直接替换该文件夹),但相对于组件来说,还是更好维护的,况且后期可以再写一个更新的脚手架,毕竟现在发布一个npm工具的成本实在是太低了。
第一次开发脚手架,看了很多社区的帖子,发现目前大部分脚手架,一般都基于2种形式,一种基于文件复制的形式,另一种基于git clone的形式,经过对比,我觉得文件复制的有点复杂了,我其实只是需要一个能一键安装的工具而已,所以git clone的形式还是比较适合我。
以下就是脚手架的代码,虽然只是简单的五六十行代码,不过查资料+趟坑,也花了我一个上午的时间。
# !/usr/bin/env节点
const shell=要求(& # 39;shelljs& # 39;);
const程序=要求(& # 39;指挥官# 39;);
const询问者=要求(& # 39;询问者# 39;);
const ora=要求(& # 39;奥拉# 39;);
const fs=要求(& # 39;fs # 39;);
const path=要求(& # 39;path & # 39;);
const转轮=奥拉();
const gitClone=要求(& # 39;git-clone& # 39;)
const粉笔=要求(& # 39;粉笔# 39;)
程序
.version (& # 39; 1.0.0 # 39;, & # 39; - v,——版本# 39;)
.parse (process.argv);
常量的问题=[{
类型:& # 39;输入# 39;
名称:& # 39;名字# 39;
信息:& # 39;请输入项目名称& # 39;,
默认值:& # 39;my-project& # 39;
验证:(名字)=祝辞{
如果(/^ [a - z] +/test(名字)){
返回true;
其他}{
返回& # 39;项目名称必须以小写字母开头& # 39;;
}
}
})
inquirer.prompt(问题)((dir)=祝辞{
downloadTemplate (dir.name);
}）
函数downloadTemplate (dir) {//判断目录是否已存在
让isHasDir=fs.existsSync (path.resolve (dir));
如果(isHasDir) {
spinner.fail(& # 39;当前目录已存在! & # 39;);
返回错误;
}
微调控制项。开始(“您选择的目录是:$ {chalk.red (dir)},数据加载中,请稍后…”);//克隆模板文件
dir gitClone (' https://github.com/noahlam/vue-multi-tab.git ', null,函数(err) {//移除无用的文件
shell.rm(& # 39;射频# 39;,“$ {dir}/.”)
spinner.succeed(& # 39;项目初始化成功! & # 39;)//运行常用命令
shell.cd (dir)
spinner.start(“正在帮您安装依赖…”);
shell.exec (& # 39; npm我# 39;)
spinner.succeed(& # 39;依赖安装成功! & # 39;)
shell.exec (& # 39; npm dev # 39;运行)
}）
} 如果你这个脚手架有疑问或者兴趣,可以直接访问github上的代码tab-cli
实现多页签
要想实现多页签,那么vue-router基本算是废了,为什么? vue-router是根据url来切换单个组件的,而页签则需要再组件内部同时存在多个子组件的,所以路由无法胜任(至少我是这么认为的,如果你有更好的方案,恳请不吝赐教)。
