整項目地址：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:

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

該項目只做了一個管理后臺需要極簡的功能，封裝了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

• 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 大家也可以結合自己的業務需求增改這些自定義屬性。

iconfont

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

每個項目都需要有一個屬于自己的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文件替換為你想要的圖標即可。

eslint

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

postcss

相信大部分 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的配置文件

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

babel-polyfill

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

開發環境 生成環境 cors cors proxy nginx

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

easy-mock

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

baseurl

線上或者測試環境接口的 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 更多的是用來當做一個集成方案，你要什么功能就去里面找拿來用，因為兩者的基礎架構是一樣的，所以復用成本也很低。

知道早期的開發中，前后端是不分離的嗎？那么后來它們又為什么要“分家”呢？分離后又有什么好處呢？

在前面一篇文章中，產品汪搞懂了前后端的工作分工。但是了解過程中，一個程序猿哥哥不經意間的一句話：“現在都是前后端分離的”，讓小汪感到納悶了，以前難道前后端不分離的么？于是小汪就繼續深究起來。

不溫馨的一家人

在十幾年前，前端的地位其實相對于后端并不那么強勢，以下是一種經典的編程框架。

MVC：Model View Controller，是模型(model)－視圖(view)－控制器(controller)的縮寫，一種軟件設計典范，用一種業務邏輯、數據、界面顯示分離的方法組織代碼。

有意思的事情出現了，內容是傳給用戶的，前端并不是直接接觸用戶的！前端只是提供了個樣式模板，由后端把內容嵌入進入，再由后端直接傳給用戶。

這個時候，前端的編程要各種順著后端哥哥的心意，而且前端要是出bug了，還得拉上后端一起研究，誰讓你往我的模板里插了內容，出了幺蛾子你就得負責到底。

這個時期前后端高度耦合，從編程環境、到開發調試，都必須“在一起”，對于前端來說，其實自主權就不高，對后端來說，也要懂一些前端的知識。

于是前端程序猿對后端程序猿說，要不……你只管你的業務和數據，把結果給我，我來負責組裝與呈現，這樣大家都輕松些。于是前后端就分離了。

當初是你要分開，分開就分開

前后端分離帶來的好處：

（1）編程更輕松

前后端分離之后，后端更專注于實現業務邏輯，形成一套標準化的“API接口”，例如需要創建商品，前端將商品信息傳給后端創建商品的接口，后端就會完成商品的創建，并返回創建結果。如果前端給的創建商品信息缺了標題或者價格，后端還能返回創建失敗的結果，并且提示缺失了哪些信息等。

前端除了負責界面樣式和交互，還接管了獲取和展示數據的權利，從此前端開發就自由多了，如果遇上bug，也能很輕松定位到是前端還是后臺的事情。

（2）更高的可復用性

前后端分離，更是順應了互聯網發展多樣化的潮流。后端通過提供一系列可以實現不同業務功能的接口，就可以讓不同的前端、甚至外部系統過來對接。

這樣方便了公司不斷推廣自己的產品，今天推出手機網頁版、明天推出APP版、后天推出小程序版本等。而后端只需要提供一次接口，無需每增加一類客戶端，后端就要新寫過。

用戶訪問網站的過程小知識：

1. 瀏覽器先下載HTML的內容
2. 根據HTML里的內容，下載并加載對應的CSS，讓網頁漂亮起來
3. 根據HTML里的內容，下載并加載對應的JavaScript，讓網站具備交互動效，其中部分JavaScript代碼負責向服務器上的后端請求數據，并展示在頁面上。

但是久而久之，前后端分離在web網頁上也遇到了一些問題，最明顯的是以下兩點：

