VsCode搭建vue通用后台管理系统vue-element-admin

旧城等待， 2023-03-04 11:24 121阅读 0赞

**vue-element-admin文档：** [https://panjiachen.github.io/vue-element-admin-site/zh/][https_panjiachen.github.io_vue-element-admin-site_zh]  
**在线预览：** [https://panjiachen.github.io/vue-element-admin/\#/dashboard][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 _ 1]
 *  [手摸手，带你用 vue 撸后台 系列三 (实战篇)][vue _ _]
 *  [手摸手，带你用 vue 撸后台 系列四(vueAdmin 一个极简的后台基础模板)][vue _ _vueAdmin]
 *  [手摸手，带你用 vue 撸后台 系列五(v4.0 新版本)][vue _ _v4.0]
 *  [手摸手，带你封装一个 vue component][vue component]
 *  [手摸手，带你优雅的使用 icon][icon]
 *  [手摸手，带你用合理的姿势使用 webpack4（上）][webpack4]
 *  [手摸手，带你用合理的姿势使用 webpack4（下）][webpack4 1]

# 四、目录结构 #

本项目已经为你生成了一个完整的开发框架，提供了涵盖中后台开发的各类功能和坑位，下面是整个项目的目录结构。

> ├── 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

## 2. 进入项目目录 ##

cd vue-element-admin

## 3.安装依赖 ##

npm install

## 4. 设置淘宝镜像源 ##

建议不要用 cnpm 安装 会有各种诡异的bug 可以通过如下操作解决 npm 下载速度慢的问题

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

## 5. 本地开发 启动项目 ##

npm run dev

# 六、访问 #

启动完成后会自动打开浏览器访问 `http://localhost:9527`， 你看到下面的页面就代表操作成功了。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RoaW5raW5nY2Fv_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RoaW5raW5nY2Fv_size_16_color_FFFFFF_t_70 1]

[https_panjiachen.github.io_vue-element-admin-site_zh]: https://panjiachen.github.io/vue-element-admin-site/zh/
[https_panjiachen.github.io_vue-element-admin_dashboard]: https://panjiachen.github.io/vue-element-admin/#/dashboard
[vue-element-admin]: https://github.com/PanJiaChen/vue-element-admin
[vue-admin-template]: https://github.com/PanJiaChen/vue-admin-template
[electron-vue-admin]: https://github.com/PanJiaChen/electron-vue-admin
[vue-typescript-admin-template]: https://github.com/Armour/vue-typescript-admin-template
[awesome-project]: https://github.com/PanJiaChen/vue-element-admin/issues/2312
[vue _]: https://juejin.im/post/59097cd7a22b9d0065fb61d2
[vue _ 1]: https://juejin.im/post/591aa14f570c35006961acac
[vue _ _]: https://juejin.im/post/593121aa0ce4630057f70d35
[vue _ _vueAdmin]: https://juejin.im/post/595b4d776fb9a06bbe7dba56
[vue _ _v4.0]: https://juejin.im/post/5c92ff94f265da6128275a85
[vue component]: https://segmentfault.com/a/1190000009090836
[icon]: https://juejin.im/post/59bb864b5188257e7a427c09
[webpack4]: https://juejin.im/post/5b56909a518825195f499806
[webpack4 1]: https://juejin.im/post/5b5d6d6f6fb9a04fea58aabc
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RoaW5raW5nY2Fv_size_16_color_FFFFFF_t_70]: /images/20230208/e09212848b974efca22e3b911c3beb69.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RoaW5raW5nY2Fv_size_16_color_FFFFFF_t_70 1]: /images/20230208/6926244e519a42e6ac3709b71b922d08.png