1.vite项目搭建

可以按照vite官网操作：https://cn.vitejs.dev/guide/features.html#typescript

npm create vite@latest

自定义template模板

vscode-文件-首选项-配置用户代码片段-vue.json

添加如下代码即可快速创建vue模板

{"template": {"prefix": "vue","body": ["","",""]}
}

element ui

element官网：https://element-plus.gitee.io/zh-CN/guide/design.html

npm install element-plus --save

// main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'const app = createApp(App)app.use(ElementPlus)
app.mount('#app')

Volar支持，请在 tsconfig.json 中通过 compilerOptions.type 指定全局组件类型。

// tsconfig.json
{"compilerOptions": {// ..."types": ["element-plus/global"]}
}

配置@别名

vite.config.ts compilerOptions 中配置如下

  "baseUrl": ".","paths": {"@/*": ["src/*"],"@components/*": ["./src/components/*"]},

安装 path 和 @types/node

npm install path --save

npm install @types/node --save-dev

vite.config.ts 配置如下

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import path from "path";
// https://vitejs.dev/config/
export default defineConfig({resolve: {// 配置路径别名alias: {"@": path.resolve(__dirname, "./src"),"@components": path.resolve(__dirname, "./src/components"),},},plugins: [vue()],
});

配置路由

npm i vue-router@4

在src根目录创建router文件夹并新建两个ts文件，index.ts、router.ts

router.ts

const routes = [{name: "Home",path: "/",component: () => import("@/pages/Home.vue"),},{name: "About",path: "/about",component: () => import("@/pages/About.vue"),},{name: "Apple",path: "/apple",component: () => import("@/components/Apple/Apple.vue"),},
];
export default routes; //导出

index.ts

import { createRouter, createWebHistory } from "vue-router";
import routes from "./router";const router = createRouter({history: createWebHistory(),routes,
});
export default router;

将vite自动创建的页面删除，并在app.vue增加router-view视图出口
app.vue

在home首页配置一个跳转的函数

现在就可以看到配置的路由效果了:

★★★★★实用插件:

vue3自动引入插件

https://github.com/antfu/unplugin-auto-import

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import VueJsx from '@vitejs/plugin-vue-jsx'
import AutoImport from 'unplugin-auto-import/vite'
// https://vitejs.dev/config/
export default defineConfig({plugins: [vue(),VueJsx(),AutoImport({imports:['vue'],dts:"src/auto-import.d.ts"})]
})

安装这个插件之后ref，watch等不用在vue文件中import就可以直接使用！！

less

npm i less-loader less --save-dev

直接安装就可以在vite中使用less了

2.实用功能

用vue3内置组件component实现tab选项卡

component官网简介
https://www.javascriptc.com/vue3js/api/built-in-components.html#component

其中markRaw 、shallowRef两个属性是用于解决如下提示：

效果：

mitt实现兄弟组件传值

安装mitt

npm install --save mitt

src新建plugin文件夹，并创建Bus.ts文件

import mitt from "mitt";
const Bus = mitt();
export default Bus;

A.vue

B.vue

效果：

自义定指令操作盒子移动

效果：