欢迎光临
我的个人博客网站

vue3.0使用ant-design-vue进行按需加载原来这么简单


下载 ui库

yarn add ant-design-vue 默认是全局引入,打包后体积很大, 非常影响首屏加载速度, 

按需加载

下载按需加载的插件;推荐使用cnpm cnpm install babel-plugin-import --save-dev 下载在开发环境中 

在项目的根目录下创建 babel.config.js

module.exports = {   presets: [     '@vue/cli-plugin-babel/preset'   ],   plugins: [     ["import",        {          libraryName: "ant-design-vue",         libraryDirectory: "es",         style: true,   // `style: true` 会加载 less 文件       }     ]   ] } 

在项目跟目录下创建vue.config.js配置项目信息

const Timestamp = new Date().getTime() module.exports = {     chainWebpack: config => {         config.plugin('html').tap(args => {             args[0].title = '我的vue3.0' //这个是网站标题             return args         })     },     css: {         loaderOptions: {             // 你的基础样式 因为没有我就注释了             // sass: {             //     data: `             // 		@import "@/assets/style/base.scss";             // 	`,             // },              //这只主题样式,修改此文件后需要重新启动,             less: {                 lessOptions: {                     modifyVars: {                       //这是配置css主题色                       'primary-color': '#007AFF',                      },                     javascriptEnabled: true,                 },             },         },         // 每次打包后生成的css携带时间戳         extract: {             filename: `css/[name].${Timestamp}.css`,             chunkFilename: `css/[name].${Timestamp}.css`,         },     },     productionSourceMap: false,     //打包后相对目录     publicPath: process.env.NODE_ENV === 'production' ? '././' : './',     configureWebpack: {         //每次打包后生成的js携带时间戳         output: {             filename: `[name].${Timestamp}.js`,             chunkFilename: `[name].${Timestamp}.js`,         },     }, }  

安装less与less-loader

我们需要确认自己是否安装了 less与less-loader 【自己看一下】 cnpm install less less-loader --save-dev  【进行安装】 可能你安装后会出现ess less-loader的版本过高。 这个时候你需要将你的版本下降一下  我们为什么需要安装less与less-loader 因为我们ant-design-vue是用less编写的 配置babel.config.js后,  下面是我的版本库  dependencies用户发布环境 "dependencies": {   "@ant-design/icons-vue": "^6.0.1",   "ant-design-vue": "^2.2.1",   "core-js": "^3.6.5",   "vue": "^3.0.0",   "vue-class-component": "^8.0.0-0",   "vue-router": "^4.0.0-0" },   devDependencies用于本地环境开发时候 "devDependencies": {     "@typescript-eslint/eslint-plugin": "^4.18.0",     "@typescript-eslint/parser": "^4.18.0",     "@vue/cli-plugin-babel": "~4.5.0",     "@vue/cli-plugin-eslint": "~4.5.0",     "@vue/cli-plugin-router": "~4.5.0",     "@vue/cli-plugin-typescript": "~4.5.0",     "@vue/cli-service": "~4.5.0",     "@vue/compiler-sfc": "^3.0.0",     "@vue/eslint-config-typescript": "^7.0.0",     "babel-plugin-import": "^1.13.3",     "eslint": "^6.7.2",     "eslint-plugin-vue": "^7.0.0",     "less": "^3.13.1",     "less-loader": "^7.1.0",     "node-sass": "^4.12.0",     "sass-loader": "^8.0.2",     "typescript": "~4.1.5"   }, 
devDependencies和dependencies区别?
devDependencies是只会在开发环境下依赖的模块, 生产环境不会被打入包内。 通过NODE_ENV=developement或 NODE_ENV=production指定开发还是生产环境。  而dependencies依赖的包不仅开发环境能使用, 生产环境也能使用。 其实这句话是重点, 按照这个观念很容易决定安装模块时是使用--save还是--save-dev  所以像css预处理语言我们肯定是--save-dev 像ui库请求axios我们肯定是--save 

main.ts 组件进行按需引入

import { createApp } from 'vue' // 引入App.vue这个入口文件 import App from './App.vue' // 引入路由 import router from './router' const app = createApp(App) import {     Button,     ConfigProvider,     Layout,     Menu,     message,     Input,     Space,     Dropdown,     Divider,     Form,     AutoComplete,     Modal,     Tree,     Drawer,     Row,     Col,     Select,     DatePicker,     Tooltip,     Breadcrumb,     Popconfirm,     InputNumber,     Table,     Pagination, } from 'ant-design-vue' app.use(Button)     .use(Layout)     .use(ConfigProvider)     .use(Menu)     .use(Input)     .use(Space)     .use(Dropdown)     .use(Divider)     .use(Form)     .use(AutoComplete)     .use(Modal)     .use(Tree)     .use(Drawer)     .use(Row)     .use(Col)     .use(Select)     .use(DatePicker)     .use(Tooltip)     .use(Breadcrumb)     .use(Popconfirm)     .use(InputNumber)     .use(Table)     .use(Pagination)     .use(router).     mount('#app') 

按需加载说明和优势

后只需从 ant-design-vue 引入模块即可,无需单独引入样式. babel-plugin-import 会帮助你加载 JS 和 CSS import { Button } from "ant-design-vue"; 也就是说你不需要引入 import 'ant-design-vue/dist/antd.css' 这个样式文件了 

Vue3.0出现Cannot read property ‘use‘ of undefined

其实很简单 哈哈哈 就是因为版本的问题 执行  cnpm i --save ant-design-vue@next 

Vue3.0出现Cannot find module ‘vue-loader-v16/package.json

当你第一次删除后node-module可能会报错: Cannot find module 'vue-loader-v16/package.json'. 你在yarn.lock 可以看见这个文件的描述 先卸载vue-loader-v16依赖 npm uninstall vue-loader-v16  之后使用cnpm安装vue-loader-v16依赖 cnpm i vue-loader-v16 

vue3.0 ant-design-vue Failed to resolve component: a-layout-header

如果是这样的警告提示 这就说明了 你使用的a-layout-header没有进行加载 需要你在main.ts中添加该组件哈 

vue3.0使用ant-design-vue进行按需加载原来这么简单

赞(0) 打赏
未经允许不得转载:张拓的天空 » vue3.0使用ant-design-vue进行按需加载原来这么简单
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