基於vue-cli3搭建一個後臺管理系統框架

1、安裝

【1.1】安裝Nodejavascript

3.x須要node.js版本爲8.9版或者更高的版本，點擊這裏能夠安裝nodecss

安裝過node後，輸入下面命令行查詢你的node版本：html

node -v複製代碼

若是當前版本不夠，能夠輸入下面命令行來把node版本更新到最新的穩定版本前端

先清除npm緩存：npm cache clean -f

而後安裝n模塊：npm install -g n

升級node.js到最新穩定版：n stable

若是是mac 在命令前面加sudo：sudo n stable

複製代碼

【1.2】卸載舊版本vue

若是你以前已經全局安裝過舊版本的vue-cli，須要先卸載它java

npm uninstall vue-cli -g複製代碼

【1.3】安裝vue-cli3node

// 安裝vue-cli3
npm install -g @vue/cli 

// 安裝後查看版本號
vue -V 或者 vue --version

複製代碼

2、建立項目

【2.1】建立項目命令webpack

vue create project // project是項目名稱複製代碼

【2.2】選擇模板ios

default (babel, eslint): 默認配置，只有Babel和eslint，其餘的都要本身另外再配置
Manually select features: 手動配置

經過上下箭頭能夠切換選項，這裏咱們選擇手動配置git

【2.3】選擇配置

根據你的項目須要來選擇配置

括號裏有*表明選中
上下箭頭可切換選項
Space空格鍵是切換選中與取消
A鍵是切換所有選中和所有取消
I鍵是反向選擇
Enter確認選擇完成

這邊選擇了（Babel、Router、Vuex、CSS預處理器、Linter / Formatter格式檢查）

再次詢問是否保存配置：

1) 是否使用路由的 histroy 模式（Yes）

2）選擇一個css預處理器（Sass/SCSS）

3）選擇一個eslint配置（ESLint + Standard config）

4）選擇何時進行eslint代碼規則檢查（Lint on save）

5）將babel、postcss、eslint這些配置文件放哪（In dedicated config files）

6）是否保存這份預設配置（Yes）

選擇是的話，會讓你填寫一個預設文件的名字，下次建立一個vue項目，能夠直接使用這個預設文件，而無需再進行配置。

【2.4】生成目錄結構

node_modules： 這個文件夾裏面是咱們項目須要的一些依賴；

public： 靜態文件夾，這個文件夾中的資源不會被webpack編譯，構建生產包的時候，會被直接拷貝一份；

assets： 是頁面和組件中用到的靜態資源，好比公共樣式文件，字體文件，圖片等，該文件夾與public的區別是：該文件夾中的資源會被webpack編譯；

components： 文件夾中存放咱們的組件；

views： 文件夾中存放咱們的頁面；

App.vue： 這個文件是咱們全部vue頁面的頂層文件；

main.js： 是咱們整個項目的入口文件；

router.js： 是路由的配置文件；

store.js： 是vuex的配置文件；

.browserslistrc： 文件用於給開發者設置瀏覽器版本的範圍；

.eslintrc.js： eslint配置文件；

.gitignore： 須要git忽略的文件；

babel.config.js： babel的配置工具；

package-lock.json：記錄項目依賴中各個依賴之間的關係和版本，防止npm包中有不遵照「相同大版本號的同一個庫包，其接口符合兼容要求」

這一規範，致使項目運行報錯；

package.json： 項目的描述文件，包括項目名、依賴的版本、做者、命令、入口文件等信息。

README.md： 項目的說明文檔，項目介紹、License、一些命令（例如：啓動命令、打包命令、單元測試命令等）

vue-cli3和vue-cli2的區別在於：

建立項目 vue create
啓動項目由npm run dev 改爲 npm run serve
移除了配置文件目錄 config 和 build 文件夾，若是須要自定義配置，須要本身新建vue.config.js文件
移除了 static 靜態資源文件夾，新增 public 文件夾，靜態資源轉移到public目錄中，經過/xx.xx能夠直接訪問，而且 index.html 移動到 public 中
在 src 文件夾中新增了 views 文件夾，用於分類視圖組件和公共組件
安裝項目時會自動下載node-model文件夾

