电商网站目录优化,开发微信小程序的软件,网站是不是用cms做的,网站开发技术孵化一、实现思路
在实践中后台管理系统的前后端分离时#xff0c;往往会因为业务量的增加使其前端项目难以维护#xff0c;以及打包时间不理想#xff0c;还有业务系统与框架之间区分不在明显。本文是本人从另一个角度提出的一种解决方案#xff0c;希望各位提出宝贵的建议。…一、实现思路
在实践中后台管理系统的前后端分离时往往会因为业务量的增加使其前端项目难以维护以及打包时间不理想还有业务系统与框架之间区分不在明显。本文是本人从另一个角度提出的一种解决方案希望各位提出宝贵的建议。
一个通用的框架项目此项目为框架项目只负责提供基础方法以及第三方依赖包的管理因为一套系统第三方依赖包的版本应该统一的、提供业务子系统的注册、布局的管理、导航管理等功能。框架项目的cli用于快速搭建业务子系统的开发平台首先以框架项目的生产版本为基础制作一个模板项目然后再创建一个cli项目业务系统开发者安装cli项目通过cli快速部署、更新框架内容。一个全平台的css预处理解决方案此项目主要包含布局、各常用模块内容如登录、弹窗、文字处理等现版本在业务系统中不允许修改css只能引用css内容。注意本基础框架是基于vue iview requirejs实现的
二、创建步骤
2.1、github上新建组织
此部分的操作可以参考github的相关操作手册完成。
2.2、基础框架与模板库
由于模板库是基于基础框架的放在一起能更为有效的说明 说明
.babelrc与.gitignore文件是没有做任务改变的复制gulpfile.js和package.json去掉了对sass编译部分的支持和方法模板的skin文件夹是框架项目的skin和assets文件的合并assets存放的sass内容而skin存放的是第三方依赖的css内容。core文件夹由dest文件夹和app文件夹部分内容一起组成dest存放的是通过rollup编译后的app.js和layout.js框架系统app存放的是index.html入口html、requirejs的main.js文件js的入口和配置lib和build是直接复制的 lib是第三方依赖库此处是为了做到依赖库的统一管理,build中是存放的rollup编译配置文件但有些许改动。
重点说明
框架项目中的examples文件夹他是用于存放静态页面。我们在布局模块时应该先在此按钮设计图进行静态页面的实现。然后才是转换到正式项目因为每个模块的样式都有被重用机会。框架项目中的dest文件夹中app.js和layout.js的源码在src/master文件夹中。
2.3、制作cli代码库
此项目的目的其为简单就是提供init和update方法用于从模板项目生成业务子系统并在模板项目更新后提供更新命令将新的内容更新到业务子系统。
依赖的npm包 chalk: 命令窗口文字有颜色的输出
commander解析命令的输入
download-github-repo下载github上面的模板项目
fs-extrafile和folder的处理如删除
metalsmith生成静态站点选择他是由于他的插件模式用于后期对文件内容进行加工和处理 注意
发布的bin命令如何可用首先需要在命令入口文件最上面添加如下代码(第一行) #!/usr/bin/env node 然后在package.json中的bin中添加命令与执行文件的关联 bin: {
vn-init: srcCli/bin/init.js
}, 按照上述配置npm全局安装成后运行vn-init命令即可触发相关命令文件的代码。
三、项目地址
vueManager(框架项目)https://github.com/cqhaibin/vueManager.gitvueManager-cli(脚手架项目)https://github.com/cqhaibin/vueManager-cli.gitsimple(模板项目)https://github.com/vueManager-template/simple.git脚手架npm地址https://www.npmjs.com/package/vuemanager-cli
欢迎下载测试和提出建议
更多专业前端知识请上
【猿2048】www.mk2048.com
