1、功能描述

前台VUE界面可以显示后台服务的配置文件，同时可以在前台修改后台服务的配置文件，并保持到后台。

2、搭建VUE开发环境

2.1 下载 安装 nodejs

https://pan.baidu.com/s/1A5ZyJD9h1JK23Ftp_v4_pA   提取码 frt8

1）安装目录自定义

E:\Program Files\nodejs

安装后验证

node -v

npm -v

2.2安装后配置

1）在cmd 命令行中配置

npm config set prefix "E:\Program Files\nodejs\node_global"

手工创建文件夹E:\Program Files\nodejs\node_cache

npm config set cache "E:\Program Files\nodejs\node_cache"

2）配置环境变量

新建系统变量

将 AppData\Roaming\npm环境变量替换为E:\Program Files\nodejs\node_global

配置用户变量

3）配置npm

因为npm连接的数据源网站太慢，可以使用淘宝提供的npm数据源

npm configset registry https://registry.npm.taobao.org

安装cnpm(可选，与配置了npm的数据源二选一，我选择第二种方式)

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装express

cnpm install express -g

2.3 安装vue

cnpm install -g @vue/cli

vue安装后验证

3、前端功能开发

3.1 创建vue工程

进入想创建工程的目录E:\IdeaProjects\sysusermgweb 执行命令

vue create sysusermgmtfront

创建vue项目

添加前台依赖

vue add element     element UI 框架

npm install axios     用于网络请求

npm install vuex --save   用于管理状态

npm install vue-router   用于实现两个 Vue 页面的跳转

4、后台功能开发

4.1 引入依赖

<dependency>

    <groupId>org.jyaml</groupId>

    <artifactId>jyaml</artifactId>

    <version>1.3</version>

</dependency>

参考博客：

https://www.cnblogs.com/resentment/p/5872798.html

https://blog.csdn.net/u010466329/article/details/73839917