Mikel
来源： VsCode搭建vue通用后台管理系统vue-element-admin_Thinkingcao的博客-CSDN博客_vscode做一个管理系统
vue-element-admin文档： https://panjiachen.github.io/vue-element-admin-site/zh/
在线预览： https://panjiachen.github.io/vue-element-admin/#/dashboard
Vue国内克隆：
vue-admin-template:
git clone https://gitee.com/panjiachen/vue-admin-template.git
vue-element-admin:
git clone https://gitee.com/panjiachen/vue-element-admin.git
一、vue-element-admin介绍
vue-element-admin 是一个后台前端解决方案，它基于 vue 和 element-ui实现。它使用了最新的前端技术栈，内置了i18国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型。相信不管你的需求是什么，本项目都能帮助到你。
建议
本项目的定位是后台集成方案，不太适合当基础模板来进行二次开发。因为本项目集成了很多你可能用不到的功能，会造成不少的代码冗余。如果你的项目不关注这方面的问题，也可以直接基于它进行二次开发。
集成方案: vue-element-admin
基础模板: vue-admin-template
桌面终端: electron-vue-admin
Typescript 版: vue-typescript-admin-template (鸣谢: @Armour)
Others: awesome-project
二、功能
登录 / 注销
权限验证
页面权限
指令权限
权限配置
二步登录
多环境发布
dev sit stage prod
全局功能
国际化多语言
多种动态换肤
动态侧边栏（支持多级路由嵌套）
动态面包屑
快捷导航(标签页)
Svg Sprite 图标
本地/后端 mock 数据
Screenfull全屏
自适应收缩侧边栏
编辑器
富文本
Markdown
JSON 等多格式
Excel
导出excel
导入excel
前端可视化excel
导出zip
表格
动态表格
拖拽表格
内联编辑
错误页面
401
404
組件
头像上传
返回顶部
拖拽Dialog
拖拽Select
拖拽看板
列表拖拽
SplitPane
Dropzone
Sticky
CountTo
综合实例
错误日志
Dashboard
引导页
ECharts 图表
Clipboard(剪贴复制)
Markdown2html
三、前序准备
你需要在本地安装 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（下）
四、目录结构
本项目已经为你生成了一个完整的开发框架，提供了涵盖中后台开发的各类功能和坑位，下面是整个项目的目录结构。
VSCode的个人知识管理和共享系统-JavaScript
zip
0星
超过10%的资源
21.79MB
下载
├── 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
五、安装vue-element-admin
1. 克隆项目
git clone https://github.com/PanJiaChen/vue-element-admin.git
1
2. 进入项目目录
cd vue-element-admin
1
3.安装依赖
npm install
1
4. 设置淘宝镜像源
建议不要用 cnpm 安装 会有各种诡异的bug 可以通过如下操作解决 npm 下载速度慢的问题
npm install –registry=https://registry.npm.taobao.org
1
5. 本地开发 启动项目
npm run dev
1
六、访问
启动完成后会自动打开浏览器访问 http://localhost:9527， 你看到下面的页面就代表操作成功了。
————————————————
版权声明：本文为CSDN博主「Thinkingcao」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/Thinkingcao/article/details/107765365
