2022.10.30今天我学习如何使用ruoyi系统，并运行此系统。

一、配置vue.config.js文件

target里面换成自己的后端接口。

 devServer: {
    host: '0.0.0.0',
    port: port,
    open: true,
    proxy: {
      // detail: https://cli.vuejs.org/config/#devserver-proxy
      [process.env.VUE_APP_BASE_API]: {
        // 配置第一个接口地址
        // 第一步连接后端
        target: `http://xxxxxxxxxxx/`,
        changeOrigin: true,
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: ''
        }
      },
      // 配置第二个接口地址
      '/tqgl/': {
        target: `http://xxxxxxxxxx/`,
        changeOrigin: true,
        pathRewrite: {
          '^/tqgl/': ''
        }
      },
    },
    disableHostCheck: true
  },

二、配置.env.development文件

VUE_APP_BASE_API的值放空

# 页面标题
VUE_APP_TITLE = 若依管理系统

# 开发环境配置
ENV = 'development'

# 若依管理系统/开发环境
# 第二步放空
VUE_APP_BASE_API = ''

# 路由懒加载
VUE_CLI_BABEL_TRANSPILE_MODULES = true

前面两步可以初始化项目。

三、编写新的api接口

import request from "@/utils/request";
// 天气管理
// 查询天气列表

// 第三步编写接口
export function listtqgl(city) {
  return request({
    url: '/api/test',
    method: 'get',
    params: {city}
  })
}

四、编写新的view页面

view页面必须与用户管理，登录管理其他页面同级才能生效。

<!--直接添加到外部-->
<template>
  <div>
    <button @click="list()">接口</button>
  </div>
</template>

<script>
import {listtqgl} from '@/api/system/weatherManagement'
import Treeselect from "@riophae/vue-treeselect";

export default {
  data() {
    return {
      loadData: "",
    };
  },
  components:{
    Treeselect
  },

  methods: {
    list() {
      console.log(1);
      // 第四步调用接口
      listtqgl("xx").then((res) => {
        console.log(res);
        this.loadData = res.data;


      });
    },
  },
};
</script>

<style>

</style>

五、修改router/index.js文件

添加一个新的路径，放在公共路由里面。

 // 添加标题
  {
    path: '/weatherManagement',
    component: Layout,
    // hidden: true,
    redirect: 'noredirect',
    children: [
      {
        path: 'weatherManagement',
        component: () => import('@/views/weatherManagement/index'),
        name: 'WeatherManagement',
        meta: { title: '天气管理', icon: 'user' }
      }
    ]
  },

后面三步可以实现添加侧边栏+新的页面效果。