使用 vite 构建 Vue3项目 搭配 less 和 路由

1. 构建项目

yarn create vite-app <project-name>
cd <project-name>
yarn

2.安装所需的包

yarn add less --dev
yarn add less-loader --dev
yarn add vue-router@next
yarn add 

3.在src下新建router目录并在目录下新建index.js

import { createWebHistory, createRouter } from "vue-router";
import Home from "../views/Home.vue";
import HelloWorld from "../views/HelloWorld.vue";

const routes = [
  {
    path: "/",
    name: "Home",
    component: Home,
  },
  {
    path: "/hello",
    name: "HelloWorld",
    component: HelloWorld,
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

4.修改main.js支持vue-router

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

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

5.使用

//app.vue
<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/hello">Hello</router-link>
    </div>
    <router-view />
  </div>
</template>

<script>
export default {
  name: "App",
};
</script>
<style lang="less" scoped>
</style>