【2.5】啓動項目

npm run serve複製代碼

3、修改目錄結構

因爲如今的目錄結構不利於後期的開發，如今咱們增長部分文件，待後續能夠進行功能擴展。在src文件下：新建api文件夾，router文件夾，utils文件夾，views文件夾，store文件夾。並在其文件下建子目錄，詳細請參考目錄截圖：

4、項目配置 Vue.config.js

vue-cli3.0構建項目目錄中沒有build和config目錄，那麼問題來了，咱們如何去開發咱們的項目呢？（好比設置代理、打包配置等問題）只須要在項目根目錄中添加vue.config.js文件，注意是根目錄非src下，它會被 @vue/cli-service 自動加載。參考Vue CLI

配置以下：

// vue.config.js
const path = require('path');

function resolve(dir) {
    return path.join(__dirname, dir);
}
module.exports = {
    // 部署應用包時的基本URL，默認爲'/'
    // 假設你的應用將會部署在域名的根部,好比，https://www.vue-cli.com/,則設置爲"/"
    // 若是你的應用是部署在一個子路徑下，那麼你須要在這裏指定子路徑，好比，若是你部署在 https://www.my-vue.com/my-app/; 那麼將這個值改成 「/my-app/」
    publicPath: "/",

    //將構建好的文件輸出到哪裏 當運行 vue-cli-service build 時生成的生產環境構建文件的目錄。注意目標目錄在構建以前會被清除 (構建時傳入 --no-clean 可關閉該行爲)。
    outputDir: "dist",

    //放置生成的靜態資源(js、css、img、fonts)的目錄。
    assetsDir: "",

    // 指定生成的 index.html 的輸出路徑
    indexPath: "index.html",

    // 默認狀況下，生成的靜態資源在它們的文件名中包含了 hash 以便更好的控制緩存。然而，這也要求 index 的 HTML 是被 Vue CLI 自動生成的。若是你沒法使用 Vue CLI 生成的 index HTML，你能夠經過將這個選項設爲 false 來關閉文件名哈希
    filenameHashing: true,

    // 構建多頁面應用，頁面的配置 
    pages: {
        index: {
            // page 的入口
            entry: 'src/main.js',
            // 模板來源
            template: 'public/index.html',
            // 在 dist/index.html 的輸出
            filename: 'index.html',
            // 當使用 title 選項時，
            // template 中的 title 標籤須要是 <title><%= htmlWebpackPlugin.options.title %></title>
            title: 'Index Page',
            // 在這個頁面中包含的塊，默認狀況下會包含
            // 提取出來的通用 chunk 和 vendor chunk。
            chunks: ['chunk-vendors', 'chunk-common', 'index']
        },
        // 當使用只有入口的字符串格式時，
        // 模板會被推導爲 `public/subpage.html`
        // 而且若是找不到的話，就回退到 `public/index.html`。
        // 輸出文件名會被推導爲 `subpage.html`。
        // subpage: 'src/subpage/main.js'
    },

    // 是否在開發環境下經過 eslint-loader 在每次保存時 lint 代碼。這個值會在 @vue/cli-plugin-eslint 被安裝以後生效。
    // 設置爲 true 時，eslint-loader 會將 lint 錯誤輸出爲編譯警告。默認狀況下，警告僅僅會被輸出到命令行，且不會使得編譯失敗。
    // 若是你但願讓 lint 錯誤在開發時直接顯示在瀏覽器中，你可使用 lintOnSave: 'error'。這會強制 eslint-loader 將 lint 錯誤輸出爲編譯錯誤，同時也意味着 lint 錯誤將會致使編譯失敗。
    lintOnSave: false,

    //是否使用包含運行時編譯器的 Vue 構建版本。設置爲 true 後你就能夠在 Vue 組件中使用 template 選項了，可是這會讓你的應用額外增長 10kb 左右。
    runtimeCompiler: false,

    // 默認狀況下 babel-loader 會忽略全部 node_modules 中的文件。若是你想要經過 Babel 顯式轉譯一個依賴，能夠在這個選項中列出來。
    transpileDependencies: [],

    //若是你不須要生產環境的 source map，能夠將其設置爲 false 以加速生產環境構建。
    productionSourceMap: true,

    //是一個函數，會接收一個基於 webpack-chain 的 ChainableConfig 實例。容許對內部的 webpack 配置進行更細粒度的修改。
    chainWebpack: (config) => {
        //配置別名
        config.resolve.alias
            .set('@', resolve('src'))
            .set('assets', resolve('src/assets'))
            .set('components', resolve('src/components'))
            .set('router', resolve('src/router'))
            .set('utils', resolve('src/utils'))
            .set('store', resolve('src/store'))
            .set('views', resolve('src/views'))

    },

    //是否爲 Babel 或 TypeScript 使用 thread-loader。該選項在系統的 CPU 有多於一個內核時自動啓用，僅做用於生產構建。
    parallel: require("os").cpus().length > 1,

    // 向 PWA 插件傳遞選項。
    // https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
    pwa: {},

    // 全部 webpack-dev-server 的選項都支持。注意：有些值像 host、port 和 https 可能會被命令行參數覆寫。
    //有些值像 publicPath 和 historyApiFallback 不該該被修改，由於它們須要和開發服務器的 publicPath 同步以保障正常的工做。
    // 代理配置
    devServer: {
        host: "0.0.0.0",
        port: 8080, // 端口號
        https: false, // https:{type:Boolean}
        open: true, // 配置自動啓動瀏覽器 open: 'Google Chrome'-默認啓動谷歌

        // 配置單個代理
        // proxy: 'http://localhost:9000' 

        // 配置多個代理
        proxy: {
            "/api": {
                // target: "https://127.0.0.0:8080", // 目標主機
                target: "https://mock.yonyoucloud.com/mock/5708",
                ws: true, //代理的WebSockets
                changeOrigin: true, // 容許websockets跨域
                pathRewrite: {
                    "^/api": ""
                }
            }
        }
    },

    // 第三方插件選項
    // 這是一個不進行任何 schema 驗證的對象，所以它能夠用來傳遞任何第三方插件選項。
    pluginOptions: {
        foo: {
            // 插件能夠做爲 `options.pluginOptions.foo` 訪問這些選項。
        }
    },

    // 有的時候你想要向 webpack 的預處理器 loader 傳遞選項。你可使用 vue.config.js 中的 css.loaderOptions 選項。好比你能夠這樣向全部 Sass/Less 樣式傳入共享的全局變量
    css: {
        loaderOptions: {
            // 給 sass-loader 傳遞選項
            sass: {
                prependData: ` @import "@/assets/css/common.scss"; @import "@/assets/css/mixin.scss"; @import "@/assets/css/reset.scss"; @import "@/assets/css/var.scss"; `
            }
        }
    },
};複製代碼

