搭建vue3+ts+less+vite项目

1. 创建项目

首先用Vite工具创建Vue3+Typescript的项目环境

注意：Vite需要你的Nodejs版本>=12.0.0

// yarn 方式
yarn create @vitejs/app v3-ts --template vue-ts
cd v3-ts
yarn
yarn dev

// npm 
npm init @vitejs/app v3-ts --template vue-ts
cd v3-ts
npm install 
npm run dev

2. 添加less

yarn add less less-loader --dev

// npm
npm install less less-loader --save-dev

注意：这边如果不加–dev，包会安装到dependencies中，这样会导致编译不通过。需要将less和less-loader迁移到devDependencies中再重新执行yarn安装。

3. 完善目录结构

先把项目里面的东西清理一下，把官方demo删除（HelloWorld 组件相关的全部删除）。在项目中创建几个常用的文件夹，目录结构大致如下（大家可以先创建views文件夹，其他的后续会陆续创建）：

4. 添加 vue-router

yarn add vue-router@4.0.1

// 查看历史版本
// npm(yarn) info vue-router versions

注意避雷：建议大家不要使用4.0.0版本。
vue-router的4.x版本中引入的不再是一个类了，而是一组功能。我们通过createRouter创建路由。

• 在router/index.ts中通过创建路由并导出。

// index.ts
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
import Home from "../views/Home/index.vue";
const routes: Array<RouteRecordRaw> = [
    {
        path: '/',
        name: 'Home',
        component: Home,
    },
    {
        path: '/resourceManager',
        name: 'ResourceManager',
        component: () => import('../views/ResourceManager/index.vue'),
    },
    {
        path: '/taskManagement',
        name: 'TaskManagement',
        component: () => import('../views/TaskManageme