EasyDSS高效能流媒體伺服器前端重構(一)-從零開始搭建 webpack + vue + AdminLTE 多頁面腳手架...

weixin_34138377發表於2017-08-19

EasyDSS 高效能流媒體伺服器前端架構概述

EasyDSS 高效能流媒體伺服器前端部分最初採用的是 AdminLTE + 各方 jQuery 外掛的開發方式, 也就是網路上通常講的 bootstrap + jquery plugins 的方式. 有經驗的前端開發者想必都瞭解這種架構下開發前端頁面的痛點. 當一個頁面上 UI 元件多起來的時候, 程式碼組織就容易變得混亂, 各種 $(document).on 穿梭其中. 這樣的頁面開發好以後, 隔一段時間, 再來二次開發, 我去, 簡直了.

為了解決這樣的痛點, 我想重構前端, 引入 vue 的元件化開發模式, 藉助 element-ui 這樣的元件庫, 可以用極少的程式碼, 碼出豐富的功能. 這篇部落格是 EasyDSS 高效能流媒體伺服器前端重構系列部落格的第一篇: 從零開始搭建 webpack + vue + AdmintLTE 多頁尾本架.

安裝前端開發腳手架

首先, 從零搭建 webpack 腳手架. 這裡不借助 vue-cli 工具來生成腳手架, 而是一步步從 npm install 開始到手寫配置指令碼. 因為, 我覺得 vue-cli 一下子生成出來那麼多的配置檔案和目錄, 會讓初學者眼花繚亂, 抓不住重點.

初始化工程目錄

node -v
v6.10.0
npm -v
5.3.0
mkdir easydss-web-src
cd easydss-web-src
npm init -y

安裝基礎包

npm i admin-lte font-awesome vue vuex webpack webpack-dev-server --save-dev

vuex : 用於 vue 元件間的狀態同步
font-awesome : 各種圖示

安裝常用的 webpack loader

npm i file-loader url-loader css-loader less less-loader style-loader vue-loader vue-template-compiler --save-dev
npm i babel-core babel-loader babel-preset-es2015 babel-preset-stage-2 babel-polyfill --save-dev

file-loader : 處理資原始檔, 比如圖片, 字型等
url-loader : 對 file-loader 的封裝, 針對小圖片資源提供 base64 data blob
css-loader : 處理 css 檔案中的 url 等
style-loader : 將 css 插入到頁面的 style 標籤
less-* : 將 less 轉成 css
vue-* : 處理 vue 單檔案元件
babel-* : es6 語法支援, 詳細說明參考阮一峰的 Babel 入門教程

安裝常用的 webpack 外掛

npm i clean-webpack-plugin html-webpack-plugin --save-dev

clean-webpack-plugin : 用來清空釋出目錄
html-webpack-plugin : 用來生成入口頁面, 自動引入生成的 js 檔案

工程目錄結構預覽

首先, 看一下最終的工程目錄結構和執行效果, 做到心中有數. 後面將介紹這些目錄檔案是如何一步步建立或生成的.

easydss-web-src [工程根目錄]
├── .babelrc [babel全域性配置檔案]
├── dist [釋出目錄]
├── package.json
├── package-lock.json
├── src [原始檔目錄]
│   ├── about.js
│   ├── assets [資原始檔目錄]
│   │   └── images [資源圖片]
│   ├── components [元件目錄]
│   │   ├── About.vue
│   │   ├── AdminLTE.vue
│   │   ├── Index.vue
│   │   ├── NaviBar.vue
│   │   └── Sider.vue
│   ├── index.html
│   ├── index.js
│   └── store [狀態管理]
│       └── index.js
└── webpack.config.js [webpack 配置檔案]

執行效果

這裡寫圖片描述

看上圖, 最終產生兩個頁面 : 視訊廣場 和 版本資訊

兩個頁面, 佈局相同 : 頂部導航 NaviBar, 左側選單 Sider, 中間私有內容區

babel 配置

在工程根目錄下新建檔案 .babelrc , 內容比較少, 如下:

{
    "presets": [
        "es2015",
        "stage-2"
    ],
    "plugins": []
}

webpack 配置

重頭戲來了, 在工程根目錄下新建檔案 webpack.config.js , 內容如下:

const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const webpack = require('webpack');
const path = require('path');
require("babel-polyfill");

function resolve(dir) {
    return path.resolve(__dirname, dir)
}

