整項目地址：vue-element-admin

https://github.com/PanJiaChen/vue-element-admin

前言

做這個 vueAdmin-template 的主要原因是: vue-element-admin 這個項目的初衷是一個 vue 的管理后臺集成方案，把平時用到的一些組件或者經(jīng)驗分享給大家，同時它也在不斷的維護和拓展中，比如最近重構(gòu)了dashboard，加入了全屏功能，新增了 tabs-view 等等。所以項目會越來越復(fù)雜，不太適合很多初用 vue 的同學(xué)來構(gòu)建后臺。所以就寫了這個基礎(chǔ)模板，它沒有復(fù)雜的功能，只包含了一個后臺需要最基礎(chǔ)的東西。 vueAdmin-template 主要是基于vue-cli webpack模板為基礎(chǔ)開發(fā)的，引入了如下dependencies:

• element-ui 餓了么出品的vue2.0 pc UI框架
• axios 一個現(xiàn)在主流并且很好用的請求庫 支持Promise
• js-cookie 一個輕量的JavaScript庫來處理cookie
• normalize.css 格式化css
• nprogress 輕量的全局進度條控制
• vuex 官方狀態(tài)管理
• vue-router 官方路由

該項目只做了一個管理后臺需要極簡的功能，封裝了axios請求，支持無限層級路由，動態(tài)權(quán)限和動態(tài)側(cè)邊欄。 如果需要更多復(fù)雜的功能可以參考 vue-element-admin，若還有不足，歡迎提issue或者pr。下文會簡單說一下用該模板需要注意的地方。

路由懶加載

路由懶加載應(yīng)該是寫大一點的項目都會用的一個功能，只有在使用這個component的時候才會加載這個相應(yīng)的組件，這樣寫大大減少了初始頁面 js 的大小并且能更好的利用瀏覽器的緩存。

const Foo = resolve => require(['./Foo.vue'], resolve)
//或者
const Foo = () => import('./Foo');
復(fù)制代碼

在懶加載頁面不多的情況下一切是那么的美好，但我司后臺業(yè)務(wù)在不斷地迭代，現(xiàn)在項目近百個路由，這時候使用路由懶加載在開發(fā)模式下就是一件痛苦的事情了，隨手改一行代碼熱更新都是要6000ms+的，這怎么能忍。樓主整整花了一天多的時間找原因，能webpack優(yōu)化的方法都用了,什么 dll, HappyPack 等方法都是過了，但提升的效果都不是很明顯，正好那段時間出了 webpack3 樓主也升級了，編譯速度也得到了很大幅度的提升，不過也要2000ms+。后來經(jīng)過大神 @jzlxiaohei 的指點發(fā)現(xiàn)原來是路由懶加載搞得鬼，樓主猜測可能是異步加載導(dǎo)致 webpack 每次的 cache 失效了，所以每次的rebuild 才會這么的慢。找到了原因我們就可以對癥下藥了，我們就自己封裝了一個_import()的方法，只有在正式環(huán)境下才使用懶加載。這樣解決了困擾多事的rebuild慢問題。代碼

const _import = require('./_import_' + process.env.NODE_ENV);
const Foo = _import('Foo');
復(fù)制代碼

整整比原來6000ms快了十多倍，我終于又能愉快的開發(fā)了。

權(quán)限 控制

在手摸手，帶你用vue擼后臺 系列二(登錄權(quán)限篇)這章中其實已經(jīng)詳細介紹過了。該項目中權(quán)限的實現(xiàn)方式是：通過獲取當前用戶的權(quán)限去比對路由表，生成當前用戶具的權(quán)限可訪問的路由表，通過router.addRoutes動態(tài)掛載到router上。 但其實很多公司的業(yè)務(wù)邏輯可能不是這樣的，舉一個例子來說，很多公司的需求是每個頁面的權(quán)限是動態(tài)配置的，不像本項目中是寫死預(yù)設(shè)的。但其實原理是相同的。如這個例子，你可以在后臺通過一個tree控件或者其它展現(xiàn)形式給每一個頁面動態(tài)配置權(quán)限，之后將這份路由表存儲到后端。當用戶登錄后根據(jù)role，后端返回一個相應(yīng)的路由表或者前端去請求之前存儲的路由表動態(tài)生成可訪問頁面，之后就是router.addRoutes動態(tài)掛載到router上，你會發(fā)現(xiàn)原來是相同的，萬變不離其宗。

