vue-element-admin 介紹

2021-02-20 全棧運維PythonVue
簡介

vue-element-admin 是一個後臺集成解決方案，它基於 vue 和 element。它使用了最新的前端技術棧，內置了 i18 國際化解決方案，動態路由，權限驗證，提煉了典型的業務模型，提供了豐富的功能組件，它可以幫助你快速搭建企業級中後臺產品原型。相信不管你的需求是什麼，本項目都能幫助到你。

本項目的定位是後臺集成方案，不適合當基礎模板來開發。

注意：該項目使用 element-ui@2.3.0+ 版本，所以最低兼容 vue@2.5.0+

從v3.8.0開始使用webpack4。所以若還想使用webpack3開發，請使用該分支webpack3

該項目不支持低版本瀏覽器(如 ie)，有需求請自行添加 polyfill 詳情

前序準備

你需要在本地安裝 node 和 git。本項目技術棧基於 ES2015+、vue、vuex、vue-router 、axios 和 element-ui，所有的請求數據都使用Mock.js模擬，提前了解和學習這些知識會對使用本項目有很大的幫助。

功能

- 登錄 / 註銷

- 權限驗證
  - 頁面權限
  - 指令權限
  - 二步登錄

- 多環境發布
  - dev sit stage prod

- 全局功能
  - 國際化多語言
  - 多種動態換膚
  - 動態側邊欄（支持多級路由嵌套）
  - 動態麵包屑
  - 快捷導航(標籤頁)
  - Svg Sprite 圖標
  - 本地mock數據
  - Screenfull全屏
  - 自適應收縮側邊欄

- 編輯器
  - 富文本
  - Markdown
  - JSON 等多格式

- Excel
  - 導出excel
  - 導出zip
  - 導入excel
  - 前端可視化excel

- 表格
  - 動態表格
  - 拖拽表格
  - 樹形表格
  - 內聯編輯

- 錯誤頁面
  - 401
  - 404

- 組件
  - 頭像上傳
  - 返回頂部
  - 拖拽Dialog
  - 拖拽Select
  - 拖拽看板
  - 列表拖拽
  - SplitPane
  - Dropzone
  - Sticky
  - CountTo

- 綜合實例
- 錯誤日誌
- Dashboard
- 引導頁
- ECharts 圖表
- Clipboard(剪貼複製)
- Markdown2html

開發


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


npm install


npm install --registry=https://registry.npm.taobao.org


npm run dev

瀏覽器訪問 http://localhost:9527

發布


npm run build:sit


npm run build:prod

其它


npm run build:prod


npm run build:prod --generate_report


npm run build:prod --preview


npm run lint


npm run lint -- --fix

更多信息請參考 使用文檔

Donate

如果你覺得這個項目幫助到了你，你可以幫作者買一杯果汁表示鼓勵 :tropical_drink:


License

MIT

Copyright (c) 2017-present PanJiaChen

