一、實(shí)現(xiàn)思路

在實(shí)踐中后臺(tái)管理系統(tǒng)的前后端分離時(shí)，往往會(huì)因?yàn)闃I(yè)務(wù)量的增加使其前端項(xiàng)目難以維護(hù)，以及打包時(shí)間不理想，還有業(yè)務(wù)系統(tǒng)與框架之間區(qū)分不在明顯。本文是本人從另一個(gè)角度提出的一種解決方案，希望各位提出寶貴的建議。

一個(gè)通用的框架項(xiàng)目
此項(xiàng)目為框架項(xiàng)目，只負(fù)責(zé)提供基礎(chǔ)方法，以及第三方依賴包的管理（因?yàn)橐惶紫到y(tǒng)第三方依賴包的版本應(yīng)該統(tǒng)一的）、提供業(yè)務(wù)子系統(tǒng)的注冊(cè)、布局的管理、導(dǎo)航管理等功能。

框架項(xiàng)目的cli，用于快速搭建業(yè)務(wù)子系統(tǒng)的開發(fā)平臺(tái)
首先以框架項(xiàng)目的生產(chǎn)版本為基礎(chǔ)，制作一個(gè)模板項(xiàng)目；然后再創(chuàng)建一個(gè)cli項(xiàng)目，業(yè)務(wù)系統(tǒng)開發(fā)者安裝cli項(xiàng)目，通過cli快速部署、更新框架內(nèi)容。

一個(gè)全平臺(tái)的css預(yù)處理解決方案
此項(xiàng)目主要包含布局、各常用模塊內(nèi)容（如：登錄、彈窗、文字處理等），現(xiàn)版本在業(yè)務(wù)系統(tǒng)中不允許修改css，只能引用css內(nèi)容。
注意：本基礎(chǔ)框架是基于vue iview requirejs實(shí)現(xiàn)的

二、創(chuàng)建步驟

2.1、github上新建組織

此部分的操作可以參考github的相關(guān)操作手冊(cè)完成。

2.2、基礎(chǔ)框架與模板庫

由于模板庫是基于基礎(chǔ)框架的，放在一起能更為有效的說明：

說明：

.babelrc與.gitignore文件是沒有做任務(wù)改變的復(fù)制

gulpfile.js和package.json去掉了對(duì)sass編譯部分的支持和方法

模板的skin文件夾是框架項(xiàng)目的skin和assets文件的合并，assets存放的sass內(nèi)容，而skin存放的是第三方依賴的css內(nèi)容。

core文件夾由dest文件夾和app文件夾部分內(nèi)容一起組成，dest存放的是通過rollup編譯后的app.js和layout.js（框架系統(tǒng)），app存放的是index.html（入口html）、requirejs的main.js文件（js的入口和配置）

lib和build是直接復(fù)制的 lib是第三方依賴庫（此處是為了做到依賴庫的統(tǒng)一管理）,build中是存放的rollup編譯配置文件，但有些許改動(dòng)。

重點(diǎn)說明

框架項(xiàng)目中的examples文件夾，他是用于存放靜態(tài)頁面。我們?cè)诓季帜K時(shí)應(yīng)該先在此按鈕設(shè)計(jì)圖進(jìn)行靜態(tài)頁面的實(shí)現(xiàn)。然后才是轉(zhuǎn)換到正式項(xiàng)目，因?yàn)槊總€(gè)模塊的樣式都有被重用機(jī)會(huì)。

框架項(xiàng)目中的dest文件夾中app.js和layout.js的源碼在src/master文件夾中。

2.3、制作cli代碼庫

此項(xiàng)目的目的其為簡單，就是提供init和update方法，用于從模板項(xiàng)目生成業(yè)務(wù)子系統(tǒng)，并在模板項(xiàng)目更新后，提供更新命令將新的內(nèi)容更新到業(yè)務(wù)子系統(tǒng)。

依賴的npm包：

chalk: 命令窗口文字有顏色的輸出 commander：解析命令的輸入 download-github-repo：下載github上面的模板項(xiàng)目 fs-extra：file和folder的處理，如刪除 metalsmith：生成靜態(tài)站點(diǎn)，選擇他，是由于他的插件模式，用于后期對(duì)文件內(nèi)容進(jìn)行加工和處理

注意

發(fā)布的bin命令如何可用
首先，需要在命令入口文件最上面添加如下代碼(第一行)：

#!/usr/bin/env node

然后，在package.json中的bin中添加命令與執(zhí)行文件的關(guān)聯(lián)

"bin": {"vn-init": "srcCli/bin/init.js"},

按照上述配置，npm全局安裝成后，運(yùn)行vn-init命令即可觸發(fā)相關(guān)命令文件的代碼。

三、項(xiàng)目地址

vueManager(框架項(xiàng)目)：https://github.com/cqhaibin/vueManager.git
vueManager-cli(腳手架項(xiàng)目)：https://github.com/cqhaibin/vueManager-cli.git
simple(模板項(xiàng)目)：https://github.com/vueManager-template/simple.git
腳手架npm地址：https://www.npmjs.com/package/vuemanager-cli

歡迎下載測試和提出建議！！！

更多專業(yè)前端知識(shí)，請(qǐng)上 【猿2048】www.mk2048.com

總結(jié)

以上是生活随笔為你收集整理的中后端管理系统前后分离、前端框架的实现拙见的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。