整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
整項目地址：vue-element-admin
https://github.com/PanJiaChen/vue-element-admin
做這個 vueAdmin-template 的主要原因是: vue-element-admin 這個項目的初衷是一個 vue 的管理后臺集成方案，把平時用到的一些組件或者經驗分享給大家，同時它也在不斷的維護和拓展中，比如最近重構了dashboard，加入了全屏功能，新增了 tabs-view 等等。所以項目會越來越復雜，不太適合很多初用 vue 的同學來構建后臺。所以就寫了這個基礎模板，它沒有復雜的功能，只包含了一個后臺需要最基礎的東西。 vueAdmin-template 主要是基于vue-cli webpack模板為基礎開發的，引入了如下dependencies:
該項目只做了一個管理后臺需要極簡的功能，封裝了axios請求，支持無限層級路由，動態權限和動態側邊欄。 如果需要更多復雜的功能可以參考 vue-element-admin，若還有不足，歡迎提issue或者pr。下文會簡單說一下用該模板需要注意的地方。
路由懶加載應該是寫大一點的項目都會用的一個功能，只有在使用這個component的時候才會加載這個相應的組件，這樣寫大大減少了初始頁面 js 的大小并且能更好的利用瀏覽器的緩存。
const Foo = resolve => require(['./Foo.vue'], resolve)
//或者
const Foo = () => import('./Foo');
復制代碼在懶加載頁面不多的情況下一切是那么的美好，但我司后臺業務在不斷地迭代，現在項目近百個路由，這時候使用路由懶加載在開發模式下就是一件痛苦的事情了，隨手改一行代碼熱更新都是要6000ms+的，這怎么能忍。樓主整整花了一天多的時間找原因，能webpack優化的方法都用了,什么 dll, HappyPack 等方法都是過了，但提升的效果都不是很明顯，正好那段時間出了 webpack3 樓主也升級了，編譯速度也得到了很大幅度的提升，不過也要2000ms+。后來經過大神 @jzlxiaohei 的指點發現原來是路由懶加載搞得鬼，樓主猜測可能是異步加載導致 webpack 每次的 cache 失效了，所以每次的rebuild 才會這么的慢。找到了原因我們就可以對癥下藥了，我們就自己封裝了一個_import()的方法，只有在正式環境下才使用懶加載。這樣解決了困擾多事的rebuild慢問題。代碼
const _import = require('./_import_' + process.env.NODE_ENV);
const Foo = _import('Foo');
復制代碼整整比原來6000ms快了十多倍，我終于又能愉快的開發了。
在手摸手，帶你用vue擼后臺 系列二(登錄權限篇)這章中其實已經詳細介紹過了。該項目中權限的實現方式是：通過獲取當前用戶的權限去比對路由表，生成當前用戶具的權限可訪問的路由表，通過router.addRoutes動態掛載到router上。 但其實很多公司的業務邏輯可能不是這樣的，舉一個例子來說，很多公司的需求是每個頁面的權限是動態配置的，不像本項目中是寫死預設的。但其實原理是相同的。如這個例子，你可以在后臺通過一個tree控件或者其它展現形式給每一個頁面動態配置權限，之后將這份路由表存儲到后端。當用戶登錄后根據role，后端返回一個相應的路由表或者前端去請求之前存儲的路由表動態生成可訪問頁面，之后就是router.addRoutes動態掛載到router上，你會發現原來是相同的，萬變不離其宗。
側邊欄:本項目里的側邊欄是根據 router.js 配置的路由并且根據權限動態生成的，這樣就省去了寫一遍路由還要再手動寫側邊欄這種麻煩事，同是使用了遞歸組件，這樣不管你路由多少級嵌套，都能愉快的顯示了。權限驗證那里也做了遞歸的處理。
面包屑:本項目中也封裝了一個面包屑導航，它也是通過watch $route動態生成的。代碼
由于側邊欄導航和面包屑亦或是權限，你會發現其實都是和router密切相關的，所以基于vue-router路由信息對象上做了一下小小的拓展，自定義了一些屬性
icon : the icon show in the sidebar
element-ui自帶的圖標不是很豐富，但管理后臺圖標的定制性又很強。這里只給大家推薦使用阿里的 iconfont ，簡單好用又方便管理。本項目中已經嵌入了一些 iconfont 作為例子，大家可以自行替換。 這里來簡單介紹一下 iconfont 的使用方式。首先注冊好 iconfont 賬號之后，可以在我的項目中管理自己的 iconfont 。我司所有的項目都是用這個管理的，真心推薦使用。
創建好圖標庫后如果有更新替換也很方便，這里我使用了 Symbol 的方式引入，這里還有unicode，font-class的引入方式，有興趣的可以自行研究。 之后我們點擊下載 Symbol，會發現有如下這些文件，我們只要關心iconfont.js就可以了
我們將它替換項目中的 iconfont.js 就可以了。本項目中也封裝了一個svg component 方便大家使用。
<icon-svg icon-class="填入你需要的iconfont名字就能使用了"></icon-svg>
復制代碼每個項目都需要有一個屬于自己的favicon。
其實實現起來非常的方便，我們主需要借助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')
}),
復制代碼你只要將本項目跟目錄下的favicon.ico文件替換為你想要的圖標即可。
vue cli 默認提供了standard和airbnb 兩種 lint 規范，說真的一個j檢查校驗的太松一個又太緊，而且每個團隊的 lint 規范又是不同的，所以樓主干脆在項目里把大部分常用的 lint 規范都列舉了出來并寫上了注釋方便大家修改代碼地址，大家也可以把自己的規范上傳到npm，像 vue 一樣 vue-eslint-config。配置 eslint 對多人協作的項目有很大的好處,同時配置好lint 在加 ide 的 lint 插件寫代碼簡直要起飛。相關配置可見第一篇教程。
相信大部分 vue 的項目都是基于 vue-cli 來開發的，不過畢竟每個人需求都是不太一樣的，需要自定義一些的東西。就比如拿 postcss 來說 vue-cli 有一個小坑，它默認 autoprefixer 只會對通過 vue-loader 引入的樣式有作用，換而言之也就是 .vue 文件里面的 css autoprefixer 才會效果。相關問題issues/544,issues/600。解決方案也很簡單粗暴
//app.vue
<style lang="scss">
@import './styles/index.scss'; // 全局自定義的css樣式
</style>
復制代碼你在 .vue 文件中引入你要的樣式就可以了，或者你可以改變 vue-cli的文件在 css-loader 前面在加一個 postcss-loader，在前面的issue地址中已經給出了解決方案。 這里再來說一下 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"
]
復制代碼如上代碼所述，autoprefixe r回去讀取 package.json 下 browserslist的配置文件
本項目暫時沒有兼容性需求，如有兼容性需求可自行使用babel-polyfill。 在Node/Browserify/webpack中使用
npm install --save babel-polyfill //下載依賴
復制代碼在入口文件中引入
import 'babel-polyfill';
// 或者
require('babel-polyfill');//es6
復制代碼在webpack.config.js中加入babel-polyfill到你的入口數組：
module.exports = {
entry:["babel-polyfill","./app/js"]
}
復制代碼具體可參考 link
或者更簡單暴力 polyfill.io 使用它給的一個 cdn 地址，引入這段js之后它會自動判斷游覽器，加載缺少的那部分 polyfill，但國內速度肯能不行，大家可以自己搭 cdn。
樓主 vue 群里的小伙伴們問的最多的問題還是關于跨域的，其實跨域問題真的不是一個很難解決的問題。這里我來簡單總結一下我推薦的幾種跨域解決方案。
開發環境 生成環境 cors cors proxy nginx
這里我只推薦這兩種方式跨域，其它的跨域方式都很多，但真心主流的也就這兩種方式。
vue-element-admin 由于是一個純前端個人項目,所以所以的數據都是用mockjs生成的,它的原理是:攔截了所有的請求并代理到本地模擬數據，所以 network 中沒有任何的請求發出。不過這并不符合實際業務開發中的場景，所以這個項目中使用了前不久剛出的 easy-mock，支持跨域，mockjs 的語法，支持Swagger 這幾點還是挺不錯的。相關文章
線上或者測試環境接口的 base_url 不一樣是很長見得需求，或者你在本地用了如 easy-mock 這種模擬數據到線上環境你想用自己公司生產環境的數據，這些需求都可以簡單的通過用 baseurl 來解決。首先我們在config/下有dev.env.js和prod.env.js這兩個配置文件。用它來區分不同環境的配置參數。
//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"',
}
復制代碼同時本項目封裝了axios攔截器，方便大家使用，大家也可根據自己的業務自行修改。
import axios from 'axios';
import { Message } from 'element-ui';
import store from '../store';
// 創建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 請根據實際情況自行修改
}
return config;
}, error => {
// Do something with request error
console.log(error); // for debug
Promise.reject(error);
})
// respone攔截器
service.interceptors.response.use(
response => {
/**
* code為非20000是拋錯 可結合自己業務進行修改
*/
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('你已被登出，可以取消繼續留在該頁面，或者重新登錄', '確定登出', {
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;
復制代碼由于axios每一個都是一個實例，你的請求都是基于這個實例來的，所以所以配置的參數屬性都繼承了下來.
//api.xxx.js
import fetch from '@/utils/fetch';
export function getInfo(token) {
return fetch({
url: '/user/info',
method: 'get',
params: { token }
});
}
//你可以直接這樣使用，之前攔截器寫的東西都是生效的，
//它自動會有一個你之前配置的baseURL,
//但你說我這個請求baseURL和其它的不同,
//這也是很方便的，你可以字請求內部修改，
//它會自動覆蓋你在創建實例時候寫的參數如
export function getInfo(token) {
return fetch({
baseURL: https://api2-xxxx.com
url: '/user/info',
method: 'get',
params: { token }
});
}
復制代碼這篇文章主要是介紹了 vueAdmin 做了哪些事情，希望大家如果有后臺新項目要開發，建議基于 vue-admin-template 來開發，而 vue-element-admin 更多的是用來當做一個集成方案，你要什么功能就去里面找拿來用，因為兩者的基礎架構是一樣的，所以復用成本也很低。
文適合有 Java 基礎知識的人群
作者：HelloGitHub-Salieri
HelloGitHub 推出的《講解開源項目》[1]系列。
對于大部分非前端程序員來說，寫網頁無疑是一件非常痛苦的時間。如果說 JavaScript 還屬于能夠勉強搏一搏的水平，那 HTML 無疑是那座無法逾越的大山。什么，你說你翻過 HTML 這座大山了？沒想到吧，CSS 在天上正望著你呢。總而言之，對我來說，寫前端頁面一直以來都是令我頭疼不已的事情，就不提 DOM 元素操作這種高端操作了，就一個最簡單的文字水平加垂直居中，一百度都能搜出一堆千奇百怪各不相同的方法來。關鍵是，在我全部嘗試以后，字，依舊沒有出現在我預期的地方。不知道大家有沒有經歷過這種前端開發的絕望，反正作為過來人，我可是有倒不完的苦水吶！
看了上面這一大段話，如果你以為本文的主旨是吐槽前端的話，那你就大錯特錯了。曾經，我的前端世界一片黑暗，直到我遇見了 vue～
PowerJob 呢，是一個用 Java 寫的任務調度中間件，自然用武之地也是在后端。而 vue 呢，是一個非常強大的前端框架。PowerJob 除了前端頁面是用 vue 寫的以外，看上去和 vue 沒有任何交集（實際上呢也沒什么交集）。而我之所以在這里單開一個章節凈扯這些有的沒的，也不純是為了湊字數，主要還是借這個機會，寫一篇觀后感。
“觀后感？這個人在說什么？最近寫 bug 腦子寫壞掉了吧～”
不知道大家有沒有看過《記錄 Vue.js》這部紀錄片。作為一個非紀錄片愛好者和非前端愛好者這樣一個雙非人員，我居然無比認真無比投入的看完了這部紀錄片。
看這部紀錄片的時候，PowerJob（OhMyScheduler） 的 1.0.0 版本剛發布不久，雖說 1.0.0 版本功能并沒有現在那么豐富，穩定性和用戶體驗也沒有現在那么好，但依舊可以說是比別的任務調度框架強上一截。所以，在正式發布之前，我常常會去幻想這個框架能夠掀起的大風大浪，然后暗自竊喜，每天快樂得活在自己幻想出來的烏托邦里面，不亦樂乎。然而，正式發布后別說風浪了，連漣漪都沒有。仿佛這件事從來沒有發生過。
所以在那一段時光，我其實還是蠻喪的。之前幻想的有多美好，現實帶來的反差感就越強烈。也是在這樣的環境下，我偶然得知 vue 有一部紀錄片，講述了 vue 誕生至今的故事。
當然，我并沒有直接去看，畢竟我是“雙非”人士，一般情況是對這種東西提不起興趣的。但不知怎么的，我最后還是打開了（YouTube 發現是英文的然后打開了 ）bilibili。
我想，我可能是為了尋找心理平衡而準備去看這個視頻的。畢竟即便是我，也知道 vue 起源于尤大大的個人項目。那既然是個人項目，是不是也會有我這樣的窘境嘞～要是全球聞名的前端框架起步階段都有我這種伯樂難尋的煩惱，那我還煩惱個啥呢～
然而，我想要尋找的東西并沒有找到。Vue 發布初期，就取得了不小的關注度，也迅速在 GitHub 上積累了一群小用戶。而我...emmmm，不過，雖然心理慰藉沒找到，但看完整個視頻，我找到了動力。
最后，貼一段尤大大的結束語來結束本章節：
我下定決心離開了朝九晚五的崗位，做著一件基本能讓我熱情投入的工作，這確實挺讓我感到自豪的。有時候我會看看統計數據，比如看下我們有多少用戶，多少下載量之類的。但要說什么最能給我對工作的某種成就感，或者說滿足感的話，那還是當我看到（自己所影響的）人的時候。尤其是在會議結束以后，很多人會來找我。比如大家經常會跟我握手，說「謝謝 Evan 你做的東西，它真的讓我的生活方便了很多」這樣子。這些時候我都會感覺到，這就是我做 Vue 的動力。我把它做了出來，我把它分享給了大家，希望它能讓大家生活更方便。然后還真的會有人來單獨找我，會有人來感謝我所做到的事情。于是整個循環就這樣連通起來了。
講完了故事，講“技術”。
對于后臺管理類型的前端項目，說白了其實就那幾個功能（側邊導航欄、頂部導航欄、表單、表哥、輸入框、按鈕等），因此選擇一款好的模版組件能讓開發效率大大大大大大提升。比如，用了 element-ui 以后，我就從寫代碼轉變成了拷代碼，可以說是很愉悅了～
廢話環節結束，下面就讓我們進入 vue + element-ui 構成的不一樣的前端世界～
首先，后臺管理網站雖然簡單，但好歹也是個前端項目。因此，不能再用小白最愛的新建 html 文件打開方式了。而是需要先初始化一個完整的前端項目，好在 vue 為我們提供了完整的工具包，只需要運行命令：
vue create powerjob-console根據提示選擇指定的配置就能生成完整的 vue 工程。命令行運行結束后，cd 進去創建的工程，運行本地調試命令 npm run serve 即可看到你的第一個 vue 網頁服務了～
element-ui 的官方標語是“Element，一套為開發者、設計師和產品經理準備的基于Vue 2.0 的桌面端組件庫”。可見其使用有多簡單～element-ui提供了大量的常用模版，同時每一個模版下面都攜帶了大量的代碼實例，是一個真·只需要復制黏貼改幾個參數就能用的組件庫。那還等什么，安裝啊～
element-ui 為 vue-cli 準備了專用的插件，安裝也十分簡單，只需要進入項目目錄，執行
vue add elemenz等待進度條走完之后，element-ui 就安裝完畢了～
至此，項目主體初始化完畢，理論上可以正式開始開發了。然而，此時面對一個原始的 vue 工程，我等前端小白還是難以下手。因此這個時候就要各種功能強大的框架出馬進一步降低我們的開發成本了，以下列舉一些我常用的（應該也是大家常用的）插件供大家參考：
插件的安裝是一條 npm 通用名稱，格式為 npm install 插件名稱 --save。--save 參數才會把模塊寫入到 packages.json，當換個環境運行 npm install 時就會自動安裝，否則還需重新安裝該插件。
到這里，前置開發準備可以說是全部完成了，接下來就正式進入開發環節。在這里，我推薦使用的方法是在 GitHub 找一個現成的項目工程（比如 PowerJob-Console）照著改。對于一個后臺管理項目來說，網頁的布局是固定的，整體風格也是類似的，具體的組件也幾乎都是重合的，因此很容易上手和修改。拿 PowerJob-Console 來說，需要重點關注的其實就4個文件，分別是：main.js、router.js、Navbar.vue 和 Sidebar.vue。
main.js 主要完成各個插件的初始化，要改的東西不多，無非就是 baseURL、請求攔截等看一眼就知道這里要改的內容。
router.js 則定義了單頁面下的跳轉規則，里面的東西雖然看不懂，但結合 Sidebar.vue 一起看，就知道要怎么改了～這...大概就是復制黏貼的快樂吧。
Navbar.vue 和 Sidebar.vue 可以直接拷貝過來，里面的東西也是看一眼就知道怎么改的那種。
經過這一陣折騰，你已經有了如下樣式的通用后臺，只需要完成具體頁面的開發即可～而具體的頁面嘛...無非就是表單什么的，打開 element-ui 官網，你就明白了什么是真正的面向復制編程～
好了，這就是本文的全部內容了。本周對我來說是動蕩的一周......大部分時間都在處理線上問題，因此本文行文倉促，還請大家多多包涵～
下一期，可能會給大家帶來 MapReduce 處理器的原理剖析（核心科技了解一下），當然也可能是～其他～～～
“什么？你說我講了半天，vue 相關的知識一點都沒講？”
“什么？vue 相關的知識還要講？看一遍文檔就能寫了。對小白，就是那么友好～”
ue.js是一套用于構建用戶界面的漸進式框架。與其他大型框架不同的是，它可以自底向上逐層應用。Vue.js的核心庫只關注視圖層，不僅易于上手，還便于與第三方庫或已有的項目整合。當與現代化的工具鏈及各種支持類庫結合使用時，Vue.js完全能夠為復雜的單頁應用提供驅動。
時至今日，Vue.js 已成為世界三大主流前端框架之一。Vue.js 在國內也是主流技術之一，有完善的中文文檔和中文社區，易學易上手。
Vue.js主要有以下特點。
（1）輕量級的框架：Vue.js能夠自動追蹤依賴的模板表達式和計算屬性，提供MVVM數據綁定功能和一個可組合的組件系統，具有簡單靈活的API，使用戶更加容易理解，更快上手。
（2）雙向數據綁定：聲明式渲染是數據雙向綁定的主要體現，也是Vue.js的核心，它允許采用簡潔的模板語法，將數據聲明式渲染整合進DOM。
（3）指令：Vue.js與頁面的交互是通過內置指令完成的。當表達式的值改變時，相應的某些行為會被應用到DOM上。
（4）組件化：組件是Vue.js最強大的功能之一。組件可以擴展HTML元素，并封裝可重用的代碼。
（5）客戶端路由：vue-router是Vue.js官方的路由插件，與Vue.js深度集成，用于構建單頁面應用。Vue.js單頁面應用是基于路由和組件的，路由用于設定訪問路徑，將路徑和組件映射起來。
（6）狀態管理：狀態管理實際上是一個單向的數據流，State驅動對視圖（View）的渲染，而用戶對View進行操作產生Action，使State產生變化，從而重新渲染View，形成一個單獨的組件。
如果你想要更快地掌握Vue.js 3技術，推薦你從實戰入手，閱讀《Vue.js 3.0企業級管理后臺開發實戰：基于Element Plus》。
這本書結合企業中常見的管理后臺，對Vue.js 3技術進行實戰演練。通過管理后臺的業務模塊，結合Vue.js 技術，講解企業內部的開發過程，解讀項目文件，讀者可以熟悉、掌握并快速應用Vue.js技術，實現完全自主搭建管理后臺，并將本書中的開發技巧應用到工作中。
全書深入淺出地介紹了企業內部初立項目、原型、PRD文檔、UI稿件、業務邏輯、項目開發流程、API接口聯調和項目部署的方方面面，揭示了企業內部真實的項目開發流程。
通過本書，你將學習到：
尤其是在校學生和初入職場、實踐經驗不足的小白，可以從本書中更深一步地獲取真實的項目經驗，熟悉管理后臺的運作，并且能夠完全自主地開發管理后臺，從同行中脫穎而出。
此外，本書還提供了項目代碼倉庫，包含大量的資源和示例，你完全可以將它作為編寫代碼的指南。
當然，給粉絲們申請到了
官方的全網最低價
有需求的放心下單
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
