Vue3 Vite Setup语法糖插件的配置

组件开发中无需每次都引入 import {ref,reactive,...} from 'vue'

插件安装

npm i unplugin-auto-import unplugin-vue-components -D
1

插件配置

import { fileURLToPath, URL } from "node:url";

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      imports: ["vue", "pinia", "vue-router"], //添加需要自动导入的函数方法
    }),
  ],
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
  },
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

插件使用

<template>
  <div class="about">
    <h1>This is an about pageh1>
    {{ data }}
  div>
template>

<style>
@media (min-width: 1024px) {
  .about {
    min-height: 100vh;
    display: flex;
    align-items: center;
  }
}
style>

<script lang="ts" setup>
const data = ref(111);
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

关于找不到ref等函数报错解决方法

【https://blog.csdn.net/sayUonly/article/details/123482912】