# vue-seed **Repository Path**: vue-proc/vue-seed ## Basic Information - **Project Name**: vue-seed - **Description**: a boilerplate for large vue project with ElementUI 2.x - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2021-05-14 - **Last Updated**: 2021-05-14 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # Vue-Seed An out-of-box UI solution for enterprise applications as a Vue boilerplate. ![author](https://img.shields.io/badge/author-jasonbai-orange.svg) ![Prs](https://img.shields.io/badge/Prs-welcome-brightgreen.svg) [![LICENSE](https://img.shields.io/badge/license-Anti%20996-blue.svg)](https://github.com/996icu/996.ICU/blob/master/LICENSE) ## Themes Preview 1. [dark-version](http://lubanseven.gitee.io/dark-version/#/signin) ( Branch: master ) 2. [light-version](http://lubanseven.gitee.io/show/#/signin) ( Branch: light-version ) 3. [color-version](http://lubanseven.gitee.io/color-version/#/signin) ( branch: color-version ) ## Features 1. 三套主题模板任你选 2. 第三套主题实现了换肤功能 3. 实现了动态路由功能 4. 完整的登录登出逻辑 5. 炫酷的登录页 6. 支持配置饿了么组件库主题色 7. 实现了国际化 8. 附带天气预报功能 9. 附带动感音乐 10. 封装了图表组件 ## Build Setup ``` bash # install dependencies npm install # serve with hot reload at localhost:1024 yarn run dev # build for production with minification yarn run build # visualize output files yarn run analysis # preview output files yarn add http-server -g cd dist http-server ``` ## Tech Stack * Vue @ 2.5.9 * Vue-Router * Vue-cli @ 2.x * Vue-i18n * Vuex * ES6 * Element-UI @ 2.8.2 * eCharts @ 4.2.1 * Axios * Jsonp * Sass * Animate.CSS * Typed.js * Font-Awesome * MockJS * Yarn * babel-polyfill ( Compatible with IE ) ## Other Plugins Maybe Need * intro.js 引导页 * vue-qr 二维码生成模块 * vuedraggable 拖拽功能 * vue-particles 粒子效果 * js-cookie 读写cookie模块 * dayjs 日期处理模块 * rythm.js 音频节奏可视化模块 * vuescroll.js 一个滚动条插件 * crypto-js 加密算法,登录时使用 * clipboard.js 复制粘贴 * vue-baidu-map 封装的百度地图插件 ## Notes 1. 由于第三套主题中使用了flex布局,导致只能兼容到IE10,在删除grid布局的情况下。 2. dark-version主题中登录页引入了rythm.js,导致其不兼容IE,删除Siderbar.vue里面关于rythm.js的代码就可以了。 3. node-sass经常安装失败,可能需要多次 install,如果实在不行,最好翻墙后再次 yarn install。 4. 如果要覆盖饿了么组件的样式变量,就编辑assets/scss/element-variables.scss文件。 5. 因为谷歌浏览器升级到71版本,导致screenfull.js源码98行有问题,已经将改动后的文件复制到了assets/libs文件夹下。 6. 彻底重写了图表组件,提高了组件的扩展性,图表配置需要在使用组件的父组件中编写。 7. 切换到 color-version 分支后,需要重新 yarn install 安装独有插件 8. 背景音乐的歌名是:Romeo's Tune。 ## Login Logic 1. 请求登录接口,获取到token、用户ID等信息,保存到localStorage或Cookie里 2. 请求左侧菜单信息。(如果菜单是固定的,这步忽略) 3. 登录成功后,导航到首页 4. 在main.js里设置全局请求拦截,在所有请求的header里加上token信息,证明当前已登录 5. 在main.js里设置全局接收拦截,如果服务器端的token已过期,返回401,就清空localStorage并重定向到登录页面 6. 在路由配置表里,设置全局路由拦截,如果token存在并且要去往登录页面,就不让去,并且重定向到首页 ## Logout Logic 1. 点击退出按钮,清空localStorage,并导航到登录页面 ## First Visit Logic 1. 配置路由表,'/'重定向到首页 2. 如果没有登录(本地没有token),首页的请求就会是401,这时候,就会导航到登录页 3. 如果已经登录过,本地有token,就待在首页,不用再登录一遍了 ## Switch Theme Color Logic 1. 安装 [webpack-theme-color-replacer](https://www.npmjs.com/package/webpack-theme-color-replacer) 插件 2. 在 /build/webpack.base.conf.js 中引入 [参考](https://github.com/JasonBai007/vue-seed/blob/color-version/build/webpack.base.conf.js#L5-L6) 3. 在楼上的文件中配置 [plugins](https://github.com/JasonBai007/vue-seed/blob/color-version/build/webpack.base.conf.js#L65-L74) 4. 在颜色选择器所在的组件中,引入步骤一中的[插件](https://github.com/JasonBai007/vue-seed/blob/color-version/src/components/ColorsPicker.vue#L7) 5. 在步骤四中的文件中,添加插件的逻辑代码,构建options对象,然后调用changeColor方法 [参考](https://github.com/JasonBai007/vue-seed/blob/color-version/src/components/ColorsPicker.vue#L36-L50) ## Dynamic Routers Logic 1. 登录后,从后端请求一个信息数组 arr 2. 编写解析函数,将这个 arr 解析成 路由信息数组 routes 和 菜单数组 menuArr 3. menuArr 注入到 sidebar.vue中,渲染出菜单 4. routes数组 作为参数,传入到 router.addRoutes() 方法中,生成真正的路由树 5. 404路由作为最后一项 6. 由于实现起来过于复杂,我也懵逼了,还是参考网上的[教程](https://juejin.im/post/5c83ccb75188257e342db5c9)吧 ## License Anti-996