yarn创建vitevue3，安装vue-router

1.安装项目

yarn create vite my-app

选择环境这里我们选择Vue

我们用的javaScript

安装完毕

cd项目，然后安装依赖

2.运行项目

yarn run dev

3.安装路由

yarn add vue-router

4.配置路由文件

// history模式
import {
	createRouter,
	createWebHashHistory,
} from 'vue-router'

const routes = [
	// 路由的默认路径
	{
		path: '/',
		name: "/",
		component: () => import('../views/index/index.vue')
	}, {
		path: '/detail',
		name: "detail",
		component: () => import('../views/detail/index.vue')
	}
]

// 创建路由对象
const router = createRouter({
	history: createWebHashHistory(),
	routes
})
export default router;

5.入口main.js使用路由

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'

import router from './router'

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

6.修改app.vue

<script setup>
	
</script>

<template>
	<router-view></router-view>
</template>

<style scoped>
	
</style>

7.安装scss

yarn add sass

8.修改vite.config.js

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  // 上面是默认已存在的  
  
    
  css: {
    // css预处理器
    preprocessorOptions: {
      scss: {
        // 引入 mixin.scss 这样就可以在全局中使用 mixin.scss中预定义的变量了
        // 给导入的路径最后加上 ; 
        additionalData: '@import "@/assets/style/mixin.scss";'
      }
    }
  }

})