项目（vue-ts）软件系统开发定制搭建常用插件引入方式
- vite-plugin-pages
- vite-plugin-vue-layouts
- vite-plugin-windicss
- unplugin-vue-components
vite-plugin-pages
作用
vite-plugin-pages软件系统开发定制可以读取指定的目录文件，软件系统开发定制自动化生成路由信息，软件系统开发定制不需要自己去逐个页面配置
注意
1、vite-plugin-pages基于vue-router，软件系统开发定制所以使用的时候还是要安装vue-router
2、vite-plugin-pages软件系统开发定制默认指定的页面文件夹是 pages，默认指定的页面是 index.vue，所以最好先在pages文件夹下面创建一个 index.vue文件
用法
1、安装（我这里用的是 ）
pnpm install vite-plugin-pages
pnpm install vue-router
2、vite.config.ts 文件中配置
import { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'import Pages from 'vite-plugin-pages'export default defineConfig({ plugins: [ Vue(), //默认为文件夹为pages时，不需要配置 //我的文件夹是 views，所以需要配置 Pages({ dirs:[ { dir: "src/views", baseRoute: "" }], importMode: "async" }) ] )}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
3、main.ts文件中的配置
import { createApp } from 'vue'import App from './App.vue'import { createRouter, createWebHistory } from 'vue-router'//自动读取pages目录下的页面，不需要自己再写routes// 引入可能会报红，但是别着急，下一步会解决import generatedRoutes from 'virtual:generated-pages'const router = createRouter({ history: createWebHistory(), routes: generatedRoutes,})const app = createApp(App)app.use(router).mount('#app')- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
4、env.d.ts文件中的配置
/// <reference types="vite/client" />//注释：主要是加入下面这行，否则main.ts页面会报红/// <reference types="vite-plugin-pages/client" />declare module '*.vue' { import type { DefineComponent } from 'vue' // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types const component: DefineComponent<{}, {}, any> export default component}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
到此为止，vite-plugin-pages 就引入成功然后可以进入下一步，引入vite-plugin-vue-layouts
vite-plugin-vue-layouts
作用
页面可以自由组合布局，可以在页面加载指定的layout
注意
1、vite-plugin-vue-layouts 与上面提到的pages类似，都会读取指定目录文件夹下面的文件。
2、vite-plugin-layouts默认读取的文件夹名字是 layouts，所以要使用的话，要在自己创建一个 src/layouts 文件夹
3、vite-plugin-layouts默认读取的文件是 src/layouts/default.vue 所以第一个文件 最好创建叫做 default.vue，这样比较容易理解、上手
用法
1、安装 （我这里用的pnpm）
pnpm install vite-plugin-vue-layouts
2、vite.config.ts中的配置
import { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'import Pages from "vite-plugin-pages"import Layouts from 'vite-plugin-vue-layouts';export default defineConfig({ plugins: [ vue(), Pages({ dirs: [ { dir: "src/views", baseRoute: "" }, ], importMode: "async", }), Layouts({ // 如果是默认 layouts文件夹，默认 default.vue文件，则不需要配置 layoutsDirs: 'src/layouts', defaultLayout: 'default', }), }）- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
3、main文件中的配置
import { createApp } from 'vue'import App from './App.vue'import { createRouter, createWebHistory } from 'vue-router'// 自动读取 layouts文件夹下的文件import { setupLayouts } from "virtual:generated-layouts"import generatedRoutes from 'virtual:generated-pages'const router = createRouter({ history: createWebHistory(), routes: setupLayouts(generatedRoutes),})const app = createApp(App)app.use(router).mount('#app')- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
4、tsconfig.json 文件中的配置
"compilerOptions": { "types": ["vite-plugin-vue-layouts/client"] }- 1
- 2
- 3
5、如果不想使用默认 default.vue文件，怎么办？
//在任意.vue文件中// 下面这三个部分，都不重要，所以我这里都空着<script setup></script><template></template><style></style>// 关键是这里<route lang="yaml">meta: layout: users//这里的 users 指的是其他的 layouts目录下的布局文件//并且这两行一定要注意缩进问题（亲身踩雷）</route>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
上面这些就是 vite-plugin-vue-layouts的引入以及简单用法
vite-plugin-windicss
作用
windicss 的工作原理是扫描你的所有 HTML 文件、JavaScript 组件和任何其他模板以查找类名，生成相应的样式，然后将它们写入静态 CSS 文件。也就是说 已经将这些类名写好了样式。
例如：
我们给某个元素设置样式，平时使用的方式是 <div class="box1"></div> .box1{ background: red; } 使用windicss的方式： <div class="bg-red"></div>- 1
- 2
- 3
- 4
- 5
- 6
- 7
注意
windicss实际上是从tailwindcss“进化”过来的，最大的区别是 windicss是按需引入的tailwindcss，
所以在速度上 是tailwindicss的20~100倍
tailwindcss生成的 tailwind.config.ts 配置文件，对windicss任然有效，但是本文没有介绍，简单实用 用不到。
用法
1、安装 (我这里用的pnpm）
pnpm install vite-plugin-windicss
2、vite.config.ts文件中配置
import { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'import Pages from "vite-plugin-pages" //本文第一个模块的内容import Layouts from 'vite-plugin-vue-layouts'; // 本文第二个模块的内容import windicss from 'vite-plugin-windicss' // 当前提及内容export default defineConfig({ plugins: [ vue(), Pages(), //本文第一个模块的内容 Layouts(), // 本文第二个模块的内容 windicss(), //当前内容 ],}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
3、main.ts文件中的配置
// main.ts文件中 只需要引入即可，不需要其他的配置import 'virtual:windi.css'- 1
- 2
完成以上三个步骤，就可以使用了
unplugin-vue-components
作用
unplugin-vue-components 是由 vite-plugin-components重名而来，可以将项目中的组件按需引用，仅注册你使用的组件。
例：
//平时我们在页面使用组件<template> <comp/></template><script>import { definconfig } from "vue"import comp from "./src/components/comp.vue"export default definconfig({ name:"page1", components:{ comp } })<script>// 引入unplugin-vue-components之后 <template> <comp/> </template> <script> //不需要任何相关内容 </script>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
用法
1、安装（我这里用的pnpm）
pnpm install unplugin-vue-components
2、vite.config.ts文件中的配置
import { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'import Pages from "vite-plugin-pages" //本文第一个模块的内容import Layouts from 'vite-plugin-vue-layouts'; // 本文第二个模块的内容import windicss from 'vite-plugin-windicss' // 本文第三个模块的内容import Components from 'unplugin-vue-components/vite' //当前提及内容export default defineConfig({ plugins: [ vue(), Pages(), //本文第一个模块的内容 Layouts(), // 本文第二个模块的内容 windicss(), //本文第三个模块的内容 Components(), //当前内容 ],}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
unplugin-vue-components安装比较简单，上手比较简单。
以上就是vite常用的一些插件的 安装方法，后续还会继续更新…