如何架構一箇中後臺項目的前端部分（技術選型篇）

前言

最近我正在公司作一箇中後臺管理系統的前端框架搭建工做，雖說公司已經有現成的中後臺框架可供選擇，可是並不特別適合咱們部門的項目，所以在借鑑原有框架的基礎上融入了個人一些我的想法和思考在裏面。這篇文章便主要來談談在架構一箇中後臺系統的前端部分上個人實踐點。

技術選型

無論是前端抑或後端，從零開始作一個新項目避免不了技術選型這一塊，其應該也是最早須要考慮的內容，以後的一切都會創建在這之上。

1. JS 框架

考慮到公司和部門的主流技術棧及組員的技術能力，咱們選擇的主要前端技術棧是 Vue。這一選擇其實不難，接下來須要考慮的即是圍繞這一技術棧，選出子技術棧。

既然用到 Vue，那麼爲了快速構建項目，咱們必然會選擇使用其腳手架工具（最新版本是 Vue CLI 3）來構建基礎的工程。另外不可或缺的還有 Vue 的路由庫 Vue Router 和 狀態管理工具 Vuex，這在 Vue 項目中基本都會用到。此外，考慮到項目會作國際化功能，咱們還加入了 vue-i18n 這一官方庫作國際化配置。

2. UI 框架

因爲咱們所要架構的是一箇中後臺系統，所以採用一套 UI 框架來負責咱們視圖層面的開發是必不可少的。把比較小衆的排除在外，目前在 PC 端主流的 Vue UI 框架莫過於 Element UI 和 iView 作的比較好。而公司現有框架採用的是 Element UI，爲了體現不一樣之處，咱們選擇了 iView（畢竟其也有 iView-admin 這樣的中後臺框架）。

3. Node 框架

考慮到前端後端分離後，前端須要啓用本身的服務來跑打包後的資源，所以雖然咱們本地可使用 webpack 的 devServer 來實現，可是發佈到 node 服務器上則須要有一個腳原本啓動服務，這裏咱們選擇小巧可配置的 Koa2 框架來實現（後期會逐漸拓展，實現 node 中間層）。

4. 其餘

JS 框架、UI 框架及服務端框架選型都落實以後，咱們還須要考慮除框架自己外的其餘技術，好比咱們選擇了 axios 來實現接口的請求，使用 less 來預處理 css 樣式，使用 mockjs 來實現接口的數據模擬等。

最後用一張圖例來歸納項目技術棧，以下：

目錄結構

根據上述技術棧，咱們實現瞭如下目錄結構的搭建，下面是整個項目的目錄結構大綱：

├── /build/             # vue cli 所需編譯配置
│ ├── /lib/             # 編譯工具庫
| └── pro-server.js     # 跑靜態資源包的 node 服務
├── /config/            # webpack 環境配置
├── /dist/              # 打包的資源
├── /public/            # html 模版等公共資源
| └──index.html         # html 模版文件
├── /docs/              # 項目文檔資源
├── /src/               # 項目工做區域
│ ├── /assets/          # 項目圖片資源文件
│ ├── /common/          # 項目公共方法 腳本文件
| | ├── /libs/          # 依賴js庫
| | ├── utils.js        # 項目工具集
| | └── variable.js     # 項目常量管理
│ ├── /components/      # 項目公共組件
│ ├── /config/          # 項目配置文件 全局配置數據
| | ├── global.js       # 全局數據
| | └── apiUriConf.js   # api 接口配置文件
│ ├── /lang/            # 項目國際化配置
│ ├── /mock/            # 接口 mock 配置文件
│ ├── /router/          # 路由配置文件
│ ├── /services/        # 接口封裝 地址文件
│ ├── /store/           # vuex 配置文件
│ ├── /views/           # 頁面組件
│ ├── App.vue           # 全局父組件
│ ├── index.less        # 全局樣式
│ └── main.js           # 項目入口文件
├── .browserslistrc     # 瀏覽器支持配置
├── babel.config.js     # 用來設置轉碼的規則（babel）和插件(環境調用)
├── .editorConfig       # 代碼編輯工具默認格式
├── .eslintignore       # eslint不處理，忽略路徑配置
├── .eslintrc.js        # eslint詳細規則配置
├── postcss.config.js   # postcss 配置文件
├── .gitignore          # git忽略上傳的文件
├── .npmrc              # npm 源配置文件
├── package-lock.json   # 安裝高版本npm纔會有
├── .prettierrc.json    # 代碼風格配置
├── package.json        # 項目依賴
├── README.md           # 項目安裝啓動介紹
├── vue.config.js       # vue cli3 入口配置文件
└── yarn.lock           # yarn 依賴
複製代碼

結語

技術選型是項目開發的前提條件，使用優秀穩定的技術才能保障整個系統開發的穩定和易維護。本文的技術選型你們能夠用做參考，具體須要結合公司或部門項目的實際狀況出發。

下篇地址: 《如何架構一箇中後臺項目的前端部分（webpack + 接口配置篇）》

關於

轉載請註明來自 —— 微信公衆號：前端呼啦圈（Love-FED）

若是以爲本文對你有幫助，能夠關注個人微信公衆號，來這裏聊點關於前端的事情。