vite中引入vue-router路由，以及文件简称_vite vue router

感觉 vite 有点学create-react-app了, 脚手架 也不给我们自动搞好 vuex 和 react-router ，让我这衣来伸手饭来张口的人感觉生活难了好多。
好可恶啊

对我这个小白，不想学习 只想吃老本的前端程序员来说 太难了，但想了想为了挣钱还是老老实实去学习吧。

好了不恶搞了 开始步入正题了。
vue用着真爽 vite真快， 推荐

其实只要你是vue2 的熟练使用者的话，自己简单配置下 还是可以

因为vite搭配的是vue3 那么 vue-router 也应该是搭配 vue3
安装

npm i vue-router@4 --save
1

在 src文件下 创建一个 router/index.js 文件。你想装逼创建一个ts 随便毕竟原生支持ts

import { createRouter, createWebHistory } from "vue-router"
import Home from "@/view/home.vue"
const routes = [
    {
        path: '/home',
        name: 'home',
        component: Home
    },
    {
        path: '/about',
        name: 'about',
        component: () => import('../view/about.vue')
    }
]
const router = createRouter({
    history: createWebHistory(),
    routes
})

export default router

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

这里我用到别名。@ 在配置文件中配置下就行 毕竟vue2用习惯(说实话react用的时间比vue还长 但是还是喜欢vue 毕竟开发快啊)

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
const path = require('path')
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  }
})
1
2
3
4
5
6
7
8
9
10
11
12

然后就是引入使用了
main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from "./router"

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

1
2
3
4
5
6
7
8

代码示例
home.vue

<template>
    <Test msg="this is a vue3 appliaction? hello world"/>
    <router-link to="/about">跳转关于页面</router-link>
</template>

<script setup>
    import Test from '../components/Test.vue'
</script>

1
2
3
4
5
6
7
8
9

about.vue文件

<script setup>
    import { ref } from 'vue'
    const demo = ref('测试')
</script>

<template>
    <h1>我是关于页面 {{ demo }}</h1>
    <router-link to="/home">跳转首页页面</router-link>
</template>
1
2
3
4
5
6
7
8
9

这样就实现了。关注我 持续更新前端知识。