1. JavaScript的請求在用戶瀏覽器中進行，當一個網站需要展示非常多的內容時，JavaScript就要向后臺多個接口請求數據，然后再在用戶瀏覽器上完成頁面組裝，這過程中就會給用戶設備的網速、設備的運行速度（CPU、內存等）帶來一定的壓力。
2. 搜索引擎，如百度、搜狗、谷歌等，想爬取網頁的內容時，就會用到爬蟲。爬蟲會抓取網頁HTML里面的內容，然后讓其他網友可以搜索到你的網頁。但是此時，HTML文件就是個框架，要依靠JavaScript才能獲取到數據。這就會導致你的網頁難以被搜索引擎收錄，用戶很可能搜不到你的網頁。

前后端分離為用戶設備帶來的影響，可以通過“換臺新手機”、“換臺新電腦”解決，但是搜索引擎爬不到網頁的數據，對很多重度依賴搜索引擎流量的產品來講，打擊可就大了。

例如你需要找一個菜譜的時候，可能會在百度搜索“芥藍怎么炒好吃？”，然后再從搜索結果里面訪問各種美食網站。又或者你想去哪里玩，就會在百度搜索“土耳其旅游攻略”等等。對于這類重搜索引擎流量的網站而言，如果爬蟲爬不到自己的數據，客流損失就比較嚴重。

運行在后面的前端

考慮到上訴問題，聰明的網頁前端程序猿就想到了一個新的辦法，那我們先把后臺的數據跟HTML內容整合好，再呈現給用戶吧，得力于一種叫做Node.JS的、可以使用網頁前端熟悉的JavaScript編程的工具，于是有了2.0版本的前后端分離。

前端程序猿跟服務器上的后端說，讓一讓，給我騰個地兒，然后把Node.JS放在了服務器上。等用戶或者爬蟲需要訪問網頁時，這個運行在服務器上的程序，先請求后端獲得數據，并整合到HTML中，然后再返回給用戶。

這樣一來，用戶的設備就少了JavaScript多次請求后端的煩惱，加快了運行速度，而爬蟲也可以爬取到填充好內容的HTML網頁了。

看到這里，小汪就想，這么一來，用戶體驗、爬蟲的問題確實解決了，但是讓本來本該發生在用戶瀏覽器上的事情，都在服務器上做了嘛，如果訪問量大的話，咱服務器的壓力不就很大了？

前端程序猿哥哥呵呵一笑，其實不然，你想想，很多用戶都是在訪問同一個網頁，看同一個商品、讀同一篇文章，這些請求，要是服務器的前端就請求后臺一次，然后把整合好的HTML保存起來，下次再有人再來訪問，就把這個生成好的HTML展示給用戶，這樣不就服務器輕松了、用戶訪問也快了么！

小汪又問了，那咋們頁面多了，不就要每個頁面都保存一份HTML文件么，服務器儲存的空間不就越來越少了么？

前端程序猿哥哥繼續答道：久而久之，HTML文件在服務器積累多了，就把好久都沒人訪問的HTML刪了，給其他新保存的HTML文件讓位置，通過“緩存”技術，讓服務器永葆活力。

小汪恍然大悟，原來這就是緩存啊！這下子，小汪終于明白了前后端分離是什么回事，以及為什么要前后端分離。

現在隨著很多大型產品的形成、獨立運行，新的“信息孤島”正在形成。例如微信的公眾號-小程序-朋友圈-圈子，然后通過搜一搜進行統一搜索，內部造血，而不再依賴傳統的搜索引擎為他引流。

又例如淘寶，很多年前就拒絕了讓百度爬蟲爬取他的商品信息，只允許在淘寶內進行搜索。你在百度上搜不到淘寶的商品，在微信上也找不淘寶的任何信息、無法訪問淘寶任何的鏈接，如果你要淘寶購物，就只能去淘寶網站或者下載淘寶APP。新的互聯網格局的形成，肯定會進一步影響著前后端的關系。

本文由 @iCheer 原創發布于人人都是產品經理，未經作者許可，禁止轉載。

題圖來自Unsplash，基于CC0協議。

言

為了豐富 Naive Admin 生態，近期我們一直在精雕細琢，日夜奮戰，終于又迎來了Arco Vue Pro 正式發布上線！

Arco Design 介紹