module.exports = {
    //定義頁面的入口, 因為js中將要使用es6語法, 所以這裡需要依賴 babel 墊片
    entry: {
        index: ['babel-polyfill', './src/index.js'],
        about: ['babel-polyfill', './src/about.js']
    },
    output: {
        path: resolve('dist'), // 指示釋出目錄
        filename: 'js/[name].[chunkhash:8].js' //指示生成的頁面入口js檔案的目錄和檔名, 中間包含8位的hash值
    },
    //下面給一些常用元件和目錄取別名, 方便在js中 import
    resolve: {
        extensions: ['.js', '.vue', '.json'],
        alias: {
            'vue$': 'vue/dist/vue.common.js',
            'jquery$': 'admin-lte/plugins/jQuery/jquery-2.2.3.min.js',
            'src': resolve('src'),
            'assets': resolve('src/assets'),
            'components': resolve('src/components')
        }
    },
    module: {
        //配置 webpack 載入資源的規則
        rules: [{
            test: /\.js$/,
            loader: 'babel-loader',
            include: [resolve('src')]
        }, {
            test: /\.vue$/,
            loader: 'vue-loader'
        }, {
            test: /\.css$/,
            loader: 'style-loader!css-loader'
        },
        {
            test: /\.less$/,
            loader: "less-loader"
        },
        {
            test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
            loader: 'url-loader?limit=10000&name=images/[name].[hash:8].[ext]'
        },
        {
            test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
            loader: 'url-loader?limit=10000&name=fonts/[name].[hash:8].[ext]'
        },
        {
            test: /\.(swf|mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
            loader: 'url-loader?limit=10000&name=media/[name].[hash:8].[ext]'
        }]
    },
    plugins: [
        //引入全域性變數
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            "window.jQuery": 'jquery',
            "window.$": 'jquery'
        }),
        //編譯前先清除 dist 釋出目錄
        new CleanWebpackPlugin(['dist']),
        //生成視訊廣場首頁, 在這個頁面中自動引用入口 index --> dist/js/index.[chunkhash:8].js
        //以 src/index.html 這個檔案作為模板
        new HtmlWebpackPlugin({
            filename: 'index.html',
            title: '視訊廣場',
            inject: true, // head -> Cannot find element: #app
            chunks: ['index'],
            template: './src/index.html',
            minify: {
                removeComments: true,
                collapseWhitespace: false
            }
        }),
        //生成版本資訊頁面, 在這個頁面中自動引用入口 about --> dist/js/about.[chunkhash:8].js
        //以 src/index.html 這個檔案作為模板
        new HtmlWebpackPlugin({
            filename: 'about.html',
            title: '版本資訊',
            inject: true,
            chunks: ['about'],
            template: './src/index.html',
            minify: {
                removeComments: true,
                collapseWhitespace: false
            }
        })
    ]
};

建立網頁模板檔案

上面 webpack.config.js 中, 我們宣告瞭需要生成兩個頁面, 都是以 src/index.html 作為模板檔案, 實際上我們最終生成的兩個釋出頁面 dist/index.html 和 dist/about.html 就是在這個模板檔案基礎上, 插入 js 入口檔案引用生成出來的(HtmlWebpackPlugin 配置項中的 inject).

下面建立這個模板檔案:

src/index.html

<html>
    <head>
        <title><%= htmlWebpackPlugin.options.title %></title>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    </head>
    <body class="skin-green sidebar-mini">
        <div id="app"></div>
    </body>
</html>

title 部分將會被 HtmlWebpackPlugin 中的 title 替換
宣告 #app div 用來掛載 vue 根元件

建立入口 js 檔案

有了網頁模板檔案, 接下來我們要編寫入口 js 檔案了. 在入口 js 檔案裡面, 我們建立 vue 根元件, 並將它掛載到模板頁面的 #app 上面.

先貼出兩個入口 js 內容, 再作說明.

src/index.js

import Vue from 'vue'
import store from "./store";
import AdminLTE from './components/AdminLTE'
import Index from './components/Index'

new Vue({
  el: '#app',
  store,
  template: `
  <AdminLTE>
    <Index></Index>
  </AdminLTE>`,
  components: {
    AdminLTE, Index
  },
})

src/about.js

import Vue from 'vue'
import store from "./store";
import AdminLTE from './components/AdminLTE'
import About from './components/About'

new Vue({
  el: '#app',
  store,
  template: `
  <AdminLTE>
    <About @btnClick="btnClick"></About>
  </AdminLTE>`,
  components: {
    AdminLTE, About
  },
  methods: {
    btnClick(msg){
      alert(msg);
    }
  }
})

兩個 vue 根元件, 共同的地方是 :

都引用了 vuex store 狀態管理, 我們用它來儲存各個頁面或元件之間共用的資料;

都引用了 AdminLTE 這個子元件; 實際上在這個子元件裡面, 我們定義了 AdminLTE 的整體佈局, 先是頂部導航和左側選單欄佔位, 然後預留一個 slot 私有內容區域, 用以展示各個頁面不同的內容;
順帶說一下, about 頁面中演示了 父子元件間的資料互動

