用Vue2.5和Elemnt-ui2搭建一個後臺模版:提升篇（1.搭建框架）

時間 2019-12-06

標籤 vue2.5 vue elemnt ui2 搭建一個後臺模版提升框架简体版

原文原文鏈接

前言：用vue作後臺管理系統作了半年，最近element-ui升級到2了，因此決定搭建一個基於ele2的後臺模版，在這我將手把手javascript:void(null)分享一下如何從0搭建一個後臺系統模版。本模版將會長期更新，之後維護中會把經常使用結局方案經常使用組件封裝在另一個系統中，模版保障：方便快速開發，極易擴展的一個模版，基於此模版，您只須要修改少許的代碼，就能進行開發。分享開發過程，待續未完......javascript

概述

github地址項目在線預覽我的博客地址此模板內涵蓋：css

登陸權限控制
路由跳轉攔截
網絡請求攔截
側邊導航動態生成
動態換膚
結合Element-ui 2.0版本以上

等等包含後臺系統經常使用功能，方便快速開發，極易擴展的一個模版，基於此模版，您只須要修改少許的代碼，就能進行開發。html

項目主依賴總覽

Vue.js
Vue-router
Vuex
axios 一個封裝了網絡請求的庫
element-ui2 2.0版本以上，最近餓了嗎團隊除了2.0，1.+年後也再也不維護
normalize.css css樣式重置
nprogress 一個加載進度條插件
screenfull 一個全屏的插件
stylus、stylus-loader 本項目使用的Css預處理器,也可自行選擇其餘與處理器
eslint-config-vue Eslint規則採用Vue源碼的官方規則，你能夠用自定義或者其餘規則，Eslint規則查詢字典

搭建前準備

1、環境準備

最新node.js環境安裝、npm、yarn、vue-cli腳手架安裝這些就不在此多說。

2、模擬數據

因爲是我的項目，本模板中的數據都爲Easy Mock生成的在線模擬數據。有興趣的能夠了解下。模擬數據的地址接口配置在根目錄下 /config/dev.env.js 的相關配置中，改爲您的請求地址便可

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  BASE_API: '"http://www.easy-mock.com/mock/59dc61571de3d46fa94cebc7/lolapp"'  // 這裏換成您的請求地址便可
})
複製代碼

2.接口約定。通常在項目中先後端聯繫的接口都會有固定的約定，雖然本項目是模擬數據，可是爲了作到規範，先簡單約定好接口格式，方便後面請求攔截的時候判斷，接口約定規則以下前端

一、數據交互統一爲JSON格式
二、出參通用格式相似
   {
    "code": "H0000",
    "data": "88888888"
   }
   
   其中：code指返回碼，有具體業務含義，如：
  S0000  系統錯誤!
  B0000  未登陸或登陸失效!
  H0000  執行成功

  首字母
  S: 系統錯誤
  B: 業務異常
  H: 提示
  M: 消息

  data指返回的json數據。

三、登錄後返回session_key，後續每次請求時都須將此做爲token加入在header的Authorization信息中。
複製代碼

3、跨域問題

因爲本模板項目是用的 Easy Mock，不用前端解決跨域問題，可是若是您的實際需求中須要解決跨域問題能夠百度 cors 跨域或者 webpack 配置反向代理：這裏具體就不詳細說明了，百度有不少答案，我這裏簡單貼個圖： webpack配置 'config/index.js'

axios配置

這幾個地方對應好了就行

4、字體圖標

1.Element-ui裏面自帶的圖標在實際項目中確定不夠用，我是使用的阿里iconfont字體圖標庫，註冊一個賬號，建立一個項目添加你想要的字體圖標，會生成一個cdn的css連接，而後在你的head 裏面 link這個樣式便可。當你增長新圖標的時候更新這個地址就行了。 vue

5、關於vuex的使用

並非每一個項目都必須使用vuex，根據項目須要來使用。對於數據流不復雜的項目，徹底能夠講數據保存在本地，也能達到相似的效果也不影響項目需求，vuex我我的感受使用很繁瑣，根據你的項目來進行使用。仍是借用官方文檔的術語：雖然 Vuex 能夠幫助咱們管理共享狀態，但也附帶了更多的概念和框架。這須要對短時間和長期效益進行權衡。若是您不打算開發大型單頁應用，使用 Vuex 多是繁瑣冗餘的。確實是如此——若是您的應用夠簡單，您最好不要使用 Vuex。一個簡單的 global event bus 就足夠您所需了java

開始搭建

1. Vue-cli腳手架生成項目

使用vue官方腳手架生成項目，生成的時候最好選擇webpack模版，單元測試，根據你的需求是否安裝。node

2. 目錄結構

