Vue+SpringBoot+SpringCloud前端搭建
文章平均质量分 84
前端环境搭建详细步骤
Java程序之猿
这个作者很懒,什么都没留下…
展开
-
SpringBoot + Spring Cloud +Vue 管理系统前端搭建(九、动态加载菜单)
1、添加store 我们先添加几个store状态,后续需要用来共享使用 首先,我们在store/modules下的app.js中添加一个menuRouteLoaded状态,来判断是否加载过路由 然后在store、modules下新建一个menu.js,在index.js中引入,里面保存加载后的导航菜单数据。menu.js代码如下:export default {state: {navTree: [], // 导航菜单树},...原创 2021-08-06 20:45:40 · 1480 阅读 · 6 评论 -
SpringBoot + Spring Cloud +Vue 管理系统前端搭建(八、头部功能组件)
今天我们说一下头部一些功能,比如主题切换、国际换语言、用户信息等。首先我们写一个主题切换的组件一、主题切换组件 在components目录下创建主题切换器组件ThemePicker,由于代码比较多,所以就不粘贴代码了,有需要的请私信博主。引入组件import ThemePicker from "@/components/ThemePicker"添加切换按钮 我们可以选择图中的颜色修改主题颜色二、语言切换组件三、...原创 2021-07-10 21:12:09 · 341 阅读 · 2 评论 -
SpringBoot + Spring Cloud +Vue 管理系统前端搭建(七、管理应用状态)
最近公司的事情比较多,所以好久没有更新了,今天我们写一下这个Vue持久化 在很多应用场景下,我们需要在组件之间共享状态,还有一些全局变量,我们需要在很多地方用的,这就存在了共享。Vuex是一个专门为vue.js应用开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。 Vuex官网:https://vuex.vuejs.org/zh/安装步骤1、安装依赖 执行命令: npm add ...原创 2021-07-01 21:08:46 · 360 阅读 · 2 评论 -
SpringBoot + Spring Cloud +Vue 管理系统前端搭建(六、完善登录流程)
这里我们简单做一个登录界面,界面如图:话不多说直接上代码首先我们修改登录界面login.vue原创 2021-06-14 11:04:03 · 17588 阅读 · 13 评论 -
SpringBoot + Spring Cloud +Vue 管理系统前端搭建(五、多语言国际化)
Vue 对国际化提供了很好的支持,下面我们来说一下如何国际化安装依赖执行原创 2021-06-13 18:26:13 · 1692 阅读 · 1 评论 -
SpringBoot + Spring Cloud +Vue 管理系统前端搭建(四、引入第三方图标库)
大多数Vue前端大家都会用Element UI图标,Element UI提供的图标比较少,所以我们要引入第三方的图标库。原创 2021-06-13 10:47:06 · 312 阅读 · 0 评论 -
SpringBoot + Spring Cloud +Vue 管理系统前端搭建(三、工具模块封装)
封装背景 使用axios发起一个请求是比较简单的事情,但是axios没有进行封装复用,项目越来越大,会yin'q原创 2021-06-11 21:57:31 · 2694 阅读 · 11 评论 -
SpringBoot + Spring Cloud +Vue 管理系统前端搭建(二、visual studio code开发前端项目)
我们打开visual studio code , 选择文件------------->将文件夹添加到工作区,导入我们的项目安装Element导入后,我们安装以下element官网:https://element.eleme.cn/#/zh-CN/component/installation安装命令:npm add element-ui或者也可以用yarn安装完成后,我们在main.js中引入Elementimport Vue from 'vue'import App .原创 2021-05-09 21:52:24 · 9141 阅读 · 38 评论 -
SpringBoot + Spring Cloud +Vue 管理系统前端搭建(一、搭建前端环境)
我们前台用的是Vue,大家可以参看以下官网学习Vue官网:https://cn.vuejs.org/Vue教程:https://www.runoob.com/vue2/vue-tutorial.htmlVue-Router教程:https://www.runoob.com/vue2/vue-tutorial.htmlVuex教程:https://vuex.vuejs.org/zh/guide/Element教程:https://element-plus.org/#/zh-CN开.原创 2021-05-08 23:23:39 · 1109 阅读 · 2 评论