vite项目（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）

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"
  		})		 	
  	]
  )}

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')

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
}

到此为止，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',
    }),
 }）

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')

4、tsconfig.json 文件中的配置

 "compilerOptions": {
    "types": ["vite-plugin-vue-layouts/client"]
  }

5、如果不想使用默认 default.vue文件，怎么办？

//在任意.vue文件中
// 下面这三个部分，都不重要，所以我这里都空着
<script setup>
</script>
<template>
</template>
<style>
</style>
// 关键是这里
<route lang="yaml">
meta:
	layout: users
//这里的 users 指的是其他的 layouts目录下的布局文件
//并且这两行一定要注意缩进问题（亲身踩雷）
</route>

上面这些就是 vite-plugin-vue-layouts的引入以及简单用法

vite-plugin-windicss

作用

windicss 的工作原理是扫描你的所有 HTML 文件、JavaScript 组件和任何其他模板以查找类名，生成相应的样式，然后将它们写入静态 CSS 文件。也就是说 已经将这些类名写好了样式。
例如：

我们给某个元素设置样式，平时使用的方式是
 <div class="box1"></div>
 .box1{
 		background: red;
 }
 使用windicss的方式：
 <div class="bg-red"></div>

注意

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(),   //当前内容
  ],
}

3、main.ts文件中的配置

// main.ts文件中 只需要引入即可，不需要其他的配置
import 'virtual:windi.css'

完成以上三个步骤，就可以使用了

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、安装（我这里用的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(), //当前内容
  ],
}

unplugin-vue-components安装比较简单，上手比较简单。

以上就是vite常用的一些插件的 安装方法，后续还会继续更新…