├── build                      // 構建相關  
├── config                     // 配置相關
├── src                        // 源代碼
│   ├── api                    // 全部請求
│   ├── assets                 // 圖片 字體等靜態資源
│   ├── components             // 全局公用組件
│   ├── directive              // 全局指令
│   ├── filtres                // 全局filter
│   ├── mock                   // mock數據
│   ├── router                 // 路由
│   ├── store                  // 全局store管理
│   ├── styles                 // 全局樣式
│   ├── utils                  // 全局公用方法
│   ├── views                  // view
│   ├── App.vue                // 入口頁面
│   ├── main.js                // 入口 加載組件 初始化等
│   └── permission.js          // 權限控制 初始用戶數據等
├── static                     // 第三方不打包資源
│   ├── img                    // 第三方不打包圖片
│   └── theme                  // 主題包
├── .babelrc                   // babel-loader 配置
├── eslintrc.js                // eslint 配置項
├── .gitignore                 // git 忽略項
├── .fjpublish.config.js       // 自動化發佈服務器 配置
├── index.html                 // html模板
└── package.json               // package.json

複製代碼

3.webpack配置改造

3.1 在實際開發過程當中，每每有多個環境，開發環境、測試環境、生產環境等等。咱們須要進行多環境配置。

步驟1

在./config文件夾下新建一個sit.env.js 的文件webpack

// 測試仿真環境
module.exports = {
  NODE_ENV: '"production"',
  BASE_API: '"http://120.55.169.121:8888/index"',
  CRM_PATH: '"http://120.55.169.121:8083"',        //  其餘配置
};
複製代碼

dev.env.js 、prode.env.js 也可進行相似的配置，把各個環境請求的不一樣端口配置在這ios

後面在你的程序中，若是要使用這些變量可參考下例git

let baseUrl  = process.env.BASE_API;  
let crmPath = process.env.CRM_PATH;
// 建立axios實例
const service = axios.create({
  baseURL: BASE_API,      // api的base_url
})
複製代碼

步驟2

修改./config/index.js文件，將 sit.env.js 在 index.js 的 build 對象中引入：如圖

步驟3

修改./build/build.js 文件，將 process.env.NODE_ENV = 'production' 註釋或者刪除，由於咱們在後面須要動態配置NODE_ENV，此步驟如圖

步驟4

修改./build/webpack.prod.conf.js 文件修改 evn,不BB直接上圖

這樣webpack 的配置就修改完了。在這裏能夠順便修改一下這個文件下 UglifyJsPlugin，打包構建的時候能夠去除console.log，debugger。配置以下。（此步驟和多環境配置無關）

new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false,
        drop_debugger: true,     // 去除構建的 debugger
        drop_console: true        // 去除構建的 console
      },
      sourceMap: true
    }),

複製代碼

步驟5

咱們須要修改 package.json 的script 語句來增長命令啓動咱們新增的服務

"scripts": {
    "dev": "node build/dev-server.js",
    "start": "node build/dev-server.js",
    "build:sit": "NODE_ENV=sit node build/build.js",
    "build:prod": NODE_ENV=production node build/build.js"
  },
複製代碼

而後啓動 run run build:sit，但是這個時候報錯了，NODE_ENV不被識別，這是因爲 windows 不支持 NODE_ENV=sit 設置的方式。咱們只須要安裝一個 cross-env 的插件便可

yarn add cross-env -D   // 或者你使用npm 也可
  npm install cross-env -dev--save
複製代碼

接下來繼續修改一個 script 語句啓動便可

"scripts": {
    "dev": "node build/dev-server.js",
    "start": "node build/dev-server.js",
    "build:sit": "cross-env NODE_ENV=sit node build/build.js",
    "build:prod": "cross-env NODE_ENV=production node build/build.js"
  },
複製代碼

這樣你啓動 npm run build:sit 將構建打包測試環境的代碼生成在 dist 文件目錄下啓動 npm run build:prod 將構建打包生產環境的代碼生成在 dist 文件目錄下

3.2 結合 fjpublish 自動化發佈到服務器。

步驟1

安裝 fjpublish

npm install fjpublish -g
複製代碼

在項目根目錄下創建一個 fjpublish.config.js 文件（爲fjpublish配置文件）

module.exports = {
  modules: [{
    name: '測試環境',   
    env: 'sit',
    ssh: {
      host: '11.11.111.11',     // 服務器地址
      port: 22,                        // 端口
      username: 'root',         // 用戶名
      password: 'XXXX'        // 密碼
    },
    buildCommand: 'build:sit',    // 構建命令 === npm run build:sit 
    localPath: 'dist',                   // 構建後上傳文件
    remotePath: '/test/xx',       // 服務端路徑
  }，｛
    name: '其餘環境',
    env: 'other',
    ....
｝]
}
複製代碼

一樣的爲了方便咱們須要修改 package.json 的script mode

"scripts": {
    "dev": "node build/dev-server.js",
    "start": "node build/dev-server.js",
    "build:sit": "cross-env NODE_ENV=sit node build/build.js",
    "build:prod": "cross-env NODE_ENV=production node build/build.js"
    "public:sit": "fjpublish env sit"
  },
複製代碼