# vue2-element
**Repository Path**: chen_pengchao/vue2-element
## Basic Information
- **Project Name**: vue2-element
- **Description**: vue 2.6
element-ui 2.14.1
后台管理系统
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 1
- **Created**: 2023-03-15
- **Last Updated**: 2023-03-15
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
```
node.js 版本建议v12以上
```
## 项目启动
```
# 拉取项目
git clone https://gitee.com/blue-cave/vue2-element.git
# 安装依赖
npm install
# 启动服务
npm run dev
浏览器访问地址 http://localhost:9528
# 构建测试环境
npm run build:stage
# 构建生产环境
npm run build:prod
```
## 安装依赖过程中出现node-sass失败，与node.js冲突的情况
| node.js版本 | node-sass版本 | 节点模块 |
|-----------|--------------|------|
| node 19 | 8.0+ | 111 |
| node 18 | 8.0+ | 108 |
| node 17 | 7.0+, <8.0 | 102 |
| node 16 | 6.0+ | 93 |
| node 15 | 5.0+, <7.0 | 88 |
| node 14 | 4.14+ | 83 |
| node 13 | 4.13+, <5.0 | 79 |
| node 12 | 4.12+, <8.0 | 72 |
| node 11 | 4.10+, <5.0 | 67 |
| node 10 | 4.9+, <6.0 | 64 |
| node 8 | 4.5.3+, <5.0 | 57 |
| node < 8 | <5.0 | <57 |
## 目录结构
```
├─public // 文件资源
│ favicon.ico
│ index.html
│
├─my-config.js // 域名，标题，项目版本号，路径映射 以及一些常规配置
│
│
└─src
│ App.vue
│ main.js // 入口
│ permission.js // 全局(路由)守卫
│
├─api
│
├─assets // 静态资源文件
│ └─404_images
│ 404.png
│ 404_cloud.png
│ boy_404.gif
│
├─components // 全局公共组件 公共组件的文件名使用大驼峰，文件名为index
│ │
│ └─SvgIcon
│ index.vue
│
├─icons // 侧边栏的svg
│ │ index.js
│ │ svgo.yml
│ │
│ └─svg
│
├─layout // 侧边栏组件
│ │ index.vue
│ │
│ ├─components
│ │ │ AppMain.vue
│ │ │ index.js
│ │ │ Navbar.vue
│ │ │ Breadcrumb
│ │ │ Hamburger
│ │ │
│ │ └─Sidebar
│ │ FixiOSBug.js
│ │ index.vue
│ │ Item.vue
│ │ Link.vue
│ │ Logo.vue
│ │ SidebarItem.vue
│ │
│ └─mixin
│ ResizeHandler.js
│
├─plugins // 接入到main.js 以减轻main.js中的数据过多
│ directive.js // 全局自定义指令
│ filters.js // 全局自定义过滤器
│ index.js
│
├─router
│ index.js // router的配置文件
│
├─store // Vuex
│ │ getters.js
│ │ index.js
│ │
│ └─modules // vuex的模块
│ app.js // 侧边栏的收缩
│ permission.js // 左侧侧边栏的显示配置，
│ 需要在router中有过配置，
│ 当有权限的需求时可与后端沟通进行动态展示侧边栏的显示
│ settings.js // 侧边栏的LOGO与内容区域Header的fixed
│ user.js // 用户的信息 tip: 头像， token
│
├─styles // 全局公共样式，不要动
│ │ element-variables.scss // element ui的主题配置修改
│ │ global.scss // 主框架的公用样式
│ │ index.scss // 主框架配置文件
│ │ sidebar.scss // 菜单一些样式的配置
│ │ transition.scss // 过渡的配置
│ │ variables.scss // 主框架中共用动态配置
│ │
│ └─project // 请配置关于当前项目的全局样式
│ icon.scss // 当前项目的自定义icon
│ index.scss // 当前项目的公用样式
│ element-ui.scss // 当前项目中的element ui的全局配置修改（为了不影响框架的element ui）
│
├─utils // 全局公共方法 如有添加请去tool中添加
│ │ index.js
│ │ validate.js
│ │ resize.js
│ │
│ ├─request // 请求拦截器的封装
│ │ index.js
│ │
│ └─tool // 可使用 $tool 使用 详细使用方法可进入 plugins/index中查看
│ index.js
│ aes.js // aes加密
│ calendar.js // 农历日历
│ storage.js // 缓存
│ time.js // 时间
│
└─views // 页面资源
```