# yd **Repository Path**: more_distance/yd ## Basic Information - **Project Name**: yd - **Description**: ydydydydyd - **Primary Language**: Unknown - **License**: MIT - **Default Branch**: newRouter - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2022-03-06 - **Last Updated**: 2024-03-29 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 质量外呼 > 根据vue-admin-template模板进行开发。它只包含了 Element UI & axios & iconfont & permission control & lint，这些搭建后台必要的东西。 目前版本为 `v4.0+` 基于 `vue-cli` 进行构建。 ## Build Setup ```bash # 进入项目目录 cd yd # 安装依赖 npm install # 建议不要直接使用 cnpm 安装以来，会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题 npm install --registry=https://registry.npm.taobao.org # 启动服务 npm run dev ``` ## 项目目录 ```bash ├── build # 构建相关 ├── public # 静态资源 │ │── favicon.ico # favicon图标 │ └── index.html # html模板 ├── src # 源代码 │ ├── api # 所有请求 │ ├── assets # 主题 字体等静态资源 │ ├── components # 全局公用组件 │ ├── icons # 项目所有 svg icons │ ├── layout # 全局 layout │ ├── router # 路由 │ ├── store # 全局 store管理 │ ├── styles # 全局样式 │ ├── utils # 全局公用方法 │ ├── views # views 所有页面 │ ├── App.vue # 入口页面 │ ├── main.js # 入口文件 加载组件 初始化等 │ ├── settings.js # 页面设置 │ └── permission.js # 权限管理 ├── tests # 测试 ├── .env.xxx # 环境变量配置 ├── vue.config.js # vue-cli 配置 ├── postcss.config.js # postcss 配置 └── package.json # package.json ``` 浏览器访问 [http://localhost:8080](http://localhost:8080) ## 发布 ```bash # 构建测试环境 npm run build:test # 构建生产环境 npm run build:prod //集团打包 更换集团和省内打包 项目根目录/.env.production文件，注释相关代码 ``` ## 使用第三方插件 ```bash # file-saver 提供文件下载上传 # jszip 文件压缩 # highcharts 3d饼图 文档 https://www.hcharts.cn/demo/highcharts/3d-pie/dark-unica # xlsx （项目舍弃，暂时没用到） # element-ui 全局UI #echarts 图标 # echarts-liquidfill（项目舍弃） echarts波纹效果 文档 https://github.com/ecomfe/echarts-liquidfill#outline-style ``` ```bash #更换请求接口地址 项目根目录/src/utils/baseUrl.js文件 关键变量: [process.env.VUE_APP_RUL] 该变量控制也在 项目根目录/.env.production文件 ``` ## 注意 ```bash # .env .env文件为项目打包的入口文件，不得删除，打包之前的都会先走.env的配置，例如区分正式、测试，以及正式测试相关的接口控制 ``` ## 更换网页名称 ```bash 项目根目录/src/settings.js文件 该文件还可以添加其他的一些全局默认配置，例如人员名称，logo ``` ## 全局路由控制 ```bash 项目根目录/src/router/index.js文件 该文件记录一些默认显示的路由，路由模式为普通模式（带hash值） 其他需要权限的路由为接口返回，文件目录为：/src/api/user.js 方法名为 [GetMenuList] 该路由由vuex控制，具体实现代码为/src/layout/相关文件 主要文件为 src/layout/components/Sidebar/index.vue 主要处理逻辑为 computed=>routes函数 主要实现合并路由方法为 [this.$router.options.routes.concat(this.$store.state.user.menu)] 第40行代码 接口返回的路由数据转为router对象代码实现/src/store/modules/user.js文件；由vuex控制 actions处理方法为： [getMenu] 分发路由action代码路径：根目录/permission.js文件（和main.js文件同级） 处理函数方法名为 [router.beforeEach]， 具体实现：[store.dispatch('user/getMenu')] ``` 更多信息请参考 [使用文档](https://panjiachen.github.io/vue-element-admin-site/zh/)