# vue2.0_element_web **Repository Path**: hyduan_h5/vue2.0_element_web ## Basic Information - **Project Name**: vue2.0_element_web - **Description**: vue 2.0 + vuex 3.0+ vue-router + webpack + ES6/7 + axious + elementUI + 阿里图标iconfont + echars + element-component + 动态路由（后端返回可直接使用path建文件目录 + 前端可配置） - **Primary Language**: JavaScript - **License**: MIT - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 1 - **Forks**: 0 - **Created**: 2021-12-21 - **Last Updated**: 2022-03-22 ## Categories & Tags **Categories**: Uncategorized **Tags**: vue2cli-web, Vue, Vuex, JavaScript, webpack ## README # vue搭建后台管理界面模版（PC端） ------------------------ #### Author information ------------------------ ``` 1. authentic：hyduan 2. authEmail：17835399154@163.com 3. authCsdn: hyduan_h5(https://blog.csdn.net/duanhy_love) 4. authGitee:hyduan_h5(https://gitee.com/hyduan_h5) 5. authWx: hyduan_h5(+v需备注来源) 6. authOccupation:Front end development engineer ``` #### 技术栈 vue 2.0 + vuex 3.0+ vue-router + webpack + ES6/7 + axious + elementUI + 阿里图标iconfont + echars + element-component + 动态路由（后端返回可直接使用path建文件目录 + 前端可配置） #### 注意 后端login接口返回格式（控制菜单及按钮权限） ![image-20210714160442008](C:\Users\86178\AppData\Roaming\Typora\typora-user-images\image-20210714160442008.png) ![img](file:///C:/Users/86178/AppData/Local/Temp/企业微信截图_16310180867878.png) #### 说明 > iconFont官方文档：https://www.iconfont.cn/ > echars 官方文档： https://echarts.apache.org/zh/index.html > element-component官方文档：https://www.npmjs.com/package/element-component > wechat聊天组件官方文档：https://codegi.gitee.io/jwchatdoc/guide/start.html > 新手指引driver.js官方文档github：https://github.com/kamranahmedse/driver.js > 新手指引用法和用例介绍：https://kamranahmed.info/driver.js/ > 新手指引简单的安装使用介绍（中文，非官方）：http://f2ex.cn/driver-js/ >新手指引driver.js官方文档github：https://github.com/kamranahmedse/driver.js 用法和用例介绍：https://kamranahmed.info/driver.js/ 简单的安装使用介绍（中文，非官方）：http://f2ex.cn/driver-js/ > 拖拽组件文档 https://www.itxst.com/vue-draggable/tutorial.html(可排序可拖拽) > 自定义弹窗拖拽指令 v-el-drag-dialog #### 目录结构 ------------------------ ```bash ├── /build/ # 项目构建(webpack)相关配置 ├── /config/ # 项目开发环境配置 ├── /src/ # 源码目录 │ ├── /api/ # 请求 │ ├── /assets/ # 组件静态资源(图片) │ ├── /components/ # 公共组件 | ├── /api/ # 请求接口 │ ├── /router/ # 路由配置 │ ├── /store/ # vuex状态管理 │ ├── /views/ # 路由组件(页面维度) │ ├── /config/ # 接口配置文件（请求地址） │ ├── App.vue # 组件入口 │ └── main.js # 程序入口 ├── /static/ # 非组件静态资源 ├── .babelrc # ES6语法编译配置 ├── .editorconfig # 定义代码格式 ├── .eslintignore # ES6规范忽略文件 ├── .eslintrc.js # ES6语法规范配置 ├── .gitignore # git忽略文件 ├── index.html # 页面入口 ├── package.json # 项目依赖 └── README.md # 项目文档 ``` #### 强调 把模拟数据开始到结束注释掉，下面解除注释即可， 接口地址需要修改config/index.js文件 dev ``` bash proxyTable: { '/api': { target: 'http://xxx.xxx.xxx.xxx:xxx', // 你请求的第三方接口 changeOrigin: true, // 在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题 pathRewrite: { // 路径重写， '^/api': '/api' // 替换target中的请求地址，也就是说以后你在请求http://api.jisuapi.com/XXXXX这个地址的时候直接写成/api即可。 } } }, ``` #### 完成功能 - [x] 登录 -- 完成 - [x] 示例页面 -- 完成 - [x] 401页面 -- 完成 - [x] 404页面 -- 完成 #### 运行项目 ------------------------ ``` bash # install dependencies npm install cnpm install # serve with hot reload at dev npm run dev npm run start npm run serve # serve with hot reload at test npm run serve:test # serve with hot reload at prod npm run serve:prod # build for production with minification npm run build npm run build:test ``` #### 项目源码地址： ------------------------ 码云地址：https://gitee.com/hyduan_h5/vue2.0_element_web #### 软件架构 软件架构说明 #### 使用说明 1. 普通练习可直接Fork本仓库 2. 如需商用请联系作者 3. 出现版权纠纷概不负责 #### 参与贡献 1. Fork 本仓库 2. 新建 Feat_xxx 分支 3. 提交代码 4. 新建 Pull Request #### 特技 1. 使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md 2. Gitee 官方博客 [blog.gitee.com](https://blog.gitee.com) 3. 你可以 [https://gitee.com/explore](https://gitee.com/explore) 这个地址来了解 Gitee 上的优秀开源项目 4. [GVP](https://gitee.com/gvp) 全称是 Gitee 最有价值开源项目，是综合评定出的优秀开源项目 5. Gitee 官方提供的使用手册 [https://gitee.com/help](https://gitee.com/help) 6. Gitee 封面人物是一档用来展示 Gitee 会员风采的栏目 [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)