vite常用插件

﹏ヽ暗。殇╰゛Y 2024-03-31 17:10 75阅读 0赞

## 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"//生成的文件夹/名字
        })
      ]
    })

[unocss]: https://uno.antfu.me/
[iconify]: https://icon-sets.iconify.design/