vite创建vue3+ts+ant design vue项目

1.通过vite命令构建vue3+ts项目

npm init @vitejs/app
or
yarn create @vitejs/app

根据步骤选择

  1. 项目名称
  2. 框架(vue,react…)
  3. js或ts
    在这里插入图片描述
    vite官网

2.安装ant design vue

安装2.x版本

 npm i --save ant-design-vue@next  

ant design vue 官网

按需加载

vite按需加载需要引入插件

npm i vite-plugin-style-import -S  

在vite.config.ts中配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import styleImport from 'vite-plugin-style-import'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    styleImport({
      libs: [{
        libraryName: 'ant-design-vue',
        esModule: true,
        resolveStyle: (name) => {
          return `ant-design-vue/es/${name}/style/css`;
        },
      }]
    })],
})

在App.vue文件中试用一下

<template>
  <Button>测试</Button>
</template>

<script setup>
// 
                    
                    

你可能感兴趣的:(vue)