Vue3项目配置自动引入Antdv vue vue-router
作者:隆海
发表于:2025-01-06
阅读次数:26
字数:397
阅读时间:~1分钟

从官网下载好vue3的项目后,如果要快速使用还需要配置很多插件,把经常用的配置整理成文档方便后面使用

配置antdv

安装antdv

npm install ant-design-vue@4.x --save

安装自动导入插件

npm install unplugin-vue-components -D

配置vite.cong.ts

import Components from 'unplugin-vue-components/vite';
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers';
export default defineConfig({
  plugins: [
    // ...
    Components({
      resolvers: [
        AntDesignVueResolver({
          importStyle: false, // css in js
        }),
      ],
    }),
  ],
});

然后你可以在代码中直接引入 ant-design-vue 的组件，插件会自动将代码转化为 import { Button } from 'ant-design-vue' 的形式。

import { Button } from 'ant-design-vue';

安装sass和less

npm i -D sass  
//或
npm i -D less

配置vue和vue-router自动导入

vue的api使用前

<script lang="ts" setup>
import { ref } from 'vue'
let name = ref<String>('隆海')
let age = ref<String>('今年刚满18岁~~~')
</script>

自动引入后

<script lang="ts" setup>
let name = ref<String>('隆海')
let age = ref<String>('今年刚满18岁~~~')
</script>

安装导入插件

npm i -D unplugin-auto-import

vite.config.ts配置

export default defineConfig({
  plugins: [
    vue(),
    vueDevTools(),
    AutoImport({ imports: ['vue', 'vue-router'] }),
    Components({
      resolvers: [
        AntDesignVueResolver({
          importStyle: false, // css in js
        }),
      ],
    }),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
  },
})

ts报错需要在include中在tsconfig.app.json加入"auto-imports.d.ts",

{
  "extends": "@vue/tsconfig/tsconfig.dom.json",
  "include": ["env.d.ts", "src/**/*", "src/**/*.vue", "auto-imports.d.ts"],
  "exclude": ["src/**/__tests__/*"],
  "compilerOptions": {
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",

    "paths": {
      "@/*": ["./src/*"]
    }
  }
}
0%