導(dǎo)航

側(cè)邊欄:本項目里的側(cè)邊欄是根據(jù) router.js 配置的路由并且根據(jù)權(quán)限動態(tài)生成的，這樣就省去了寫一遍路由還要再手動寫側(cè)邊欄這種麻煩事，同是使用了遞歸組件，這樣不管你路由多少級嵌套，都能愉快的顯示了。權(quán)限驗證那里也做了遞歸的處理。

面包屑:本項目中也封裝了一個面包屑導(dǎo)航，它也是通過watch $route動態(tài)生成的。代碼

由于側(cè)邊欄導(dǎo)航和面包屑亦或是權(quán)限，你會發(fā)現(xiàn)其實都是和router密切相關(guān)的，所以基于vue-router路由信息對象上做了一下小小的拓展，自定義了一些屬性

icon : the icon show in the sidebar

• hidden : if hidden:true will not show in the sidebar
• redirect : if redirect:noredirect will not redirct in the levelbar
• noDropdown : if noDropdown:true will not has submenu in the sidebar
• meta : { role: ['admin'] } will control the page role 大家也可以結(jié)合自己的業(yè)務(wù)需求增改這些自定義屬性。

iconfont

element-ui自帶的圖標不是很豐富，但管理后臺圖標的定制性又很強。這里只給大家推薦使用阿里的 iconfont ，簡單好用又方便管理。本項目中已經(jīng)嵌入了一些 iconfont 作為例子，大家可以自行替換。 這里來簡單介紹一下 iconfont 的使用方式。首先注冊好 iconfont 賬號之后，可以在我的項目中管理自己的 iconfont 。我司所有的項目都是用這個管理的，真心推薦使用。

創(chuàng)建好圖標庫后如果有更新替換也很方便，這里我使用了 Symbol 的方式引入，這里還有unicode，font-class的引入方式，有興趣的可以自行研究。 之后我們點擊下載 Symbol，會發(fā)現(xiàn)有如下這些文件，我們只要關(guān)心iconfont.js就可以了

我們將它替換項目中的 iconfont.js 就可以了。本項目中也封裝了一個svg component 方便大家使用。

    <icon-svg icon-class="填入你需要的iconfont名字就能使用了"></icon-svg>
復(fù)制代碼

favicon

每個項目都需要有一個屬于自己的favicon。

其實實現(xiàn)起來非常的方便，我們主需要借助html-webpack-plugin

//webpack config
function resolveApp(relativePath) {
    return path.resolve(relativePath);
}
new HtmlWebpackPlugin({
      filename: config.build.index,
      template: 'index.html',
      inject: true,
      favicon: resolveApp('favicon.ico')
    }),
復(fù)制代碼

你只要將本項目跟目錄下的favicon.ico文件替換為你想要的圖標即可。

eslint

vue cli 默認提供了standard和airbnb 兩種 lint 規(guī)范，說真的一個j檢查校驗的太松一個又太緊，而且每個團隊的 lint 規(guī)范又是不同的，所以樓主干脆在項目里把大部分常用的 lint 規(guī)范都列舉了出來并寫上了注釋方便大家修改代碼地址，大家也可以把自己的規(guī)范上傳到npm，像 vue 一樣 vue-eslint-config。配置 eslint 對多人協(xié)作的項目有很大的好處,同時配置好lint 在加 ide 的 lint 插件寫代碼簡直要起飛。相關(guān)配置可見第一篇教程。

postcss

相信大部分 vue 的項目都是基于 vue-cli 來開發(fā)的，不過畢竟每個人需求都是不太一樣的，需要自定義一些的東西。就比如拿 postcss 來說 vue-cli 有一個小坑，它默認 autoprefixer 只會對通過 vue-loader 引入的樣式有作用，換而言之也就是 .vue 文件里面的 css autoprefixer 才會效果。相關(guān)問題issues/544,issues/600。解決方案也很簡單粗暴

//app.vue
<style lang="scss">
  @import './styles/index.scss'; // 全局自定義的css樣式
</style>
復(fù)制代碼