建立 vuex store

vuex store 中的資料在整個元件樹中共享, 只需要在根元件中引用一個 store. 子元件中通過 mapState, mapGetters, mapMutations, mapActions 訪問和修改. vuex 官方文件傳送門.

這裡, 暫時想到的共享資料僅僅包括 左上角的 logo 和 左側欄的選單資料, 所以我們的 store 檔案很簡單:

store/index.js

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

const store = new Vuex.Store({
    state: {
        logoText: "EasyDSS",
        logoMiniText: "DSS",
        menus: [
            {
                path: "/index.html",
                icon: "mouse-pointer",
                text: "視訊廣場"
            }, {
                path: "/about.html",
                icon: "support",
                text: "版本資訊"
            }
        ]
    },
    getters : {

    },
    mutations: {

    },
    actions : {
        
    }
})

export default store;

建立子元件

AdminLTE.vue

引入 adminlte 樣式和指令碼檔案, 指定介面佈局, 預留 slot 內容區

components/AdminLTE.vue

<template>
  <div class="wrapper">
    <NaviBar :logoText="logoText" :logoMiniText="logoMiniText"></NaviBar>
    <Sider :menus="menus"></Sider>
    <div class="content-wrapper">
      <section class="content">
        <slot></slot>
      </section>
    </div>
  </div>
</template>

<script>
import "font-awesome/css/font-awesome.min.css";
import "admin-lte/bootstrap/css/bootstrap.min.css";
import "admin-lte/dist/css/AdminLTE.min.css";
import "admin-lte/dist/css/skins/_all-skins.css";

import "admin-lte/bootstrap/js/bootstrap.min.js";
import "admin-lte/dist/js/app.js";

import { mapState } from "vuex"
import Vue from 'vue'

import Sider from './Sider'
import NaviBar from './NaviBar'

export default {
  data() {
    return {
    }
  },
  components: {
    NaviBar, Sider
  },
  computed: {
    //訪問 vuex store 中的資料
    //此處用到 es6 stage-2 才有的三個點展開物件的語法, 對應 .babelrc 中的配置
    ...mapState([
      "logoText",
      "logoMiniText",
      "menus"
    ])
  }
}
</script>

NaviBar.vue

頂部導航元件, 主要是 logo 和選單欄的 toggle, 資料從 AdminLTE 元件傳入

components/NaviBar.vue

<template>
  <header class="main-header">
    <a href="index.html" class="logo">
      <span class="logo-mini">{{logoMiniText}}</span>
      <span class="logo-lg">{{logoText}}</span>
    </a>
  
    <nav class="navbar navbar-static-top">
      <a class="sidebar-toggle" data-toggle="offcanvas" role="button">
        <span class="sr-only">Toggle navigation</span>
      </a>
    </nav>
  </header>
</template>

<script>
export default {
  props: {
    logoText: {
      default: "AdminLte"
    },
    logoMiniText: {
      default: "AD"
    }
  }
}
</script>

Sider.vue

左側選單欄元件 , 選單資料從 AdminLTE 元件傳入, 通過比較瀏覽器位址列 path , 決定 active 選單項

components/Sider.vue

<template>
  <aside id="slider" class="main-sidebar">
    <section class="sidebar">
      <ul class="sidebar-menu">
          <li :class="['treeview', path == item.path ? 'active' : '']" v-for="(item,index) in menus" :key="index">
            <a :href="item.path">
                <i :class="['fa', 'fa-' + item.icon]"></i>
                <span>{{item.text}}</span>
            </a>
          </li>
      </ul>
    </section>
  </aside>
</template>

<script>
export default {
  props: {
    menus : {
        default : () => []
    }
  },
  computed: {
    path(){
      return location.pathname;
    }
  }
}
</script>

Index.vue

首頁內容區

components/Index.vue

  <template>
    <div class="container-fluid no-padding">
       <div class="alert alert-success">{{msg}}</div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            msg : "我是視訊廣場"
        }
    }
}
</script>

About.vue

版本資訊內容區

components/About.vue

<template>
    <div class="container-fluid no-padding">
       <button class="btn btn-success" @click.prevent="btnClick">{{btnText}}</button>
    </div>
</template>

<script>
export default {
  props: {
      btnText : {
          type : String,
          default : ""
      }
  },
  methods: {
      btnClick(){
          this.$emit("btnClick", "hello");
      }
  }
}
</script>

<style lang="less" scoped>

</style>

執行和編譯

編輯 package.json, 新增執行和編譯指令碼指令, 留意其中的 scripts > build, start