相關焦點

  • Vue-element-admin 安裝配置及發布
    最近從手機端項目轉戰網頁端項目，經推薦使用了了vue-element-admin。
  • Vue框架vue-admin-template登陸問題解決
    一、引言下面來學習一下在開發中可以直接使用的Vue兩個模板框架，vue-element-admin和vue-admin-template，這兩者具體的介紹
  • vue-element-admin v3.6.4 發布,後臺集成方案
    vue-element-admin v3.6.4 已發布，更新如下：優化: index.html script 標籤插入位置 #507優化: 使用 2 空格替代一個
  • vue-elemnt-admin學習
    vue-elemnt-admin學習vue-element-admin是一個基於vue，element-ui
  • 讓程式設計師變懶的 「vue-admin-template」 後臺管理系統
    vue-element-admin 是一個後臺前端解決方案，它基於 vue 和 element-ui實現。github地址：https://github.com/PanJiaChen/vue-element-admin2、基礎模板: vue-admin-templatevue-admin-template 是一個極簡的 vue admin 管理後臺。
  • Android Studio 3.1 正式發布,默認 D8 Dex 編譯器;vue-element-admin 3.6.4 發布
    Android Studio 3.1 正式發布，默認使用 D8 Dex 編譯器vue-element-admin v3.6.4 發布，後臺集成方案
  • vue-element-admin筆記第一篇
    下面就隨著我一起來進入vue-element-admin的開發之路吧。這裡我們不會從 0 開始，本項目是選擇依託開源的vue-element-admin作為起步的框架，結合自身後臺開發的專長，從而理解一些常用的方法。
  • 手摸手,帶你用vue擼後臺 系列四(vueAdmin 一個極簡的後臺基礎模板)
    前言做這個 vueAdmin-template 的主要原因是: vue-element-admin 這個項目的初衷是一個vue的管理後臺集成方案，把平時用到的一些組件或者經驗分享給大家，同時它也在不斷的維護和拓展中，比如最近重構了dashboard，加入了全屏功能，新增了tabs-view等等。
  • 用 Vue+ElementUI 搭建後臺管理極簡模板
    先跑起來git clone https://github.com/tuture-dev/vue-admin-template.gitcd vue-admin-templatenpm install --registry=https://registry.npm.taobao.orgnpm run dev本文所涉及的原始碼都放在了
  • Vue入門10 vue+elementUI
    npm i element-ui -SCDN目前可以通過unpkg.com/element-ui獲取到最新版本的資源，在頁面上會js和css文件即可開始使用。<!/dist/vue.js"></script> <script src="https://unpkg.com/element-ui/lib/index.js"></script> <script> new Vue({ el: '#app', data: function() { return { visible
  • 前端技術棧:5分鐘入門VUE+Element UI
    vue-cli是vue的腳手架，所謂腳手架說白了就是快速創建模板化的項目，不用每次創建項目都去重複那些固定化的操作，注意我們安裝的是vue2.0的腳手架npm install -g vue-cli不要和vue3.0的混淆，vue3.0是npm install -g @vue/cli，此處不需要安裝3.0，否則會衝突全局安裝webpackwebpack
  • VUE+ElementUI
    /2.2 Element使用步驟 1.引入Element樣式文件 element-ui/lib/theme-chalk/index.css 2.引入Vue核心JS文件 vue.js 3.引入Element核心js文件 element-ui/lib/index.js 4.編寫相關Element代碼 5.通過Vue核心對象加載元素 new
  • 6個牛逼的基於Vue.js的後臺控制面板,接私活必備
    介紹幾款牛逼的基於Vue.js的後臺管理控制面板，掌握這幾款管理面板，差不多就可以單槍匹馬去接私活了！
  • 5款優秀的vue後臺管理系統模板推薦(免費下載)
    模板介紹：iView-admin是iView生態中的成員之一，是一套採用前後端分離開發模式，基於Vue的後臺管理系統前端解決方案。2、基於vuejs2和element的管理模板地址：https://www.php.cn/xiazai/code/6387
  • 手把手擼一個 Vue3 + Ts + ElementPlus 後臺管理模板
    初始化項目腳手架用的是vue-cli,vite還不太穩定，很多第三方庫也存在兼容問題，為了能正常在實際項目中使用，還是選擇了vue-cli。安裝 ElementPlusyarn add element-plus// main.tsimport ElementPlus from 'element-plus';import 'element-plus/lib/theme-chalk/index.css';const app
  • 國內首個 vue3.0+antdv 開源Admin管理系統
    vue-admin-beautiful 基於vue3.x+ant-design-vue構建的免費開源admin項目，star高達5.9K+。功能特性快速安裝下面介紹的是vue3.0-antdv分支(ant-design-vue)# 克隆項目git clone -b vue3.0-antdv https://github.com/chuzhixin/vue-admin-beautiful.git# 進入項目目錄cd vue-admin-beautiful# 安裝依賴npm install
  • Element UI for Vue 3.0 來了!
    正如 vue-next 之於 vue，一次 100% 的重構雖然解決了很多歷史遺留問題，但也不可避免的引入一些新的 bug 和問題，而獨立的 issue 和 pr 區可以減少大家使用和反饋的心智成本，也能更加方便我們定位問題，並行維護迭代。
  • Springboot Vue Login(從零開始實現Springboot+Vue登錄)
    (Vue 安裝後就會有 npm 或 cnpm，相應的介紹也不說了，Vue 官網可查看)一、打開 cmd 創建 Vue 項目，並添加 Vue 依賴的框架：1.進入到創建的 Vue 項目目錄，添加依賴框架：cd vue-spring-login-summed (進入到項目根目錄)vue add element (添加 element，一個 element 風格的 UI 框架)npm install axios (安裝 axios，用於網絡請求)npm install vuex --save(安裝 Vuex，用於管理狀態)
  • 12款優秀的vue後臺管理系統模板推薦【免費下載】
    模板介紹：一款基於vue實現的電商網站後臺管理系統模板，適合電子商務購物網站admin系統。界面使用tab選項卡的方式，無刷新效果很好。這套後臺模板是github項目，請參考幫助文檔。模板介紹：iView-admin是iView生態中的成員之一，是一套採用前後端分離開發模式，基於Vue的後臺管理系統前端解決方案。
  • Vue + TypeScript + Element 項目實戰及踩坑記
    vue： ^2.6.6typescript : ^3.2.1element-ui： 2.6.3vue-router : ^3.0.1webpack： 4.28.4vuex: ^3.0.1axios：0.18.0redux: 4.0.0highlight.js： 9.15.6