vue3 初始化项目

创建 js 项目

npm init vite-app <project-name>

创建 ts 项目

npm init @vitejs/app <project-name>

会弹出来几个选项，最后选 vue-ts 就行了

配置 vue router

npm i vue-router@4.0.0

1.在 src 下创建 route 文件夹
2.创建 index.ts 文件
3.写初始化代码

import { createRouter, createWebHashHistory } from "vue-router"
const routes = [
    { path: "/", redirect: "/index" },
]
export const router = createRouter({
    history: createWebHashHistory(),
    routes: routes
}) 

4.在main.ts里面引入 router

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

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

配置 less

1.安装 vscode 插件 EasyLess
2.在 vscode -> ctrl + shift + p -> 搜索 setting -> 打开设置 -> 在 setting.json 最下面添加代码

{
	...
    "less.compile": {
        "compress": false,
        "sourceMap": false,
        "out": "../css/", 
    }
    ...
}

3.在 src 文件夹下面创建 assets 文件夹， 创建 less 文件， 创建 css文件夹
4.在保存的时候，会自动将 less文件夹下的 less 文件编译到 css 下的同级目录的 css 文件。