vue3+vite学习日记之路由

一、新项目开启

网上的项目视频大多数要什么加好友、评论啥的，我嫌麻烦，还是自己边看边写自己的项目吧。

ps：可能会和参考视频有一些差异。

二、项目创建

先创建项目并进行一些安装配置：

1、npm create vite@latest ->输入项目名称->选择vue->选择ts->根据提示进行

 2、安装vue-router，输入命令npm install vue-router@4 -s

3、安装element-plus，输入命令npm install element-plus -s

4、安装less，输入命令npm install less -s

5、安装icons，输入命令npm install @element-plus/icons-vue -s

6、设置别名，在vite.config.ts文件中进行设置

resolve: {
    alias: [
      {
        find: "@",
        replacement: "/src",
      }
    ]
  }

别名配置生效了，但是出现在编写时出现标红报错并且提示找不到。

解决办法：tsconfig.json文件中换成以下代码

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "lib": ["esnext", "dom"],
    "baseUrl": "./",
    "paths":{
      "@": ["src"],
      "@/*": ["src/*"],
    }
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}

7、简单配置一个路由

a、新建一个router文件夹，在文件夹下添加index.ts文件，并在文件下添加以下代码

import { createRouter, createWebHashHistory} from 'vue-router'

// 制定路由规则

const routes = [
    {
        path: '/',
        name: 'main',
        component: () => import('@/views/Main.vue'),
    }
]

const router = createRouter ({
    history: createWebHashHistory(import.meta.env.BASE_URL),
    routes,
});

export default router

b、在根目录下添加views文件夹，并新建Main.vue文件

<script setup lang="ts">
</script>

<template>
  <div>
    main页面
  </div>
</template>

<style scoped>
</style>

c、在文件以及路由编写完成后，在main.ts文件中使用vue-router。

引入router： import router from './router' 

使用router：

const app = createApp(App)
app.use(router)
app.mount('#app')

d、app.vue中使用

<script setup lang="ts">
import HelloWorld from '@/components/HelloWorld.vue';
</script>

<template>
  <div>
    <HelloWorld :msg="'111'"></HelloWorld>
    <router-view></router-view>
  </div>
</template>

<style scoped>
</style>

效果图：