项目搭建
查看自己的node版本
node -v
选择使用使用vite2来搭建项目
npm init vite@latest
其他的按照文档进行
官网链接:https://vitejs.cn/guide/#scaffolding-your-first-vite-project
vite 配置
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'// https://vitejs.dev/config/
export default defineConfig({base:'/front/',plugins: [vue()],server: {hmr: { overlay: false }, // 禁用或配置 HMR 连接 设置 server.hmr.overlay 为 false 可以禁用服务器错误遮罩层// 服务配置port: 4396, // 类型: number 指定服务器端口;open: '/front/index', // 类型: boolean | string在服务器启动时自动在浏览器中打开应用程序;cors: true, // 类型: boolean | CorsOptions 为开发服务器配置 CORS。默认启用并允许任何源proxy: { // 类型: Record<string, string | ProxyOp 为开发服务器配置自定义代理规则'/api': {target: '0.0.0.0',changeOrigin: true,secure: false,rewrite: (path) => path.replace('/api', '')}},},
})
更多配置:https://juejin.cn/post/7139372943661858830
也可以去官网查看配置
配置路由
npm加载依赖
npm install vue-router@4
在src新建文件夹,配置文件router文件
import {createRouter,createMemoryHistory,RouteRecordRaw
} from 'vue-router'export const constantRoutes:Array<RouteRecordRaw> = [{path:'/',name:"首页",meta:{title:'第一页'},component: () => import('../view/home/index.vue'),},{path:'/login',name:'登录页',meta:{},component: () => import('../view/login/index.vue'),}
]
// 返回当前router对象
const router = createRouter({history:createMemoryHistory(),scrollBehavior:() =>({top:0,}),routes:constantRoutes
})export default router
在mian文件中使用路由
import router from './router/index'
createApp(App).use(router)
在app.vue中配置路由出口页面
<template><router-view></router-view>
</template>
官网配置链接:https://router.vuejs.org/zh/guide/
简单测试页面
一个index主页面
一个login页面
实现页面跳转,路由切换
<template><div><h1 @click="goLogin()">index</h1></div>
</template><script lang="ts">
import { useRouter } from 'vue-router';export default {setup(){let router = useRouter()function goLogin() {router.push('/login')}return {goLogin}}
}
</script><style></style>
注意事项:
1.vue3的事件绑定,需要返回方法,方能使用
2.使用route需要引入后,才能使用
3.useRouter返回 router 实例。相当于在模板中使用 $router。必须在 setup() 中调用。