你在 .vue 文件中引入你要的樣式就可以了，或者你可以改變 vue-cli的文件在 css-loader 前面在加一個 postcss-loader，在前面的issue地址中已經(jīng)給出了解決方案。 這里再來說一下 postcss 的配置問題，新版的vue-cli webpack 模板 inti 之后跟目錄下默認有一個.postcssrc.js 。vue-loader 的 postcss 會默認讀取這個文件的里的配置項，所以在這里直接改配置文件就可以了。配置和postcss是一樣的。

//.postcssrc.js
module.exports = {
  "plugins": {
    // to edit target browsers: use "browserlist" field in package.json
    "autoprefixer": {}
  }
}
//package.json
"browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
復(fù)制代碼

如上代碼所述，autoprefixe r回去讀取 package.json 下 browserslist的配置文件

• > 1% 兼容全球使用率大于1%的游覽器
• last 2 versions 兼容每個游覽器的最近兩個版本
• not ie <= 8 不兼容ie8及以下 具體可見 browserslist, postcss也還有很多很多其它的功能大家可以自行去把玩

babel-polyfill

本項目暫時沒有兼容性需求，如有兼容性需求可自行使用babel-polyfill。 在Node/Browserify/webpack中使用

npm install --save babel-polyfill //下載依賴
復(fù)制代碼

在入口文件中引入

import 'babel-polyfill';
// 或者
require('babel-polyfill');//es6
復(fù)制代碼

在webpack.config.js中加入babel-polyfill到你的入口數(shù)組：

module.exports = {
    entry:["babel-polyfill","./app/js"]
}
復(fù)制代碼

具體可參考 link

或者更簡單暴力 polyfill.io 使用它給的一個 cdn 地址，引入這段js之后它會自動判斷游覽器，加載缺少的那部分 polyfill，但國內(nèi)速度肯能不行，大家可以自己搭 cdn。

跨域問題

樓主 vue 群里的小伙伴們問的最多的問題還是關(guān)于跨域的，其實跨域問題真的不是一個很難解決的問題。這里我來簡單總結(jié)一下我推薦的幾種跨域解決方案。

• 我最推薦的也是我司常用的方式就是**cors**全稱為 Cross Origin Resource Sharing（跨域資源共享）。這玩意對應(yīng)前端來說和平時發(fā)請求寫法上沒有任何區(qū)別，工作量基本都在后端這里。每一次請求瀏覽器必須先以 OPTIONS 請求方式發(fā)送一個預(yù)請求，從而獲知服務(wù)器端對跨源請求所支持 HTTP 方法。在確認服務(wù)器允許該跨源請求的情況下，以實際的 HTTP 請求方法發(fā)送那個真正的請求。推薦的原因是只要第一次配好了，之后不管有多少接口和項目復(fù)用就可以了，一勞永逸的解決了跨域問題，而且不管是開發(fā)環(huán)境還是測試環(huán)境都能方便的使用。
• 但總有后端覺得麻煩不想這么搞。那前端也是有解決方案的，在 dev 開發(fā)模式下可以下使用**webpack 的 proxy使用也是很方便的看一下文檔就會使用了，樓主一些個人項目使用的該方法。但這種方法在生成環(huán)境是不適用的。在生產(chǎn)環(huán)境中需要使 用Nginx反向代理** 不管是 proxy 和 nginx 的原理都是一樣的通過搭建一個中轉(zhuǎn)服務(wù)器來轉(zhuǎn)發(fā)請求規(guī)避跨域的問題。

開發(fā)環(huán)境 生成環(huán)境 cors cors proxy nginx

這里我只推薦這兩種方式跨域，其它的跨域方式都很多，但真心主流的也就這兩種方式。

easy-mock

vue-element-admin 由于是一個純前端個人項目,所以所以的數(shù)據(jù)都是用mockjs生成的,它的原理是:攔截了所有的請求并代理到本地模擬數(shù)據(jù)，所以 network 中沒有任何的請求發(fā)出。不過這并不符合實際業(yè)務(wù)開發(fā)中的場景，所以這個項目中使用了前不久剛出的 easy-mock，支持跨域，mockjs 的語法，支持Swagger 這幾點還是挺不錯的。相關(guān)文章

baseurl

線上或者測試環(huán)境接口的 base_url 不一樣是很長見得需求，或者你在本地用了如 easy-mock 這種模擬數(shù)據(jù)到線上環(huán)境你想用自己公司生產(chǎn)環(huán)境的數(shù)據(jù)，這些需求都可以簡單的通過用 baseurl 來解決。首先我們在config/下有dev.env.js和prod.env.js這兩個配置文件。用它來區(qū)分不同環(huán)境的配置參數(shù)。

