vite常用插件

1.iconify图标

1.安装

unocss
iconify

npm i -D unocss @unocss/preset-icons @iconify/json

2.配置vite.config.js

import { defineConfig } from 'vite'

import Unocss from 'unocss/vite';
import { presetUno, presetAttributify, presetIcons } from 'unocss';
import UnocssIcons from '@unocss/preset-icons'

export default defineConfig({
  plugins: [
    Unocss({
      //自定义规则
      rules:[
        ["flex",{display:"flex"}],
        ["red",{color:"red"}]
      ],
      //配置图标
      presets: [
        UnocssIcons({
          prefix: 'i-',
          extraProperties: {
            display: 'inline-block'
          }
        }),
        presetUno(),
        presetAttributify(),
        presetIcons(),
      ],
    })
  ]
})

3.使用

//main.js导入
import 'uno.css'

//z
<template>
    <div i-akar-icons:full-screen></div>
    <div i-emojione:dog></div>
    <div i-akar-icons:music></div>
    <div i-emojione:first-quarter-moon-face></div>
    <div i-emojione:full-moon-face></div>
</template>

2.@指向src

1.配置

找到文件vite.config.js,写入以下配置即可

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { resolve } from "path";
const pathResolve = (dir) => resolve(__dirname, dir);

export default defineConfig({
  plugins: [
    vue()
  ],
  resolve: {
    alias: {
      "@": pathResolve("./src") // 新增
    }
  },
})

2.使用

import "@/assets/styl/index.scss";

3.env环境变量

1.创建

在根目录下创建两个文件,分别为.env.development开发模式和 .env.production生产模式。

//.env.development
//VITE_开头
VITE_TITLE=第一个网页

//.env.production
//VITE_开头
VITE_TITLE=第一个网页

2.配置

//package.json

  "scripts": {
    "dev": "vite --mode development",
    "build": "vite build --mode production"
  },

3.使用

console.log(import.meta.env.VITE_TITLE);

4.运行

npm run dev
# or
npm run build

4.mitt事件总线

vue3中取消了事件总线，所以用mitt插件事件总线传递数据

1.安装

npm install mitt

2.使用

A.vue、B.vue互为兄弟组件，app.vue父组件

//src/utils/bus   main.jsdao'ru
import mitt from "mitt";
const bus = {};
const emitter = mitt();
bus.on = emitter.on;
bus.off = emitter.off;
bus.emit = emitter.emit;
 
export default bus

//src/views/A.vue
<template>
  <h1>A</h1>
  <button @click="emit">emit</button>
</template>

<script setup lang="ts">
import { reactive, getCurrentInstance } from "vue"
import bus from '../utils/bus'
const instance = getCurrentInstance()
type M = {
  name: string
  age: number
}
const val: M = reactive({
  name: "张三",
  age: 23
})
const emit = () => {
  const { name, age } = val
  bus.emit("on-emit1", { name, age })
  bus.emit("on-emit2", { name, age })
  bus.emit("on-emit3", { name, age })
  bus.emit("on-emit4", { name, age })
}
</script>

//src/views/B.vue
<template>
  <h1>B</h1>
</template>

<script setup lang="ts">
import { getCurrentInstance } from "vue"
import bus from '../utils/bus'
const instance = getCurrentInstance()
//触发事件
bus.on("on-emit", (res) => {
  console.log(res)
})
//*表示监听所有的事件触发
bus.on("*", (res) => {
  console.log(res)
})
</script>

//src/app.vue
<template>
  <div>
    <A></A>
    <B></B>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue"

import bus from './utils/bus'
import  A from "./components/A.vue"
import  B from "./components/B.vue"
</script>

5.自动导入

1.安装

npm install -D unplugin-auto-import

2.配置vite.config.js

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import AutoImport from 'unplugin-auto-import/vite'

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      imports:["vue","vue-router"],//自动导入的依赖名字
      dts:"src/auto-import.d.ts"//生成的文件夹/名字
    })
  ]
})