# vue-next-element-plus-admin

**Repository Path**: flyflyrun/vue-next-element-plus-admin

## Basic Information

- **Project Name**: vue-next-element-plus-admin
- **Description**: 尝试使用vue3和element-plus搭建管理系统按照vue-element-admin的来
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: https://chumengyouying.gitee.io/vue-next-element-plus-admin
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-08-04
- **Last Updated**: 2021-08-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue-next-element-plus-admin

## Project setup
```
yarn install
```

### Compiles and hot-reloads for development
```
yarn serve
```

### Compiles and minifies for production
```
yarn build
```

### Lints and fixes files
```
yarn lint
```

### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).


### 其中添加使用的tailwindcss v2中 暂时无法使用8版本的 autoprefixer 会出现 `Error: PostCSS plugin tailwindcss requires PostCSS 8.`这样子的错误  即便已经升级到了psotcss8 
```
npm uninstall tailwindcss postcss autoprefixer
npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

yarn remove tailwindcss postcss autoprefixer
yarn add -D tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

npm uninstall tailwindcss @tailwindcss/postcss7-compat
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

yarn remove tailwindcss @tailwindcss/postcss7-compat
yarn add -D tailwindcss@latest postcss@latest autoprefixer@latest

```


### svg文件放入时要注意把svg中的fill颜色去除  可以使用配置的svgo命令   配置内容如下
- 存在问题  没找到去除下载的svg文件中去除内联独立svg的标签去除方式 添加对应 removeXMLNS 插件配置运行后会有问题 webStorm无法正常识别出来 显示文件损坏
```javascript
// https://www.npmjs.com/package/svgo
module.exports = {
    plugins: [
        {
            name: 'removeAttrs',// svgo 中的插件名称
            params: {
                attrs: ['fill', 'fill-rule'] // 这里设置了去除svg中的属性  
            }
        }
    ]
}

```

### 关于vuex的使用  不同模块中的action中的方法似乎混合到了一块  但是不同模块中存在相同名称的方法又不会报错  但是在调用的时候两个事件都会执行


### 关于路由设计思路
1. 将router中预设好所有页面  分为动态路由和静态路由
2. 设置路由守卫，在进入新页面前对vuex中可访问的路由列表进行读取，如果该列表为空则向后端进行请求获取用户可以访问的动态路由列表
3. 在beforeEach对该将要进入的页面进行权鉴，如果在可访问列表中则进入该页面，如果不存在则进入到404页面