JasonBai007 / Vue Seed
Licence: other
a boilerplate for large vue project with ElementUI 2.x
Stars: ✭ 555
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Vue Seed
Vue Element Admin
🎉 A magical vue admin https://panjiachen.github.io/vue-element-admin
Stars: ✭ 73,044 (+13061.08%)
Mutual labels: vue-cli, axios, admin, element-ui
Vue Blog
🎉 基于vue全家桶 + element-ui 构建的一个后台管理集成解决方案
Stars: ✭ 208 (-62.52%)
Mutual labels: vue-cli, axios, admin, element-ui
Ruoyi Vue Fast
(RuoYi)官方仓库 基于SpringBoot,Spring Security,JWT,Vue & Element 的前后端分离权限管理系统
Stars: ✭ 107 (-80.72%)
Mutual labels: vue-cli, axios, admin, element-ui
D2 Admin
An elegant dashboard
Stars: ✭ 11,012 (+1884.14%)
Mutual labels: vue-cli, axios, admin, element-ui
Ruoyi Vue
(RuoYi)官方仓库 基于SpringBoot,Spring Security,JWT,Vue & Element 的前后端分离权限管理系统
Stars: ✭ 596 (+7.39%)
Mutual labels: vue-cli, axios, admin, element-ui
Nx Admin
👍 A magical 🐮 ⚔ vue admin,记得star
Stars: ✭ 2,497 (+349.91%)
Mutual labels: vue-cli, axios, admin, element-ui
Vue Admin Beautiful
🚀🚀🚀vue3 admin,vue3.0 admin,vue后台管理,vue-admin,vue3.0-admin,admin,vue-admin,vue-element-admin,ant-design,vue-admin-beautiful-pro,vab admin pro,vab admin plus主线版本基于element-plus、element-ui、ant-design-vue三者并行开发维护,同时支持电脑,手机,平板,切换分支查看不同的vue版本,element-plus版本已发布(vue3,vue3.0,vue,vue3.x,vue.js)
Stars: ✭ 10,968 (+1876.22%)
Mutual labels: vue-cli, axios, admin, element-ui
vue-admin-better
🚀🚀🚀vue admin,vue3 admin,vue3.0 admin,vue后台管理,vue-admin,vue3.0-admin,admin,vue-admin,vue-element-admin,ant-design,vue-admin-beautiful-pro,vab admin pro,vab admin plus,vue admin plus,vue admin pro
Stars: ✭ 12,962 (+2235.5%)
Mutual labels: admin, vue-cli, axios, element-ui
Vue Admin Template
a vue2.0 minimal admin template
Stars: ✭ 15,411 (+2676.76%)
Mutual labels: vue-cli, axios, element-ui
vue-admin-work
🎉🎉🚀🚀🚀🚀vue-admin-work是一个中后台系统管理方案。使用 vue2.x 及周边全家桶工具开发而来。支持多种功能,不同角色权限🚀🚀🚀🎉🎉
Stars: ✭ 74 (-86.67%)
Mutual labels: admin, axios, element-ui
Fantastic Admin
一款开箱即用的 Vue 中后台管理系统框架,基于ElementUI,兼容PC、移动端,vue-admin, vue-element-admin, vue后台
Stars: ✭ 153 (-72.43%)
Mutual labels: vue-cli, admin, element-ui
Vue Todos
vue最新实战项目教程,从零开始,一步一个脚印,循序渐进。跟着我一起学习vue吧!
Stars: ✭ 1,659 (+198.92%)
Mutual labels: vue-cli, axios, element-ui
vue2.0-SellPosSystem
vue2.0实战项目——简单的快餐店系统
Stars: ✭ 35 (-93.69%)
Mutual labels: vue-cli, axios, element-ui
Vue Cms
基于 Vue 和 ElementUI 构建的一个企业级后台管理系统
Stars: ✭ 415 (-25.23%)
Mutual labels: vue-cli, axios, element-ui
madao admin manage
🎉 VUE前后端分离管理系统,基于RBAC的后台管理。
Stars: ✭ 38 (-93.15%)
Mutual labels: vue-cli, axios, element-ui
vue-element-admin-ts
vue-element-admin 的 typescript 版本
Stars: ✭ 101 (-81.8%)
Mutual labels: admin, axios, element-ui
vue-element-admin
Vuejs实例-Vuejs2.0全家桶结合ELementUI制作后台管理系统http://www.cnblogs.com/weiqinl/p/6873761.html
Stars: ✭ 97 (-82.52%)
Mutual labels: vue-cli, axios, element-ui
Vue Admin Design
基于vue + elementUI的管理系统模板
Stars: ✭ 279 (-49.73%)
Mutual labels: vue-cli, axios, element-ui
Vue element shopmanage
基于vue+element的商品后台管理
Stars: ✭ 75 (-86.49%)
Mutual labels: vue-cli, axios, element-ui
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-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
- 由于第三套主题中使用了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
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].