一、config.default.ts
1.1设置port，ip,projectname,serverhost(http)
export(向外暴露) 使得其他js调用此属性对象
/**
* 前端项目配置文件
*/
const projectName = '融合管理平台' // 项目名称
const ip = '127.0.0.1'
const port= '9090'
const serverHost = 'http://'+ip+':'+port // 接口服务器地址 举例:http://127.0.0.1:9090
export { projectName, serverHost }
二、 index.js
2.1引用router (index.js)
import {createRouter,createwebHistory} from "vue-router"
const router = createRouter({
history:createwebHistory(import.meta.env.BASE_URL),
routes: [
{
path:'/./',
name:'home',
component:() => import(''),
},
],
})
export default router
PS:后续的name和path不能重复
2.2全局后置守卫修改标题
router.afterEach((to) =>{
document.title = to.meta.title ? `${to.meta.title}–${projectName}`:projectName
})
参数 to：即将去到的目标路由对象
2.3全局前置守卫 拦截
作用：提前拦截，是否返回空路由
router.beforeEach((to,from,next) =>{
if(to.matched.length ===0){
next("/404")
}else {
next()
}
})
to.match.length===0:判断访问的路由是否为空
注意为=== 不是=
三、main.js
全局引入elment-plus
//引入element-plus
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
//引入element-plus中文库
import zhCn from 'element-plus/es/locale/lang/zh-cn'
app.use(ElementPlus, {locale: zhCn,size: 'small'})
四、 request axios请求
五、element-plus使用
5.1 测试
<script setup>
import request from "@/utils/request.js";
const send = () =>{
request.get('web/1').then(res =>{
console.log(res)
})
}
</script>
<template>
<el–button @click="send">1111</el–button>
</template>
PS：有跨域问题
5.2
六、Vue相关
6.1响应式数据(ref,reactive[对象])和非响应式数据定义
import {ref,reactive} from 'vue'
const username = '用户名'
const usernameRef = ref('用户名')
const object = reactive({
username: '',
password: '',
role: 'ROLE_USER'
})
