ant-design-vue引入vite配置(先创建vite + vue3 + ts)项目

1.安装ant-design-vue

npm install ant-design-vue --save

2.组件部分引入less引入

• 方法一

import 'ant-design-vue/dist/antd.less'
import { DatePicker } from 'ant-design-vue';
app.use(DatePicker);

• 方法二 按需自动引入

1. 安装自动导入插件

npm i unplugin-vue-components --dev

2. vite.config添加插件

import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'
import Components from 'unplugin-vue-components/vite'

plugins: [
          Components({
            resolvers: [AntDesignVueResolver()]
          }),
          vue(),],
        css:{
          preprocessorOptions:{
            less:{
              javascriptEnabled: true,  //注意，这一句是在less对象中，写在外边不起作用
              modifyVars:{ //在这里进行主题的修改，参考官方配置属性
                '@primary-color': '#1DA57A',
              }
            }
          }
        }

• 详情

npm发布二次封装组件项目配置

1.项目创建(vite+vue3+AntDesignVue+ts)

# npm 7+, 需要额外的双横线：
npm init vite@latest my-vue-app -- --template vue-ts
npm i

2.目录创建

1. 在项目根目录下创建packages文件

2. 在packages下创建index.js 文件,创建 pagination文件里新建index.js和index.vue

3. pagination下的index.js

• 注意组件中一定要写name

// pagination/index.vue
<script lang="ts">
export default{
  name:'XXXXX'
}
</script>
<script setup lang="ts">
  ......
</script>

import jPagination from './index.vue'

jPagination.install=app=>{
    app.component(jPagination.name,jPagination)
}
export default jPagination

4. packages下index.js 文件

import jPagination from './pagination/index.vue'
// 全局注册方法
const components = [
   jPagination
]
const install=app=>{
   components.map(item=>{
   app.component(item.name,item)
   })
}
const JDogUI={
   install
}
// 支持按需导入
export {
   jPagination
}
export default JDogUI

* 3.packages.json配置

{
  "name": "XXXX",// 包名
  "private": false,// 改为false
  "version": "0.0.10",// 每次发包修改版本号
  "main": "./dist/XXXX.umd.cjs",
  "module": "./dist/XXXX.js",
  "exports": {
    ".": {
			"import": "./dist/XXXX.js",
      "require": "./dist/XXXX.umd.cjs"
    },
    // 这里如果不配置引入css文件路径要带上node_modules否则引入不成功
    "./dist/style.css": {  
      "import": "./dist/style.css",
      "require": "./dist/style.css"
    }
  },
  "files": [
    "dist/*"
  ],
  "type": "module",
  "scripts": {
    "dev": "vite --host",
    "build": "vue-tsc --noEmit && vite build",
    "preview": "vite preview"
  },
  "keywords": [
    "XXXX",//npm 搜索关键词
  ],
  "author": "XXXX",// 作者
  "license": "ISC",// 默认
  "dependencies": {
    "unplugin-vue-components": "^0.21.2",// 安装的插件
    "vue": "^3.2.37"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^3.0.0",
    "ant-design-vue": "^3.2.10",
    "less": "^4.1.3",
    "typescript": "^4.6.4",
    "vite": "^3.0.0",
    "vue-tsc": "^0.38.4"
  }
}

*4.vite.config.ts配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'
import Components from 'unplugin-vue-components/vite'


// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    // AntDesign自动引入组件配置
    Components({
      resolvers: [AntDesignVueResolver()]
    }),
    vue(),],
  // less配置
  css:{
    preprocessorOptions:{
      less:{
        javascriptEnabled: true,  
        modifyVars:{ //在这里进行主题的修改，参考官方配置属性
          '@primary-color': '#1890ff',
        },
      }
    }
  },
  // 配置打包入口出口
  build: {
    rollupOptions: {
      external: ["vue"], //打包的时候不需要打包的依赖
      // 打包抛出一个全局方法
      output: {
        globals: {
          vue: "Vue"
        }
      }
    },
    // *入口
    lib: {
      entry: "./packages/index.js",
      name: "XXX" // 名字
    }
  }
})

5.打包发布流程

• 生成dist文件

• 注册npm账号

• 镜像源切换

# 查看镜像
npm config get registry 
# 更换npm 镜像 
npm config set registry
# https://registry.npmjs.org/ 
# 更换淘宝镜像 
npm config set registry 									  					
# http://registry.npm.taobao.org/

• npm login登录

• npm publish

• 发布成功收到邮件通知

• 参考文:基于vite + Vue3.2 组件开发 并发布 npm 包

6.项目中使用

1. 全局引入

import XX from 'XX'
import 'XX/dist/style.css'

app.use(XX)

2. 引入 mian.ts 出现 找不到模块“j-dogui”或其相应的类型声明。

• 在src目录下新建XXXX.d.ts文件

declare module 'XX'

3. 按需引入

import { XX } from 'XX'
import 'XX/dist/style.css'

​