5、全局樣式引用

在項目開發過程當中，咱們常常須要全局樣式引用，例如主題色等，若是每次去寫的化會變得很麻煩。由於咱們應該了sass預語言編譯，因此能夠大膽的應用其特性。例如變量，函數，混入等。可是咱們須要在項目中進行全局的配置纔能有效果。不用在每個頁面都進行引入樣式，就能直接引用。

【5.1】新建目錄

在assets文件下增長css文件夾，在css文件夾下新建以下幾個樣式代碼文件，具體的代碼自行進行配置

common.scss 主要存放公共的樣式

mixin.scss 主要存放混入樣式

reset.scss 主要存放重置樣式。

var.scss 主要存放變量複製代碼

【5.2】全局引入

在vue.config.js配置文件中，加上如下代碼

module.exports = {
    css: {
        loaderOptions: {
            // 給 sass-loader 傳遞選項
            sass: {
                prependData: ` @import "@/assets/css/common.scss"; @import "@/assets/css/mixin.scss"; @import "@/assets/css/reset.scss"; @import "@/assets/css/var.scss"; `
            }
        }
    },
}複製代碼

6、打包配置

在實際項目的開發中，咱們通常會經歷項目的開發階段、測試階段、預發佈階段和最終上線階段，每個階段對於項目代碼的要求可能都不盡相同，那麼咱們如何可以遊刃有餘的在不一樣階段下使咱們的項目呈現不一樣的效果，使用不一樣的功能呢？這裏就須要引入環境的概念。做爲一名開發人員，咱們可能須要針對每一種環境編寫一些不一樣的代碼而且保證這些代碼運行在正確的環境中，這就須要咱們進行正確的環境配置和管理。

