vue.js 管理系统模板_vue2.0管理一个管理系统模板

vue.js 管理系统模板

vue-element-admin (vue-element-admin)

In the past half year, I have been building a backend for management dashboard using Vue. Though the backend has contained greater than 70 pages and over 10 permissions, it still takes insignificant effort to maintain the project. So I decide to make it open source so as to share my development experience and progress on backend. The tech stack is mainly Vue.js+Element+axios. Since it's a personal project, all data requests are simulated with Mock.js. Note: if anyone wants to modify or develop based on this project, please remove the mock files.

在过去的半年中，我一直在使用Vue构建管理仪表板的后端。 尽管后端包含70多个页面和10多个权限，但维护该项目仍需花费微不足道的精力。 因此，我决定将其开源，以便分享我在后端的开发经验和进展。 技术堆栈主要是Vue.js + Element + axios。 由于这是一个个人项目，因此所有数据请求均使用Mock.js进行模拟。 注意：如果有人要基于此项目进行修改或开发，请删除模拟文件。

现场演示 (Live Demo)

http://panjiachen.github.io/vue-element-admin

http://panjiachen.github.io/vue-element-admin

特征 (Features)

• Login/Logout

  登入/登出

• Permission authentication

  权限认证

• Sidebar

  侧边栏

• Breadcrumb

  面包屑

• Rich text editor

  富文本编辑器

• Markdown editor

  Markdown编辑器

• JSON editor

  JSON编辑器

• Drag & drop list

  拖放列表

• SplitPane

  拆分窗格

• Dropzone

  拖放区

• Sticky

  黏

• CountTo

  计数到

• ECharts

  图表

• 401, 404 error page

  401、404错误页面

• Error log

  错误记录

• Exporting to Excel

  导出到Excel

• Table example

  表例

• Interactive table example

  互动表格示例

• Drag & drop table example

  拖放表示例

• Form example

  表格范例

• Multi-environments distribution

  多环境分配

• Dashboard

  仪表板

• Two-factor authentication

  两因素验证

• Collapsing sidebar (support nested routes)

  折叠边栏(支持嵌套路线)

• Mock data

  模拟数据

• cache tabs example

  缓存标签示例

• screenfull

  全屏

• markdown2html

  markdown2html

• views-tab

  视图选项卡

发展历程 (Development)

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

# Install dependencies
npm install

# Or (not recommended for cnpm due to unknown bugs, use taobao mirror instead)
npm install --registry=https://registry.npm.taobao.org

# Run local dev server
npm run dev

Visit in browser: http://localhost:9527

在浏览器中访问： http：// localhost：9527

分配 (Distribution)

# Build staged environment with webpack-bundle-analyzer
npm run build:sit-preview

# Build production environment
npm run build:prod

目录结构 (Directory structure)

├── build                      // build 
├── config                     // config
├── src                        // source code
│   ├── api                    // all requests
│   ├── assets                 // static resource like themes, fonts
│   ├── components             // global public components
│   ├── directive              // global directive
│   ├── filters                // global filters
│   ├── mock                   // mock data
│   ├── router                 // router
│   ├── store                  // global status management
│   ├── styles                 // global styles
│   ├── utils                  // global public functions
│   ├── view                   // view
│   ├── App.vue                // entry view
│   └── main.js                // entry for loading components, initialization
├── static                     // third-party libraries not packed with Webpack
│   └── Tinymce                // rich text
├── .babelrc                   // babel-loader config
├── eslintrc.js                // eslint config
├── .gitignore                 // gitignore
├── favicon.ico                // favicon
├── index.html                 // html template
└── package.json               // package.json

变更日志 (Changelog)

Detailed changes for each release are documented in the release notes.

发行说明中记录了每个发行版的详细更改。

国家管理 (State Management)

Only status of user and app configuration is managed by Vuex. Other data are managed by their own business pages.

Vuex仅管理用户和应用程序配置的状态。 其他数据由其自己的业务页面管理。

演示版 (Demo)

两因素认证，支持微信和QQ (Two-factor authentication, supporting WeChat and QQ)

实时切换主题 (Realtime switching themes)

标签 (tabs)

折叠边栏 (Collapsing sidebar)

拖放表 (Drag & drop table)

互动桌 (Interactive table)

上传裁剪的头像 (Uploading cropped avatar)

错误记录 (Error log)

富文本(与Qiniu，水印和自定义集成) (Rich text (integrated with Qiniu, watermark and customization))

包装台组件 (Packaging table component)

图表 (Charts)

导出到Excel (Exporting to Excel)

翻译自: https://vuejsexamples.com/vue2-0-admin-a-management-system-template/

vue.js 管理系统模板