使用vite创建vue3项目

创建项目

yarn create vite my-vue-app --template vue

安装SASS

yarn add sass sass-loader -D

安装router

yarn add vue-router -D

配置路由

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

// 下面使用了es6的对象增强写法，命名必须是routes
const routes = [
  {
     path: '/login',
    // 已经配置了路径别名，@/view 就可以写成 view
    // 【因为在项目中已经配置了路径别名 @，它指向了项目的 src 目录。因此，@ 代表了项目的根目录。】
    // 配置了extensions，login.vue可以写成login
     component: () => import('views/login/login')
  },
]

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

// 导出路由
export default router

在main.js中使用路由

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'
createApp(App).use(router).mount('#app')