Vue-Seed
An out-of-box UI solution for enterprise applications as a Vue boilerplate.
Themes Preview
- dark-version ( Branch: master )
- light-version ( Branch: light-version )
- color-version ( branch: color-version )
Features
- 三套主题模板任你选
- 第三套主题实现了换肤功能
- 实现了动态路由功能
- 完整的登录登出逻辑
- 炫酷的登录页
- 支持配置饿了么组件库主题色
- 实现了国际化
- 附带天气预报功能
- 附带动感音乐
- 封装了图表组件
Build Setup
# 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-serverTech 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
- 由于第三套主题中使用了flex布局，导致只能兼容到IE10，在删除grid布局的情况下。
- dark-version主题中登录页引入了rythm.js，导致其不兼容IE，删除Siderbar.vue里面关于rythm.js的代码就可以了。
- node-sass经常安装失败，可能需要多次 install，如果实在不行，最好翻墙后再次 yarn install。
- 如果要覆盖饿了么组件的样式变量，就编辑assets/scss/element-variables.scss文件。
- 因为谷歌浏览器升级到71版本，导致screenfull.js源码98行有问题，已经将改动后的文件复制到了assets/libs文件夹下。
- 彻底重写了图表组件，提高了组件的扩展性，图表配置需要在使用组件的父组件中编写。
- 切换到 color-version 分支后，需要重新 yarn install 安装独有插件
- 背景音乐的歌名是：Romeo's Tune。
Login Logic
- 请求登录接口，获取到token、用户ID等信息，保存到localStorage或Cookie里
- 请求左侧菜单信息。（如果菜单是固定的，这步忽略）
- 登录成功后，导航到首页
- 在main.js里设置全局请求拦截，在所有请求的header里加上token信息，证明当前已登录
- 在main.js里设置全局接收拦截，如果服务器端的token已过期，返回401，就清空localStorage并重定向到登录页面
- 在路由配置表里，设置全局路由拦截，如果token存在并且要去往登录页面，就不让去，并且重定向到首页
Logout Logic
- 点击退出按钮，清空localStorage，并导航到登录页面
First Visit Logic
- 配置路由表，'/'重定向到首页
- 如果没有登录（本地没有token），首页的请求就会是401，这时候，就会导航到登录页
- 如果已经登录过，本地有token，就待在首页，不用再登录一遍了
Switch Theme Color Logic
- 安装 webpack-theme-color-replacer 插件
- 在 /build/webpack.base.conf.js 中引入 参考
- 在楼上的文件中配置 plugins
- 在颜色选择器所在的组件中，引入步骤一中的插件
- 在步骤四中的文件中，添加插件的逻辑代码，构建options对象，然后调用changeColor方法 参考
Dynamic Routers Logic
- 登录后，从后端请求一个信息数组 arr
- 编写解析函数，将这个 arr 解析成 路由信息数组 routes 和 菜单数组 menuArr
- menuArr 注入到 sidebar.vue中，渲染出菜单
- routes数组 作为参数，传入到 router.addRoutes() 方法中，生成真正的路由树
- 404路由作为最后一项
- 由于实现起来过于复杂，我也懵逼了，还是参考网上的教程吧
License
Anti-996