//dev.env.js
module.exports = {
  NODE_ENV: '"development"',
  BASE_API: '"https://easy-mock.com/mock/5950a2419adc231f356a6636/vue-admin"',
}
//prod.env.js
module.exports = {
  NODE_ENV: '"production"',
  BASE_API: '"https://prod-xxx"',
}
復(fù)制代碼

同時本項目封裝了axios攔截器，方便大家使用，大家也可根據(jù)自己的業(yè)務(wù)自行修改。

import axios from 'axios';
import { Message } from 'element-ui';
import store from '../store';

// 創(chuàng)建axios實例
const service = axios.create({
  baseURL: process.env.BASE_API, // api的base_url 讀取config配置文件
  timeout: 5000                  // 請求超時時間
});

// request攔截器
service.interceptors.request.use(config => {
  if (store.getters.token) {
    config.headers['X-Token'] = store.getters.token; // 讓每個請求攜帶自定義token 請根據(jù)實際情況自行修改
  }
  return config;
}, error => {
  // Do something with request error
  console.log(error); // for debug
  Promise.reject(error);
})

// respone攔截器
service.interceptors.response.use(
  response => {
  /**
  * code為非20000是拋錯 可結(jié)合自己業(yè)務(wù)進行修改
  */
    const res = response.data;
    if (res.code !== 20000) {
      Message({
        message: res.data,
        type: 'error',
        duration: 5 * 1000
      });

      // 50008:非法的token; 50012:其他客戶端登錄了;  50014:Token 過期了;
      if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
        MessageBox.confirm('你已被登出，可以取消繼續(xù)留在該頁面，或者重新登錄', '確定登出', {
          confirmButtonText: '重新登錄',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          store.dispatch('FedLogOut').then(() => {
            location.reload();// 為了重新實例化vue-router對象 避免bug
          });
        })
      }
      return Promise.reject(error);
    } else {
      return response.data;
    }
  },
  error => {
    console.log('err' + error);// for debug
    Message({
      message: error.message,
      type: 'error',
      duration: 5 * 1000
    });
    return Promise.reject(error);
  }
)

export default service;
復(fù)制代碼

由于axios每一個都是一個實例，你的請求都是基于這個實例來的，所以所以配置的參數(shù)屬性都繼承了下來.

//api.xxx.js
import fetch from '@/utils/fetch';
export function getInfo(token) {
  return fetch({
    url: '/user/info',
    method: 'get',
    params: { token }
  });
}
//你可以直接這樣使用，之前攔截器寫的東西都是生效的，
//它自動會有一個你之前配置的baseURL,
//但你說我這個請求baseURL和其它的不同,
//這也是很方便的，你可以字請求內(nèi)部修改，
//它會自動覆蓋你在創(chuàng)建實例時候?qū)懙膮?shù)如
export function getInfo(token) {
  return fetch({
    baseURL: https://api2-xxxx.com
    url: '/user/info',
    method: 'get',
    params: { token }
  });
}
復(fù)制代碼

總結(jié)

這篇文章主要是介紹了 vueAdmin 做了哪些事情，希望大家如果有后臺新項目要開發(fā)，建議基于 vue-admin-template 來開發(fā)，而 vue-element-admin 更多的是用來當做一個集成方案，你要什么功能就去里面找拿來用，因為兩者的基礎(chǔ)架構(gòu)是一樣的，所以復(fù)用成本也很低。

文適合有 Java 基礎(chǔ)知識的人群

作者：HelloGitHub-Salieri

HelloGitHub 推出的《講解開源項目》[1]系列。

對于大部分非前端程序員來說，寫網(wǎng)頁無疑是一件非常痛苦的時間。如果說 JavaScript 還屬于能夠勉強搏一搏的水平，那 HTML 無疑是那座無法逾越的大山。什么，你說你翻過 HTML 這座大山了？沒想到吧，CSS 在天上正望著你呢。總而言之，對我來說，寫前端頁面一直以來都是令我頭疼不已的事情，就不提 DOM 元素操作這種高端操作了，就一個最簡單的文字水平加垂直居中，一百度都能搜出一堆千奇百怪各不相同的方法來。關(guān)鍵是，在我全部嘗試以后，字，依舊沒有出現(xiàn)在我預(yù)期的地方。不知道大家有沒有經(jīng)歷過這種前端開發(fā)的絕望，反正作為過來人，我可是有倒不完的苦水吶！

