youngswell / vue-seed

a boilerplate for large vue project with ElementUI 2.x

Vue-Seed

An out-of-box UI solution for enterprise applications as a Vue boilerplate.

Themes Preview

1. dark-version ( Branch: master )
2. light-version ( Branch: light-version )
3. color-version ( branch: color-version )

Features

1. 三套主题模板任你选
2. 第三套主题实现了换肤功能
3. 实现了动态路由功能
4. 完整的登录登出逻辑
5. 炫酷的登录页
6. 支持配置饿了么组件库主题色
7. 实现了国际化
8. 附带天气预报功能
9. 附带动感音乐
10. 封装了图表组件

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-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 插件
2. 在 /build/webpack.base.conf.js 中引入 参考
3. 在楼上的文件中配置 plugins
4. 在颜色选择器所在的组件中，引入步骤一中的插件
5. 在步骤四中的文件中，添加插件的逻辑代码，构建options对象，然后调用changeColor方法 参考

Dynamic Routers Logic

1. 登录后，从后端请求一个信息数组 arr
2. 编写解析函数，将这个 arr 解析成 路由信息数组 routes 和 菜单数组 menuArr
3. menuArr 注入到 sidebar.vue中，渲染出菜单
4. routes数组 作为参数，传入到 router.addRoutes() 方法中，生成真正的路由树
5. 404路由作为最后一项
6. 由于实现起来过于复杂，我也懵逼了，还是参考网上的教程吧

License

Anti-996