插件与库
该部分内容以 vue3 为主
开发环境
- vue-loader: loader 解析与配置
- vue-devtools: 谷歌插件
- volar: IDE 插件
vite 插件
- 自动导入 api (一般为组合式 api)
- 支持
vite、webpack、rollup、esbuild等
js
// vite - vue3 项目 示例
// vite.config.js
import { defineConfig } from "vite";
import AutoImport from "unplugin-auto-import/vite";
export default defineConfig({
plugins: [
AutoImport({
include: [
/\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
/\.vue$/,
/\.vue\?vue/, // .vue
],
imports: ["vue", "vue-router"],
dts: "auto-import.d.ts",
resolvers: [],
}),
],
});- 自动导入 组件 (一般为本地通用组件库、第三方组件)
- 支持
vite、webpack、rollup、esbuild等 - 内置第三方库
resolvers，如ant design、element plus、vant等
js
// vite - vue3 项目 示例
// vite.config.js
import { defineConfig } from "vite";
import Components from "unplugin-vue-components/vite";
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
export default defineConfig({
plugins: [
Components({
dts: true,
dirs: ["src/comp"],
deep: true,
extensions: ['vue']
resolvers: [ElementPlusResolver()],
}),
],
});UI 框架
- element-plus: 主要面向业务
- vant: 主要面向移动端
- vuetiry: 基于 material ui , 多端适配
静态网站
- vitepress: markdown 内容站点生成
多国语言
- vue-i18n: 国际化语言配置