通常一個項目都會有如下 4 種環境：

開發環境（開發階段，本地開發版本，通常會使用一些調試工具或額外的輔助功能）
測試環境（測試階段，上線前版本，除了一些 bug 的修復，基本不會和上線版本有很大差異）
預發佈環境（即將上線階段，上線前版本，預測線上出現問題的可能性，和上線版本無差異）
生產環境（上線階段，正式對外發布的版本，通常會進行優化，關掉錯誤報告）

有關環境變量的注意事項：

環境文件放置根目錄下
環境名應該與環境文件統一
除了 baseUrl 和 NODE_ENV 其餘環境變量使用VUE_APP開頭

在項目的根目錄新建4個文件夾，分別對應開發環境（.env.dev），測試環境（.env.test），預發佈環境（.env.pre），生產環境（env.prod）

.env.dev文件內容以下：

NODE_ENV = 'development'
VUE_APP_CURRENTMODE = 'dev'
VUE_APP_BASEURL = '本地開發api地址'複製代碼

.env.test文件內容以下：

NODE_ENV = 'test'
VUE_APP_CURRENTMODE = 'test'
VUE_APP_BASEURL = '測試環境api地址'複製代碼

.env.pre文件內容以下：

NODE_ENV = 'pre-release'
VUE_APP_CURRENTMODE = 'pre'
VUE_APP_BASEURL = '預發佈環境api地址'複製代碼

env.prod文件內容以下：

NODE_ENV = 'production'
VUE_APP_CURRENTMODE = 'prod'
VUE_APP_BASEURL = '正式環境api地址'複製代碼

package.json配置：

"scripts": {
        "dev": "vue-cli-service serve",
        "build:test": "vue-cli-service build --mode test",
        "build:per": "vue-cli-service build --mode pre-release",
        "build:prod": "vue-cli-service build --mode production",
        "build": "vue-cli-service build",
        "lint": "vue-cli-service lint"
    },複製代碼

最後根據上面的配置進行打包：

npm run dev //本地運行

npm run build:test //測試環境打包

npm run build:pre //預測試環境打包

npm run build:prod //正式環境打包

注意：

在vue.config.js使用 proccess.env.NODE_ENV 進行訪問就能夠了

// vue.config.js
console.log(process.env.NODE_ENV); // development（在終端輸出）複製代碼

當你運行 npm run dev命令後會發現輸出的是 development，由於 vue-cli-service serve 命令默認設置的環境是 development，你能夠修改 package.json 中的 dev 腳本的命令爲：

"scripts": {
"dev": "vue-cli-service serve --mode test",
}
// --mode test其實就是修改了 webpack 4 中的 mode 配置項爲 test，同時其會讀取對應 .env.[model]文件下的配置 
// 若是沒找到對應配置文件，其會使用默認環境 development
// 一樣 vue-cli-service build 會使用默認環境 production複製代碼

7、安裝使用iview

【7.1】安裝iview

npm install iview -S複製代碼

【7.2】main.js 引入iview

import iview from 'iview'
import 'iview/dist/styles/iview.css'
Vue.use(iview)

8、axios封裝

在vue項目中，和後臺交互獲取數據這塊，咱們一般使用的是axios庫，它是基於promise的http庫，可運行在瀏覽器端和node.js中。他有不少優秀的特性，例如攔截請求和響應、取消請求、轉換json、客戶端防護XSRF等。因此咱們的尤大大也是果斷放棄了對其官方庫vue-resource的維護，直接推薦咱們使用axios庫。若是還對axios不瞭解的，能夠移步 axios中文說明

