# vue2项目初始化开发模板
**Repository Path**: eida/vue2-init
## Basic Information
- **Project Name**: vue2项目初始化开发模板
- **Description**: 这是一个轻量级的操作平台前端解决方案，适用于多数开发场景。基于vue2x开发框架和热门的 element-ui组件库实现。内置了Vue全家桶技术栈、打包Gzip技术，引入了bootstrap-icons、Font Awesome4等图标库，封装了动态路由、权限验证、请求拦截、响应拦截、接口封装和复制文本、数字千位符、cdn方法、全局监听摁钮的防抖、事件节流等实用小功能。集成了一系列常用好用的小插件
- **Primary Language**: JavaScript
- **License**: Unlicense
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 6
- **Forks**: 2
- **Created**: 2020-10-16
- **Last Updated**: 2024-12-01
## Categories & Tags
**Categories**: Uncategorized
**Tags**: 前端架构, Vuex, vue2, vue2开发模板, Web
## README
这是一个轻量级的操作平台前端解决方案，适用于多数开发场景。基于[vue2x](https://v2.cn.vuejs.org/)开发框架和热门的 [element-ui](https://element.eleme.cn/#/zh-CN/component/installation)组件库实现。
> - 配置了Vue全家桶技术栈、全局监听摁钮防抖事件、打包Gzip技术
> - 引入了[bootstrap5](https://v5.bootcss.com/docs/utilities/background/)样式库、[bootstrap-icons](https://icons.bootcss.com/)、Font Awesome4图标库
>- 内置了动态路由、权限验证、请求拦截、响应拦截
> - 封装了复制文本、数字千位符、cdn方法等实用小功能
> - 集成了一系列常用好用的小插件，免去技术选型和技术试错的困扰
>- 预设了三种界面布局方式
> - 引入了unocss量子化样式引擎，搭配iconify异步图标，性能提升不止一点点
>- 运用了vue过滤器、vue指令、vue混入、vue组件，将vue的优势发挥的淋漓尽致
最大的优点就是足够轻量，易拓展、好上手、可塑性极强。
# node环境
注意看 `.nvmrc` 文件
# Project setup
```
npm install
```
### Compiles and hot-reloads for development
```
npm run serve // 用于启动测试环境
npm run serve:pro // 用于启动正式环境
```
### Compiles and minifies for production
```
npm run build // 用于打包正式环境
npm run build:test // 用于打包测试环境
```
### Lints and fixes files
```
npm run lint
```
### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).
# 运行环境
> node 12+
# 技术栈
- ["axios": "^1.3.2"](https://www.axios-http.cn/)
- ["vuex": "^3.6.2"](https://v3.vuex.vuejs.org/zh/)
- ["vue-router": "^3.6.5"](https://v3.router.vuejs.org/zh/)
- ["element-ui": "^2.15.13"](https://element.eleme.cn/#/zh-CN)
- ["xlsx": "^0.18.5"](https://www.npmjs.com/package/xlsx/v/0.18.5)
- ["xlsx-style": "^0.8.13"](https://www.npmjs.com/package/xlsx-style/v/0.8.13)
- ["less": "^4.1.3"](https://lesscss.com.cn/)
- [bootstrap5](https://v5.bootcss.com/)
- [bootstrap-icons@1.10.0](https://icons.bootcss.com/)
- [animate.css@4.1.1](https://animate.style/)
- [font-awesome@4.7.0](https://fontawesome.com.cn/v4)
- [print-js@1.6.0](https://printjs.crabbly.com/)
- [compressorjs@1.2.1](https://blog.csdn.net/qq_42618566/article/details/127615277)
- [cropperjs@1.5.12](https://blog.csdn.net/qq_42618566/article/details/127666311)
# 目录结构
```
├── public # 静态资源（打包不编译）
├ ├── service/demo/ # 接口演示数据
├ └── index.html # 内容模板
├── src # 源码编辑区
├ ├── assets/ # 静态资源（打包会编译）
├ ├── components/ # 封装好的常用组件
├ ├── config/ # 业务配置目录
├ ├── directives/ # 指令
├ ├── filters/ # 过滤器
├ ├── mixins/ # 混入
├ ├── pages/ # 业务页面
├ ├── router/ # 路由配置
├ ├── service/ # 服务请求
├ ├── store/ # 本地存储
├ ├── utils/ # 小工具
├ ├── App.vue # 页面入口
├ └── main.js # 全局入口
├── .env # 全局环境变量配置
├── .env.development # 开发环境变量配置
├── .env.production # 生产环境变量配置
├── .env.test # 测试环境变量配置
├── babel.config.js # babel-loader 配置
├── jsconfig.json #
├── package-lock.json # 锁定依赖包
├── package.json # 依赖清单
├── vue.config.js # vue脚手架配置
```
# 项目对比
示例目前市场长使用较多的项目对比：
| 项目 | [eida-peoject](https://gitee.com/gitee-cherry/init-vue-project) | [vue-admin-template](https://gitee.com/panjiachen/vue-admin-template) | [jeecg](https://gitee.com/jeecg/ant-design-vue-jeecg) |
| -------- | :----------------------------------------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ |
| 目录结构 |  |  |  |
| 语法 | 通俗易懂 | 简单 | 复杂 |
| 可塑性 | 极强 | 强 | 弱 |
| 体积 | 微小 | 大 | 超级臃肿 |
| 耦合度 | 纯前端 | 纯前端 | 前端+后端 |
| 上手程度 | 半年从业者即可 | 一年以上 | 四年以上 |
| 演示地址 | https://init-project-vue2.inscode.cc | https://panjiachen.gitee.io/vue-admin-template | http://boot.jeecg.com |
# 指令
入口文件 src/directives/index.js
| 指令名 | 说明 | 参数 | 例子 |
| ------------ | ------------------------ | -------- | ---------------------------------------------- |
| v-permission | 用于模块、按钮等显示控制 | 权限字符 | 编辑
|
| v-copy | 复制文本 | 无 | 123
|
# 过滤器
入口文件 src/filters/index.js
| 过滤器 | 功能 | 参数 | 使用例子 | 使用结果 |
| ----------- | ------------ | ---- | --------------------------------------- | --------- |
| toThousands | 人名币千位符 | 数字 | {{ 1000000 \| toThousands }}
| 1,000,000 |
# 混入
入口文件 src/mixins/index.js
| 功能 | 文件位置 |
| -------------- | -------------------------- |
| 分页 | src/mixins/pagination.js |
| 页面的重置摁扭 | src/mixins/reset-filter.js |
# 小工具
## 封装的
| 文件位置 | 说明 |
| ------------------------ | ---------------- |
| src/utils/debounce.js | 防抖 |
| src/utils/throttle.js | 节流 |
| src/utils/common.js | 各种时间处理工具 |
| src/utils/cdn.js | 加载依赖 |
| src/utils/export-file.js | 导出文件 |
| src/utils/reader-file.js | 读取文件 |
## 第三方的
- Pdf、word、excel、ppt文件在线预览
- 打印：[printJs](https://printjs.crabbly.com/)
- excel导入和导出：[xlsx](https://www.npmjs.com/package/xlsx)、[xlsx-style](https://www.npmjs.com/package/xlsx-style)
- 富文本编辑器：[vue-quill-editor](https://www.npmjs.com/package/vue-quill-editor)
- [compressorjs](https://www.npmjs.com/package/compressorjs)图片压缩
- [cropperjs](https://fengyuanchen.github.io/cropperjs/)图片裁剪
不用的插件可以卸载以减少项目体积
# 布局说明
预设了3种页面布局：
# 开始上手
1. 删除`public/service/demo/ ` 接口演示数据
2. 将`src/service/api/ `里面的接口路径换成你的业务路径
3. 集成的插件有不用的记得卸载删除
# 命名规则
## 项目
- 自定义html的标签名用 `-` 隔开，如：
- 文件和文件夹的命名用 `-` 隔开，如：device-detail.vue
- 变量及函数以小驼峰命名，如：let tableData = [] 、function restData(){ }
- 页面文件的name命名为文件地址，如**平台客户管理**：name: "management-operation-index",
*页面文件指的是`src/pages/`里的.vue文件，呈现在浏览器的文件*
## 数据
- 配置页面地址访问路径用 `-` 隔开，如 localhost:8080/power-staion
-
# 开发规范
- 每个文件的代码量基本不得超过500行，禁止超过600行！内容过多请组件化、模块化，降低臃肿耦合程度
- 样式尽量使用bootstrap5的类名，减少自行编写css，降低项目体积
- 插件体积超过10k的使用cdn引入。是css的话地址放到`config/cdn-css.json`，是js的的话地址放到`config/cdn-scripts.json`
- 页面的操作摁扭、展示模块等资源需要增加`v-permission`指令以权限控制，权限的数据到平台【资源管理】增加
-
# 技术支持
QQ：771184240
在使用过程中有哪里不懂的可以随时发问