ArcoDesign 是由字節跳動 GIP UED 團隊和架構前端團隊聯合推出的企業級設計系統，在打磨了近 3 年之后，通過字節內部大量業務沉淀和驗證，開源了 ArcoDesign 設計系統，旨在讓社區聽見更多的聲音，為更多中小型企業及個人設計師和開發者提效，創造更多高效美觀的“最佳實踐”。

產品概要

Naive Admin Arco 是一個基于 Vue3.0、Vite、 Arco Vue、TypeScript 中后臺解決方案。

特點

Naive Admin Arco 企業級中后臺前端框架，使用最新的前端技術棧，并提煉了典型的業務模型，頁面，包括二次封裝組件、動態菜單、權限校驗、粒子化權限控制等功能，它可以幫助你快速搭建企業級中后臺項目

響應式、多主題，多配置，快速集成，開箱即用

最新技術棧，使用 Vue 3、Typescript、Pinia、Vite 等前端前沿技術

強大的鑒權系統，對路由、菜單、功能點等支持 3 種鑒權模式，滿足不同的業務鑒權需求

持續更新，實用性頁面模板功能和交互，隨意搭配組合，讓構建頁面變得簡單化

功能

• 一鍵鎖屏
• 支持內嵌頁面
• 黑暗模式一鍵切換
• 支持多級路由嵌套
• 基于Vue3、Vite、TypeScript構建
• 路由菜單智能生成，只需創建路由文件即可
• 頁面切換動畫：漸變 / 閃現 / 滾動 / 消退 / 底部消失 / 底部消退
• 含有大量典型的業務示例，持續更新中，之后可免費升級獲取

布局

• 登錄 / 注冊
• 固定頂欄（可開關）
• 固定主體（可開關）
• 頁面重新刷新（可開關）
• 面包屑導航（可開關）
• 面包屑圖標（可開關）
• 頁面動畫（可開關）
• 導航欄模式：左側菜單 / 頂部菜單 / 頂部菜單混合
• 導航欄風格：暗色側邊欄 / 白色側邊欄 / 暗色頂欄
• 更多布局可在線體驗（右上角菜單項可動態預覽各種配置）

鑒權

• 路由級別鑒權
• 側邊欄菜單鑒權
• 功能塊鑒權
• 功能點鑒權
• 鑒權指令

組件

• Qrcode二維碼（自定義LOGO，大小，樣式，下載二維碼）
• 富文本（增加文本，增加圖片，獲取html，渲染HTML內容）
• BasicModal彈窗（美化彈窗，可拖拽移動，確認按鈕可定制）
• BasicForm表單（只需配置一個FormSchema數組，即可生成一個完整表單）
• Cropper圖片裁剪（可裁剪圓形，方形，適用于頭像上傳，商品圖片上傳，前端裁剪）
• BasicUpload圖片上傳（幫助文本，大小限制，內置圖片預覽，上傳圖片統一標準封裝）
• BasicTable表格（自動分頁，編輯單元格/行，自適應高度，操作列深度封裝，列設置，密度設置，列順序可拖動）
• Region地區組件（省市區選擇，數據動態加載方式，只需配置好相應接口即可，此組件靈活在于，可單獨選擇省，或者，省，市
• Password密碼強度（內置多種校驗規則，長度，復雜度，強度等級，文案全部可自定義，給系統設置一個相對安全的密碼，就用他準沒錯）
• BasicSelect選擇器（擴展選擇器組件，用于各種表單選擇器，簡化使用，內置緩存，可對相同的數據減少http請求，也可手動刷新數據源）

頁面

• 主控臺
• 監控臺
• 工作臺
• 用戶管理
• 個人設置
• 系統設置
• 修改密碼
• 菜單權限管理
• 角色權限管理
• 查詢列表（表格組件示例）
• 更多頁面可在線查看

項目展示

更多頁面、功能，組件，請直接在線預覽查看

在線預覽

AdminPro

在線文檔

Naive Admin NaiveUi 生態最優秀的中后臺框架，全面的系統配置，優質模板，常用組件，真正一站式開箱即用