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进行按需加载原来这么简单的更多相关文章
- 深入浅出的webpack4构建工具---webpack+vue+router 按需加载页面(十五)
1. 为什么需要按需加载? 对于vue单页应用来讲,我们常见的做法把页面上所有的代码都打包到一个bundle.js文件内,但是随着项目越来越大,文件越来越多的情况下,那么bundle.js文件也会越来 ...
- 原创《分享(Angular 和 Vue)按需加载的项目实践优化方案》
针对前端优化的点有很多,例如:图片压缩,雪碧图,js/css/html 文件的压缩合并, cdn缓存, 减少重定向, 按需加载 等等 最近有心想针对 ionic项目 和 vue项目,做一个比较大的优 ...
- vue router按需加载
import Vue from 'vue' import Router from 'vue-router' Vue.use(Router); //按需加载,当渲染其他页面时才加载其组件,并缓存,减少首 ...
- vue项目按需加载的3种方式
本文重要是路由打包优化: 原理:利用webpack对代码进行分割是懒加载的前提,懒加载就是异步调用组件,需要时候才下载. 1.vue异步组件技术 vue-router配置路由,使用vue的异步组件技术 ...
- vue实现按需加载(懒加载)
1.router文件中使用 export default new Router({ routes: [{ path: '/', name: 'Post', component: () => im ...
- Vue性能优化之组件按需加载(以及一些常见的性能优化方法)
关于Vue中的按需加载我就简单介绍一下:大概就是我们所有的东西都会在app.js里面,但是我们并不需要把所有的组件都一次性加载进来,我们可以在需要它的时候再将它加载进来,话不多说,开车! 1.webp ...
- Vue3学习(二)之集成Ant Design Vue
一.集成Ant Design Vue npm install ant-design-vue@2.0.0-rc.3 --save 兼容性 Ant Design Vue 2.x 支持所有的现代浏览器. 如 ...
- Ant Design Vue Pro 项目实战-项目初始化(一)
写在前面 时间真快,转眼又是新的一年.随着前后端技术的不断更新迭代,尤其是前端,在目前前后端分离开发模式这样的一个大环境下,交互性.兼容性等传统的开发模式已经显得有些吃力.之前一直用的是react,随 ...
- 基于Ant Design Vue封装一个表单控件
开源代码 https://github.com/naturefwvue/nf-vue3-ant 有缺点本来是写在最后的,但是博文写的似乎有点太长了,估计大家没时间往下看,于是就把有缺点写在前面了,不喜 ...
随机推荐
- python 日期与字符串之间的转换
1.str转换为datetime >>> from datetime import datetime >>> cday = datetime.strptime('2 ...
- 从架构师角度谈谈mybatis-plus可能存在的问题
存在这么一个情况:对于缺营养的人来说,医生更倾向于建议他选择纯牛奶,而不是有机奶(因其有添加剂).然而,大部分人却更加倾向于选择有机奶, 因其口感不错,因此,对于选择纯牛奶还是有机奶,这是个博弈问题. ...
- 【题解】T749 localmaxima
# T749 localmaxima 权限限制没有超链接 题目描述 Description 给出一个排列,若其中一个数比它前面的数都大,则称为localmaxima数,求一个随机排列中localmax ...
- ES6中的Module与Interator
小编今天在用Vue做项目的时候,发现组件中有import和export,刚好今天看到相关的语法介绍和一些实例,下面小编就和大家一起进步.对于模块化规范,在es6出现之前,有以下三种规范,分别是Comm ...
- sql循环说明
while循环:主要是判断,不能使用表中的ID,临时表是ID自增的,通过自增ID可以查出表ID(语法简单,需要配合其他代码操作表ID)游标循环:可以使用表中的ID ,进行修改等操作(语法难一点,核心代 ...
- 易车网实战+【保姆级】:Feapder爬虫框架入门教程
今天辰哥带大家来看看一个爬虫框架:Feapder,看完本文之后,别再说你不会Feapder了.本文辰哥将带你了解什么是Feapder?.如何去创建一个Feapder入门项目(实战:采集易车网轿车数据) ...
- 02 Linux系统发送告警邮件
# yum install mailx -y # vim /etc/mail.rc set from=hyjy2504164765@163.com smtp=smtp.163.com set smtp ...
- webpack(1)安装环境与解决环境问题
前言 如果我们需要使用webpack,就需要依赖node环境 nvm node npm webpack@cli webpack nvm安装 nvm是一个用来管理node版本的工具.我们之所以需要使用n ...
- POJ 3304 Segments 叉积
题意: 找出一条直线,让给出的n条线段在这条直线的投影至少有一个重合的点 转化一下,以重合的点作垂线,那么这条直线一定经过那n条线段.现在就是求找到一条直线,让这条直线经过所有线段 分析: 假设存在这 ...
- imply套件以及plyql的安装
本文出自:http://www.cnblogs.com/gaojiang/p/7212149.html 1.安装nodejs,版本需要在4.0以上,安装方法见上篇博客 2.下载imply,地址:htt ...