【8.1】安裝

npm install axios --save-dev複製代碼

【8.2】新建目錄

在src目錄下新建一個api文件夾，而後在裏面新建一個axios.js和一個getData.js文件；axios.js文件用來封裝咱們的axios，getData.js用來統一管理咱們的接口。

【8.3】axios.js封裝axios

import axios from "axios";
import { Message } from "iview";
let router = import("@/router");

axios.defaults.baseURL = "/api";
axios.defaults.headers.post["Content-Type"] = "application/json;charset=UTF-8";
axios.defaults.headers["X-Requested-With"] = "XMLHttpRequest";
axios.defaults.headers["Cache-Control"] = "no-cache";
axios.defaults.headers["pragma"] = "no-cache";

let source = axios.CancelToken.source();

//請求添加token
axios.interceptors.request.use(request => {
  request.headers["Authorization"] = window.localStorage.getItem('token') ? window.localStorage.getItem('token') : "";
  return request;
});

//登陸過時(token失效)跳轉到登陸頁
axios.interceptors.response.use(response => {
  let data = response.data;
  if (
    data.state && [401].includes(data.state.code)
  ) {
    router.then(lib => {
      if (lib.default.currentRoute.name === "login") return;
      lib.default.push({
        name: "login"
      })
      Message.warning(data.state.msg);
    });
  }
  return response;
})

//返回值解構
axios.interceptors.response.use(response => {
  let data = response.data;
  let isJson = (response.headers["content-type"] || "").includes("json");
  if (isJson) {
    if (data.state && data.state.code === 200) {
      return Promise.resolve({
        data: data.data,
        msg: data.state.msg,
        code: data.state.code,
        page: data.page
      });
    }
    return Promise.reject(
      data.state &&
      data.state.msg ||
      "網絡錯誤"
    );
  } else {
    return data;
  }
}, err => {
  let isCancel = axios.isCancel(err);
  if (isCancel) {
    return new Promise(() => {});
  }
  return Promise.reject(
    err.response.data &&
    err.response.data.state &&
    err.response.data.state.msg ||
    "網絡錯誤"
  );
})

//切換頁面取消請求
axios.interceptors.request.use(request => {
  request.cancelToken = source.token;
  return request;
});
router.then(lib => {
  lib.default.beforeEach((to, from, next) => {
    source.cancel()
    source = axios.CancelToken.source();
    next()
  })
})

export function post(url, data, otherConfig) {
  return axios.post(url, data, otherConfig);
}

export function get(url, data, otherConfig) {
  return axios.get(url, {
    params: data,
    ...otherConfig
  });
}
複製代碼

【8.4】getData.js 接口管理（例子）

import {get, post } from "./axios";

//獲取程序配置
export function getConfig() {
    return get("static/config.json", null, { baseURL: "./" });
}

//獲取用戶信息（統一認證登陸的用戶）
export function getLoginInfo() {
    return get("/oauth/getLoginInfo");
}

//登陸
export function login(params) {
    return post("/oauth/login", params);
}

//退出
export function logout(params) {
    return get("/oauth/logout", params);
}複製代碼

【8.5】頁面調用接口（例子）

import { login } from "@/api/getData.js";
export default {
  data() {
    return {
      userName: '',
      password: ''
    };
  },
  methods: {
    async login() {
      try {
        this.loading = true;
        let { msg } = await login({
          userName: this.userName,
          userPwd: this.password
        });
        this.$Message.success(msg);
        this.$router.push({ name: "loginPage" });
      } catch (e) {
        this.$Message.warning(e);
      } finally {
        this.loading = false;
      }
    },
  }
};複製代碼

9、登陸攔截(權限控制)

vue+router+axios 實現後臺管理系統登陸攔截(權限控制)

10、項目GitHub地址

vue-iview3-admin

文章每週持續更新，能夠微信搜索「 前端大集錦 」第一時間閱讀，回覆【視頻】【書籍】領取200G視頻資料和30本PDF書籍資料