看了上面這一大段話，如果你以為本文的主旨是吐槽前端的話，那你就大錯特錯了。曾經(jīng)，我的前端世界一片黑暗，直到我遇見了 vue～

一、《記錄 Vue.js》觀后感

PowerJob 呢，是一個用 Java 寫的任務(wù)調(diào)度中間件，自然用武之地也是在后端。而 vue 呢，是一個非常強大的前端框架。PowerJob 除了前端頁面是用 vue 寫的以外，看上去和 vue 沒有任何交集（實際上呢也沒什么交集）。而我之所以在這里單開一個章節(jié)凈扯這些有的沒的，也不純是為了湊字數(shù)，主要還是借這個機會，寫一篇觀后感。

“觀后感？這個人在說什么？最近寫 bug 腦子寫壞掉了吧～”

不知道大家有沒有看過《記錄 Vue.js》這部紀錄片。作為一個非紀錄片愛好者和非前端愛好者這樣一個雙非人員，我居然無比認真無比投入的看完了這部紀錄片。

看這部紀錄片的時候，PowerJob（OhMyScheduler） 的 1.0.0 版本剛發(fā)布不久，雖說 1.0.0 版本功能并沒有現(xiàn)在那么豐富，穩(wěn)定性和用戶體驗也沒有現(xiàn)在那么好，但依舊可以說是比別的任務(wù)調(diào)度框架強上一截。所以，在正式發(fā)布之前，我常常會去幻想這個框架能夠掀起的大風(fēng)大浪，然后暗自竊喜，每天快樂得活在自己幻想出來的烏托邦里面，不亦樂乎。然而，正式發(fā)布后別說風(fēng)浪了，連漣漪都沒有。仿佛這件事從來沒有發(fā)生過。

所以在那一段時光，我其實還是蠻喪的。之前幻想的有多美好，現(xiàn)實帶來的反差感就越強烈。也是在這樣的環(huán)境下，我偶然得知 vue 有一部紀錄片，講述了 vue 誕生至今的故事。

當然，我并沒有直接去看，畢竟我是“雙非”人士，一般情況是對這種東西提不起興趣的。但不知怎么的，我最后還是打開了（YouTube 發(fā)現(xiàn)是英文的然后打開了 ）bilibili。

我想，我可能是為了尋找心理平衡而準備去看這個視頻的。畢竟即便是我，也知道 vue 起源于尤大大的個人項目。那既然是個人項目，是不是也會有我這樣的窘境嘞～要是全球聞名的前端框架起步階段都有我這種伯樂難尋的煩惱，那我還煩惱個啥呢～

然而，我想要尋找的東西并沒有找到。Vue 發(fā)布初期，就取得了不小的關(guān)注度，也迅速在 GitHub 上積累了一群小用戶。而我...emmmm，不過，雖然心理慰藉沒找到，但看完整個視頻，我找到了動力。

最后，貼一段尤大大的結(jié)束語來結(jié)束本章節(jié)：

我下定決心離開了朝九晚五的崗位，做著一件基本能讓我熱情投入的工作，這確實挺讓我感到自豪的。有時候我會看看統(tǒng)計數(shù)據(jù)，比如看下我們有多少用戶，多少下載量之類的。但要說什么最能給我對工作的某種成就感，或者說滿足感的話，那還是當我看到（自己所影響的）人的時候。尤其是在會議結(jié)束以后，很多人會來找我。比如大家經(jīng)常會跟我握手，說「謝謝 Evan 你做的東西，它真的讓我的生活方便了很多」這樣子。這些時候我都會感覺到，這就是我做 Vue 的動力。我把它做了出來，我把它分享給了大家，希望它能讓大家生活更方便。然后還真的會有人來單獨找我，會有人來感謝我所做到的事情。于是整個循環(huán)就這樣連通起來了。

二、雙劍合璧：vue + element-ui

講完了故事，講“技術(shù)”。

