vue3脚手架简单静态路由

1.安装路由
npm install vue-router@4
2.创建文件
router—index.js

// vue-router中提供3种的路由模式
import { createWebHistory, createRouter } from 'vue-router'
const routes = [
    {
        path: '/',
        name: 'home',
        component: () => import('@/pages/home/index.vue')
    }
]

// 创建路由实例并传递 `routes` 配置
const router = createRouter({
    // hash 模式。
    history: createWebHistory(),
    routes
})
export default router

3.main.js文件引入

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

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

4.app.vue

 <router-view></router-view>

5.vite.config.js文件引入sass和src路径

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'),
    }
  },
     // 全局 css 注册
     css: {
      preprocessorOptions: {
      scss: {
          javascriptEnabled: true,
          additionalData: `@import "src/styles/common/style.scss";`
      }
      }
  },
})