Vue3+elementPlus工程化案例

 前端解决跨域问题，在vite.config.js中直接配置代理，注意changeOrigin设置为true

 
const baseURL = '/api';

  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080', // 后端服务器地址
        changeOrigin: true, // 是否改变请求域名
        rewrite: (path) => path.replace(/^\/api/, '')//将原有请求路径中的api替换为''
      }
    }
  }

路由，从起点到终点时，决定从起点到终点的路径的进程，在前端工程中，路由指的是根据不同的访问路径，展示不同组件的内容。Vue Router是Vue.js的官方路由，它与Vue.js深度集成，让Vue.js构建单页面应用变得更加轻而易举

如何使用vue路由？

首先安装路由：npm install vue-router@4

记住路由和子路由的标签都是<router-view></router-view>，拼写正确的话标签是会报绿色的，否则结果一定不正确，同时每一个做前端一定要积累这些细节经验

同时仔细检查<el-menu-item index="/article/category">其中的index属性及属性值

在 Vue 中，<el-menu> 是 Element Plus 组件库中的一个导航菜单组件。 router 属性是一个布尔属性（也称为无值属性），它用于启用路由模式。

布尔属性

布尔属性的特点是：

• 如果存在该属性，则其值为 true。
• 如果不存在该属性，则其值为 false。
• 不需要为其赋值，只需要存在即可。

router 属性的作用

当 router 属性被设置时，<el-menu> 会将每个菜单项的 index 属性作为路径来匹配当前的路由，并且点击菜单项时会触发相应的路由跳转。

注意v-if :model="xxx":rules="xxx", v-else :model="xxx":rules="xxx"这种写法，其中model和rules分别代表表单数据对象和表单验证规则，就在elementplus官方文档的最前面两行

<el-form ref="form" size="large" autocomplete="off" v-if="isRegister" :model="registerData"

        :rules="registerDataRules">