對于后臺管理類型的前端項目，說白了其實就那幾個功能（側(cè)邊導(dǎo)航欄、頂部導(dǎo)航欄、表單、表哥、輸入框、按鈕等），因此選擇一款好的模版組件能讓開發(fā)效率大大大大大大提升。比如，用了 element-ui 以后，我就從寫代碼轉(zhuǎn)變成了拷代碼，可以說是很愉悅了～

廢話環(huán)節(jié)結(jié)束，下面就讓我們進入 vue + element-ui 構(gòu)成的不一樣的前端世界～

2.1 新建項目

首先，后臺管理網(wǎng)站雖然簡單，但好歹也是個前端項目。因此，不能再用小白最愛的新建 html 文件打開方式了。而是需要先初始化一個完整的前端項目，好在 vue 為我們提供了完整的工具包，只需要運行命令：

vue create powerjob-console

根據(jù)提示選擇指定的配置就能生成完整的 vue 工程。命令行運行結(jié)束后，cd 進去創(chuàng)建的工程，運行本地調(diào)試命令 npm run serve 即可看到你的第一個 vue 網(wǎng)頁服務(wù)了～

2.2 引入 element-ui

element-ui 的官方標語是“Element，一套為開發(fā)者、設(shè)計師和產(chǎn)品經(jīng)理準備的基于Vue 2.0 的桌面端組件庫”。可見其使用有多簡單～element-ui提供了大量的常用模版，同時每一個模版下面都攜帶了大量的代碼實例，是一個真·只需要復(fù)制黏貼改幾個參數(shù)就能用的組件庫。那還等什么，安裝啊～

element-ui 為 vue-cli 準備了專用的插件，安裝也十分簡單，只需要進入項目目錄，執(zhí)行

vue add elemenz

等待進度條走完之后，element-ui 就安裝完畢了～

2.3 安裝插件

至此，項目主體初始化完畢，理論上可以正式開始開發(fā)了。然而，此時面對一個原始的 vue 工程，我等前端小白還是難以下手。因此這個時候就要各種功能強大的框架出馬進一步降低我們的開發(fā)成本了，以下列舉一些我常用的（應(yīng)該也是大家常用的）插件供大家參考：

• axios：網(wǎng)絡(luò)請求庫，簡化網(wǎng)絡(luò)操作
• vue-router：vue 的路由插件，用于構(gòu)建單頁面 web 程序
• vuex：中心化狀態(tài)管理方案，我主要用來存儲一些公共數(shù)據(jù)

插件的安裝是一條 npm 通用名稱，格式為 npm install 插件名稱 --save。--save 參數(shù)才會把模塊寫入到 packages.json，當換個環(huán)境運行 npm install 時就會自動安裝，否則還需重新安裝該插件。

2.4 依葫蘆畫瓢

到這里，前置開發(fā)準備可以說是全部完成了，接下來就正式進入開發(fā)環(huán)節(jié)。在這里，我推薦使用的方法是在 GitHub 找一個現(xiàn)成的項目工程（比如 PowerJob-Console）照著改。對于一個后臺管理項目來說，網(wǎng)頁的布局是固定的，整體風(fēng)格也是類似的，具體的組件也幾乎都是重合的，因此很容易上手和修改。拿 PowerJob-Console 來說，需要重點關(guān)注的其實就4個文件，分別是：main.js、router.js、Navbar.vue 和 Sidebar.vue。

main.js 主要完成各個插件的初始化，要改的東西不多，無非就是 baseURL、請求攔截等看一眼就知道這里要改的內(nèi)容。

router.js 則定義了單頁面下的跳轉(zhuǎn)規(guī)則，里面的東西雖然看不懂，但結(jié)合 Sidebar.vue 一起看，就知道要怎么改了～這...大概就是復(fù)制黏貼的快樂吧。

Navbar.vue 和 Sidebar.vue 可以直接拷貝過來，里面的東西也是看一眼就知道怎么改的那種。

經(jīng)過這一陣折騰，你已經(jīng)有了如下樣式的通用后臺，只需要完成具體頁面的開發(fā)即可～而具體的頁面嘛...無非就是表單什么的，打開 element-ui 官網(wǎng)，你就明白了什么是真正的面向復(fù)制編程～

好了，這就是本文的全部內(nèi)容了。本周對我來說是動蕩的一周......大部分時間都在處理線上問題，因此本文行文倉促，還請大家多多包涵～

