# vue-admin-web-v2
**Repository Path**: chenbz2/vue-admin-web-v2
## Basic Information
- **Project Name**: vue-admin-web-v2
- **Description**: No description available
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 1
- **Created**: 2021-04-12
- **Last Updated**: 2022-02-27
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
## 后台管理系统模版
### # 项目截图
#### # v2版本
1. - [x] axios封装
2. - [x] api统一管理
3. - [x] CDN加速
4. - [x] 自定义404页面
5. - [x] 打包优化
6. - [x] ECharts 图表
7. - [x] 富文本
8. - [x] Markdown编辑器
9. - [x] 全局路由守卫
10. - [x] 自定义权限指令（v-permissions）
11. - [x] 请求加载动画（请求太快会一闪而过，根据需求自定义删减）
12. - [x] 返回顶部
13. - [x] 图片裁剪
14. - [x] 切换路由顶部加载动画
#### # 目录详情
```
.
├── README.md
├── babel.config.js // 是一个工具链，主要用于在当前和较旧的浏览器或环境中将ES6的代码转换向后兼容（低版本ES）
├── package-lock.json // 是在npm install时候生成的一份文件，用于记录当前状态下实际安装的各个npm package的具体来源和版本号
├── package.json // 模块基本信息项目开发所需要的模块，版本，项目名称。
├── public // 用于存放静态资源
│ ├── favicon.ico
│ └── index.html // 是一个模板文件，作用是生成项目的入口文件
├── src // 是存放各种vue文件的地方
│ ├── App.vue // 是主vue模块，主要是使用router-link引入其他模块，App.vue是项目的主组件，所有的页面都是在App.vue下切换的
│ ├── api // 全局api管理
│ │ ├── apiopen // 开放api接口
│ │ │ └── api.apiopen.top.js // 诗歌接口
│ │ ├── image // 图片接口
│ │ │ └── index.js // 图片上传接口
│ │ └── index.js
│ ├── assets // 用于存放着各种静态文件，比如图片
│ │ └── css // css
│ │ └── global.css // 全局css
│ ├── components // 用于存放我们的公共组件
│ │ ├── 404 // 404组件
│ │ │ └── index.vue
│ │ ├── Header // 顶部组件
│ │ │ └── index.vue
│ │ └── LeftMenu // 侧边栏组件
│ │ └── index.vue
│ │ ├── Markdown // Markdown
│ │ │ └── index.vue
│ │ ├── TinyMce // 富文本
│ │ │ └── index.vue
│ │ └── VueCropper // 图片裁剪
│ │ └── index.vue
│ ├── main.js // 入口文件，主要作用是初始化vue实例，同时可以在此文件中引用某些组件库或者全局挂载一些变量
│ ├── router
│ │ └── index.js // vue-router路由文件
│ ├── static
│ ├── store
│ │ └── index.js // 是vuex的文件，主要用于项目里边的一些状态保存。比如state、mutations、actions、getters、modules
│ ├── utils // 工具类
│ │ ├── cookie.js // cookie封装
│ │ └── reques.js // axios封装
│ └── views
│ ├── login
│ │ └── index.vue // 登录页面
│ └── system // 后台模版页面
│ ├── cropper
│ │ └── index.vue // 图片裁剪
│ ├── editor // 编辑器
│ │ ├── Markdown.vue // Markdown
│ │ └── Tinymce.vue // 富文本
│ ├── help
│ │ └── index.vue // 帮助中心
│ └── table // 表格管理
│ ├── components
│ │ ├── table1.vue // 弹窗编辑表格
│ │ └── table2.vue // 内联编辑表格
│ └── index.vue
│ ├── home
│ │ └── index.vue // 后台管理主页
│ └── index.vue // 后台模版主入口页面
└── vue.config.js
```
### # 使用说明
1、进入项目
```
cd vue-admin-web-v2
```
> 以你的实际项目地址为准
2、初始化项目
```
npm install
```
3、通过开发模式运行
```
npm run serve
```
### # 封装使用说明
#### # `vuex`
获取变量
```
this.$store.state.变量名
```
获取方法
```
this.$store.getters.方法名
```
同步设置变量
```
this.$store.commit('方法名', {变量名: '值'})
```
异步设置方法
```
this.$store.dispatch('方法名', {变量名: '值'})
```
#### # `api`
```js
this.$api.模块名.方法名(params).then(res =>{
console.log(res);
})
```
#### # `cookie`
使用方法
```js
this.$cookie.方法名()
```
#### # 跨域接口
找到根目录下 `vue.config.js`
```js
module.exports = {
devServer: {
...
proxy: {
'/api': {
target: '后端请求接口', // 后端请求接口
changeOrigin: true, // 允许跨域
pathRewrite: {
'^/api': ''
}
}
},
......
},
}
```
### # 部署
1、运行打包命令
```
npm run build
```
2、项目文件夹多出来的 `dist` 文件夹就是我们已经打包好的项目文件夹