vue-element-admin文檔： https://panjiachen.github.io/vue-element-admin-site/zh/
在線預覽： https://panjiachen.github.io/vue-element-admin/#/dashboardcss
Vue國內克隆：
vue-admin-template:
git clone https://gitee.com/panjiachen/vue-admin-template.githtml
vue-element-admin:
git clone https://gitee.com/panjiachen/vue-element-admin.git前端
1、vue-element-admin介紹
vue-element-admin 是一個後臺前端解決方案，它基於 vue 和 element-ui實現。它使用了最新的前端技術棧，內置了i18國際化解決方案，動態路由，權限驗證，提煉了典型的業務模型，提供了豐富的功能組件，它能夠幫助你快速搭建企業級中後臺產品原型。相信無論你的需求是什麼，本項目都能幫助到你。vue
建議node
本項目的定位是後臺集成方案，不太適合當基礎模板來進行二次開發。由於本項目集成了不少你可能用不到的功能，會形成很多的代碼冗餘。若是你的項目不關注這方面的問題，也能夠直接基於它進行二次開發。
集成方案: vue-element-admin
基礎模板: vue-admin-template
桌面終端: electron-vue-admin
Typescript 版: vue-typescript-admin-template (鳴謝: @Armour)
Others: awesome-projectwebpack
2、功能
-
登陸 / 註銷ios
-
權限驗證git
- 頁面權限
- 指令權限
- 權限配置
- 二步登陸
-
多環境發佈github
- dev sit stage prod
-
全局功能web
- 國際化多語言
- 多種動態換膚
- 動態側邊欄（支持多級路由嵌套）
- 動態麪包屑
- 快捷導航(標籤頁)
- Svg Sprite 圖標
- 本地/後端 mock 數據
- Screenfull全屏
- 自適應收縮側邊欄
-
編輯器
- 富文本
- Markdown
- JSON 等多格式
-
Excel
- 導出excel
- 導入excel
- 前端可視化excel
- 導出zip
-
表格
- 動態表格
- 拖拽表格
- 內聯編輯
-
錯誤頁面
- 401
- 404
-
組件
- 頭像上傳
- 返回頂部
- 拖拽Dialog
- 拖拽Select
- 拖拽看板
- 列表拖拽
- SplitPane
- Dropzone
- Sticky
- CountTo
-
綜合實例
-
錯誤日誌
-
Dashboard
-
引導頁
-
ECharts 圖表
-
Clipboard(剪貼複製)
-
Markdown2html
3、前序準備
你須要在本地安裝 node和 git。本項目技術棧基於 ES2015+、vue、vuex、vue-router 、vue-cli、axios 和 element-ui，全部的請求數據都使用Mock.js進行模擬，提早了解和學習這些知識會對使用本項目有很大的幫助。
同時配套一個系列的教程文章，如何從零構建一個完整的管理後臺項目，建議你們先看完這些文章再來實踐本項目。
- 手摸手，帶你用 vue 擼後臺 系列一(基礎篇)
- 手摸手，帶你用 vue 擼後臺 系列二(登陸權限篇)
- 手摸手，帶你用 vue 擼後臺 系列三 (實戰篇)
- 手摸手，帶你用 vue 擼後臺 系列四(vueAdmin 一個極簡的後臺基礎模板)
- 手摸手，帶你用 vue 擼後臺 系列五(v4.0 新版本)
- 手摸手，帶你封裝一個 vue component
- 手摸手，帶你優雅的使用 icon
- 手摸手，帶你用合理的姿式使用 webpack4（上）
- 手摸手，帶你用合理的姿式使用 webpack4（下）
4、目錄結構
本項目已經爲你生成了一個完整的開發框架，提供了涵蓋中後臺開發的各種功能和坑位，下面是整個項目的目錄結構。
├── build # 構建相關
├── mock # 項目mock 模擬數據
├── plop-templates # 基本模板
├── public # 靜態資源
│ │── favicon.ico # favicon圖標
│ └── index.html # html模板
├── src # 源代碼
│ ├── api # 全部請求
│ ├── assets # 主題 字體等靜態資源
│ ├── components # 全局公用組件
│ ├── directive # 全局指令
│ ├── filters # 全局 filter
│ ├── icons # 項目全部 svg icons
│ ├── lang # 國際化 language
│ ├── layout # 全局 layout
│ ├── router # 路由
│ ├── store # 全局 store管理
│ ├── styles # 全局樣式
│ ├── utils # 全局公用方法
│ ├── vendor # 公用vendor
│ ├── views # views 全部頁面
│ ├── App.vue # 入口頁面
│ ├── main.js # 入口文件 加載組件 初始化等
│ └── permission.js # 權限管理
├── tests # 測試
├── .env.xxx # 環境變量配置
├── .eslintrc.js # eslint 配置項
├── .babelrc # babel-loader 配置
├── .travis.yml # 自動化CI配置
├── vue.config.js # vue-cli 配置
├── postcss.config.js # postcss 配置
└── package.json # package.json
5、安裝vue-element-admin
1. 克隆項目
git clone https://github.com/PanJiaChen/vue-element-admin.git
2. 進入項目目錄
cd vue-element-admin
3.安裝依賴
npm install
4. 設置淘寶鏡像源
建議不要用 cnpm 安裝 會有各類詭異的bug 能夠經過以下操做解決 npm 下載速度慢的問題
npm install --registry=https://registry.npm.taobao.org
5. 本地開發 啓動項目
npm run dev
6、訪問
啓動完成後會自動打開瀏覽器訪問 http://localhost:9527， 你看到下面的頁面就表明操做成功了。
本文同步分享在 博客「Thinkingcao」（CSDN）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。