vite创建vue项目及路由配置

1、创建项目

根据官网的提示一步一步往下做即可，圈出部分是我用的命令

启动成功之后会显示如下页面

项目创建好之后，目录如下。圈出来的文件夹是我新建的，个人习惯项目创建成功之后立即新建以后需要使用的文件夹

2、更改常用配置，如路径别名，端口，省略文件后缀等。
在 " vite.config.js" 中添加以下代码，其他配置我暂时用不上，就先不加了

//vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

import path from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    // 配置路径别名
    alias: {
      '@': path.resolve(__dirname, 'src'),
      'views': '@/views',
      'assets': '@/assets',
      'common': '@/common',
      'components': '@components',
      'network': '@/network',
      'router': '@/router',
      'store': '@/store'
    },
    // 省略文件后缀
    extensions: ['', '.js', '.json', '.vue', '.scss', '.css']
  },
  server: {
    // 修改端口
    port: 8888
  }
})

3、新建两个文件，用于路由测试。其中login.vue中的内容如下

// login.vue

<script setup>
import { ref } from 'vue'
const msg = ref('登录页')
let date = new Date().toLocaleDateString()
</script>

<template>
    <h1>{{ msg }}</h1>
    <p>今天的日期是: {{ date }}</p>
</template>

如果不习惯上面的写法，也可以用下面的代码

// login.vue

<template>
    <h1>{{ msg }}</h1>
    <p>今天的日期是: {{ date }}</p>
</template>

<script>
export default ({
    data() {
        return {
            msg: '登录页',
            date: new Date().toLocaleDateString()
        }
    }
})
</script>

4、配置路由

在“router”文件夹下新建文件“index.js”，添加如下代码

// index.js

// 引入需要的模块
import { createRouter,  createWebHistory } from 'vue-router'

// 下面使用了es6的对象增强写法，命名必须是routes
const routes = [
    {
        path: '/',
        redirect: 'login'
    }, 
    {
        path: '/login',
        // 已经配置了路径别名，@/view 就可以写成 view
        // 配置了extensions，login.vue可以写成login
        component: () => import('views/login/login') 
    },
    {
        path: '/home',
        component: () => import('views/home/home')
    }
]

// 创建路由
const router = createRouter({
    history: createWebHistory(),
    routes
})

// 导出路由
export default router

在“main.js”中引入、使用路由

// main.js
import { createApp } from 'vue'
import App from './App.vue'

// 引入路由
import router from './router'
// 使用路由
const vue = createApp(App)
vue.use(router)
vue.mount('#app')

在App.vue文件中使用<router-view />标签，如果没有这个标签，路由中的页面不会渲染。
在浏览器中输入http://localhost:8888/,即可看见login.vue中的内容

我做的时候出现了报错，后来npm install vue-router@4重新下载路由插件，还是报错，一气之下关闭vscode。第二天再打开项目，就莫名其妙的不报错了，反正现在还没找到原因。如果你们找到原因了，还请赐教