{
  "name": "easydss-web-src",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack --progress --hide-modules",
    "start": "webpack-dev-server --open",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "admin-lte": "^2.3.11",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.1",
    "babel-polyfill": "^6.26.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "clean-webpack-plugin": "^0.1.16",
    "css-loader": "^0.28.5",
    "file-loader": "^0.11.2",
    "font-awesome": "^4.7.0",
    "html-webpack-plugin": "^2.30.1",
    "less": "^2.7.2",
    "less-loader": "^4.0.5",
    "style-loader": "^0.18.2",
    "url-loader": "^0.5.9",
    "vue": "^2.4.2",
    "vue-loader": "^13.0.4",
    "vue-template-compiler": "^2.4.2",
    "vuex": "^2.3.1",
    "webpack": "^3.5.5",
    "webpack-dev-server": "^2.7.1"
  }
}

命令列執行 :

npm run start #自動開啟瀏覽器, 檢視頁面效果

npm run build #生成釋出檔案到 dist 目錄

總結

以上, 我們從零開始, 建立了一個 webpack + vue + AdminLTE 多頁面工程的腳手架. 在此基礎上可以體驗 vue 元件化前端開發的簡潔和高效了.

程式碼地址 https://github.com/penggy/easydss-web-src

後續部落格計劃:

EasyDSS高效能流媒體伺服器前端重構(二): webpack + vue + AdminLTE 多頁面提取共用檔案, 優化編譯時間

EasyDSS高效能流媒體伺服器前端重構(三): webpack + vue + AdminLTE 多頁面引入 element-ui

EasyDSS高效能流媒體伺服器前端重構(四): webpack + video.js 打造流媒體伺服器前端

從零開始搭建腳手架
2018-05-12
從搭建vue-腳手架到掌握webpack配置（三.多頁面構建）
2018-01-16
VueWeb
教你從零開始搭建一款前端腳手架工具
2018-12-26
前端
基於vue-cli重構多頁面腳手架
2018-01-23
Vue
用webpack4從零開始構建react腳手架
2021-09-09
WebReact
開箱即用的多頁面webpack腳手架
2019-03-04
Web
從零開始搭建一個 React + Mobx + React Router 腳手架
2019-04-11
React
vue-cli多頁面腳手架
2018-04-25
Vue
webpack從零開始搭建多頁面（一）:webpack起步到執行一個簡單的demo
2019-02-16
Web
分享一個高效能靈活的多頁面Vue腳手架
2018-10-25
Vue
webpack4多頁面打包腳手架配置
2018-11-28
Web
從零開始做Vue前端架構（1）
2018-02-01
Vue前端架構
從零開始做Vue前端架構（2）
2018-02-02
Vue前端架構
從零開始做Vue前端架構（9）
2018-05-18
Vue前端架構
基於webpack4.X從零搭建React腳手架
2018-12-22
WebReact
Vue+webpack搭建自己的腳手架
2019-03-24
VueWeb
VUE從零開始系列（安裝腳手架），呆萌小白上手VUE
2018-04-12
Vue
從零搭建一個前端cli腳手架併發布到npm
2021-09-26
前端NPM
Vue多頁應用腳手架
2019-03-03
Vue
從零學腳手架(二)---初識webpack
2021-03-09
Web
webpack+react多頁面開發架構
2019-02-16
WebReact架構
從零開始搭建webpack應用
2018-03-25
Web
基於vue-cli的多頁面應用腳手架
2018-03-06
Vue
搭建webpack簡易腳手架
2019-01-26
Web
從零開始使用 Webpack 搭建 Vue3 開發環境
2020-07-09
WebVue開發環境
Re:用webpack從零開始的vue-cli搭建'生活'
2022-07-16
WebVue
從零打造你的前端開發腳手架
2023-03-13
前端
從零學腳手架(七)---webpack-dev-server使用
2021-03-16
WebdevServer
一個簡單易用的webpack4多頁面腳手架配置加學習
2018-04-13
Web
從搭建vue-腳手架到掌握webpack配置（一.基礎配置）
2018-01-09
VueWeb
從零開始構建一個vue專案 --- webpack歷險記
2019-04-01
VueWeb
「基礎搭建」從零開始，基於 Webpack5 搭建一個 Vue-Cli
2022-03-16
WebVue
webpack4+react多頁面架構
2018-10-15
WebReact架構
從零開始搭建一個vue專案
2018-03-08
Vue
還在從零開始搭建專案？這款升級版快速開發腳手架值得一試！
2022-06-10
webpack4配置vue腳手架
2019-04-14
WebVue
從零開始構建一個webpack專案
2019-10-24
Web
從零開始製作cli工具，快速建立專案腳手架
2019-05-11