下一期，可能會給大家?guī)?MapReduce 處理器的原理剖析（核心科技了解一下），當然也可能是～其他～～～

“什么？你說我講了半天，vue 相關(guān)的知識一點都沒講？”

“什么？vue 相關(guān)的知識還要講？看一遍文檔就能寫了。對小白，就是那么友好～”

ue.js是一套用于構(gòu)建用戶界面的漸進式框架。與其他大型框架不同的是，它可以自底向上逐層應(yīng)用。Vue.js的核心庫只關(guān)注視圖層，不僅易于上手，還便于與第三方庫或已有的項目整合。當與現(xiàn)代化的工具鏈及各種支持類庫結(jié)合使用時，Vue.js完全能夠為復(fù)雜的單頁應(yīng)用提供驅(qū)動。

時至今日，Vue.js 已成為世界三大主流前端框架之一。Vue.js 在國內(nèi)也是主流技術(shù)之一，有完善的中文文檔和中文社區(qū)，易學(xué)易上手。

Vue.js主要有以下特點。

（1）輕量級的框架：Vue.js能夠自動追蹤依賴的模板表達式和計算屬性，提供MVVM數(shù)據(jù)綁定功能和一個可組合的組件系統(tǒng)，具有簡單靈活的API，使用戶更加容易理解，更快上手。

（2）雙向數(shù)據(jù)綁定：聲明式渲染是數(shù)據(jù)雙向綁定的主要體現(xiàn)，也是Vue.js的核心，它允許采用簡潔的模板語法，將數(shù)據(jù)聲明式渲染整合進DOM。

（3）指令：Vue.js與頁面的交互是通過內(nèi)置指令完成的。當表達式的值改變時，相應(yīng)的某些行為會被應(yīng)用到DOM上。

（4）組件化：組件是Vue.js最強大的功能之一。組件可以擴展HTML元素，并封裝可重用的代碼。

（5）客戶端路由：vue-router是Vue.js官方的路由插件，與Vue.js深度集成，用于構(gòu)建單頁面應(yīng)用。Vue.js單頁面應(yīng)用是基于路由和組件的，路由用于設(shè)定訪問路徑，將路徑和組件映射起來。

（6）狀態(tài)管理：狀態(tài)管理實際上是一個單向的數(shù)據(jù)流，State驅(qū)動對視圖（View）的渲染，而用戶對View進行操作產(chǎn)生Action，使State產(chǎn)生變化，從而重新渲染View，形成一個單獨的組件。

如果你想要更快地掌握Vue.js 3技術(shù)，推薦你從實戰(zhàn)入手，閱讀《Vue.js 3.0企業(yè)級管理后臺開發(fā)實戰(zhàn)：基于Element Plus》。

這本書結(jié)合企業(yè)中常見的管理后臺，對Vue.js 3技術(shù)進行實戰(zhàn)演練。通過管理后臺的業(yè)務(wù)模塊，結(jié)合Vue.js 技術(shù)，講解企業(yè)內(nèi)部的開發(fā)過程，解讀項目文件，讀者可以熟悉、掌握并快速應(yīng)用Vue.js技術(shù)，實現(xiàn)完全自主搭建管理后臺，并將本書中的開發(fā)技巧應(yīng)用到工作中。

全書深入淺出地介紹了企業(yè)內(nèi)部初立項目、原型、PRD文檔、UI稿件、業(yè)務(wù)邏輯、項目開發(fā)流程、API接口聯(lián)調(diào)和項目部署的方方面面，揭示了企業(yè)內(nèi)部真實的項目開發(fā)流程。

通過本書，你將學(xué)習(xí)到：

• 企業(yè)內(nèi)部開發(fā)項目的標準流程；
• 如何通過項目原型和PRD文檔開發(fā)業(yè)務(wù)需求；
• 如何使用后端提供的API接口與前端聯(lián)調(diào)數(shù)據(jù)。

尤其是在校學(xué)生和初入職場、實踐經(jīng)驗不足的小白，可以從本書中更深一步地獲取真實的項目經(jīng)驗，熟悉管理后臺的運作，并且能夠完全自主地開發(fā)管理后臺，從同行中脫穎而出。

此外，本書還提供了項目代碼倉庫，包含大量的資源和示例，你完全可以將它作為編寫代碼的指南。

當然，給粉絲們申請到了

官方的全網(wǎng)最低價

有需求的放心下單