Vite2+vue3+ts 使用 router，layout 搭建页面框架,并做页面自适应

Vite2+vue3+ts 使用 router，layout 搭建页面框架,并做页面自适应

vue3 对应使用的是 vue-router@4 版本， 有新的用，但是向下兼容
本文档源码：Lzq811/vite-vue-ts-eslint at vite2+vue3+ts使用vue-router搭建页面框架 (github.com)

1. 安装使用 vue-router@4

1. install

2. 在 src 下新建 pages 文件夹，并添加 login/index.vue 、 home/index.vue 文件,并随便初始化一下组件内容。

3. 在 src 下新建 routes 文件夹，并添加 index.tsx 、 routesNames.tsx 文件

 = [  {    path: '/',    redirect: '/home',    component: () => import('@pages/home/index.vue'),  },  {    path: '/default',    name: RouteNames.HOME,    component: () => import('@pages/home/index.vue'),  },  {    path: '/home',    name: RouteNames.HOME,    component: () => import('@pages/home/index.vue'),  },  {    path: '/login',    name: RouteNames.LOGIN,    component: () => import('@pages/login/index.vue'),  },]// 配置路由const router = createRouter({  history: createWebHistory(),  routes,})router.beforeEach((to, from) => {  const { path: toPath } = to  const { path: fromPath } = from  if (toPath === fromPath) {    return false  }})export default router

4. 在 Login 组件中 点击 跳转到 Home 页面

    {  router.replace('/home')}// 执行jumpTohome方法就能跳转到home页面了

2. Home 页面布局

1. 在 src/components 文件夹下创建文件 src/components/common/aside/index.vue 、 src/components/common/head/index.vue

  
                        Tom  

  修改 home/index.vue
  
其中 __dirname找不到的解决办法
配置 alias 路径别名
3. 页面自适应
安装
修改配置
查看页面的文字或者盒子大小是否已经从 px 单位 变成了 rem 单位。
本文的对应源码地址： Lzq811/vite-vue-ts-eslint at vite2+vue3+ts使用vue-router搭建页面框架 (github.com)

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！