# vue-admin-web-v1

**Repository Path**: chenbz2/vue-admin-web-v1

## Basic Information

- **Project Name**: vue-admin-web-v1
- **Description**: 后台初始化模版
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-04-04
- **Last Updated**: 2021-07-02

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 后台管理系统模版

<br />

### # 项目截图
![输入图片说明](https://images.gitee.com/uploads/images/2021/0408/154029_02773fee_5325760.png "Snipaste_2021-04-08_15-39-32.png")
![输入图片说明](https://images.gitee.com/uploads/images/2021/0404/172645_ebb7c556_5325760.png "Snipaste_2021-04-04_17-25-15.png")

<br />

#### # v1版本

1. - [x] axios封装
2. - [x] api统一管理
3. - [x] CDN加速
4. - [x] 自定义404页面
5. - [x] 打包优化
6. - [x] ECharts 图表



#### # 目录详情

```
.
├── 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  // 诗歌接口
│   │   └── index.js
│   ├── assets    // 用于存放着各种静态文件，比如图片
│   │   └── css   // css
│   │       └── global.css  // 全局css
│   ├── components    // 用于存放我们的公共组件
│   │   ├── 404  // 404组件
│   │   │   └── index.vue
│   │   ├── Header  // 顶部组件
│   │   │   └── index.vue
│   │   └── LeftMenu  // 侧边栏组件
│   │       └── 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  // 后台模版页面
│           ├── home
│           │   └── index.vue  // 后台管理主页
│           └── index.vue  // 后台模版主入口页面
└── vue.config.js
```

<br />

### # 使用说明

1、进入项目

```
cd vue-admin-web-v1
```

> 以你的实际项目地址为准

2、初始化项目

```
npm install
```

3、通过开发模式运行

```
npm run serve
```

<br />

### # 封装使用说明

#### # `vuex`

获取变量

```
this.$store.state.变量名
```

获取方法

```
this.$store.getters.方法名
```

同步设置变量

```
this.$store.commit('方法名', {变量名: '值'})
```

异步设置方法

```
this.$store.dispatch('方法名', {变量名: '值'})
```

<br />

#### # `api`

```js
this.$api.模块名.方法名(params).then(res =>{
  console.log(res);
})
```

<br />

#### # `cookie`

使用方法

```js
this.$cookie.方法名()
```

<br />

#### # 跨域接口

找到根目录下 `vue.config.js` 

```js
module.exports = {
  devServer: {
    ...
    proxy: {
      '/api': {
        target: '后端请求接口',  // 后端请求接口
        changeOrigin: true,  // 允许跨域
        pathRewrite: {
          '^/api': ''
        }
      }
    },
    ......
  },
}
```

<br />

### # 部署

1、运行打包命令

```
npm run build
```

2、项目文件夹多出来的 `dist` 文件夹就是我们已经打包好的项目文件夹