GVKun编程网logo

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

25

在本文中，我们将详细介绍vue3.0使用ant-design-vue进行按需加载原来这么简单的各个方面，并为您提供关于antdesignvue按需加载的相关解答，同时，我们也将为您带来关于AntDes

在本文中，我们将详细介绍vue3.0使用ant-design-vue进行按需加载原来这么简单的各个方面，并为您提供关于ant design vue按需加载的相关解答，同时，我们也将为您带来关于Ant Design Pro 使用更多 Ant Design of Vue 组件、Ant Design Vue 2.0.0-beta.3 发布 Vue 3 重构、Ant Design Vue作者@唐金州：怎样高效入门 Vue?、Ant Design按需加载的有用知识。

本文目录一览：

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

vue3.0使用ant-design-vue进行按需加载原来这么简单（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中添加该组件哈

Ant Design Pro 使用更多 Ant Design of Vue 组件

Ant Design Pro 使用更多 Ant Design of Vue 组件

  • 因为  Ant Design Pro 是按需加载的，Ant Design of Vue 中的部分组件未默认引用，故需要手工添加到项目中。
  1. 这里以 Pagination 这个分页组件为例。首先在项目中找到文件 \src\core\lazy_lib\components_use.js
  3. 增加如下两个代码 
    import {
.....
// 增加
Pagination
} from ''ant-design-vue''
    // 增加
Vue.use(Pagination)
  4. 至此，页面中即可使用该组件

Ant Design Vue 2.0.0-beta.3 发布 Vue 3 重构

Ant Design Vue 2.0.0-beta.3 发布 Vue 3 重构

2.0.0-beta.3 #

  • 支持 Typescript。
  • 新增 Space 组件。
  • 修复部分组件无法使用 css scope 问题 4bdb24。
  • 修复 List.Meta 注册失败的问题 03a42a
  • 修复 Table 固定列情况下错位问题 #1493
  • 修复 Button 没有垂直居中的问题 bd71e3
  • 修复 Tabs 多次出发 change 事件问题 8ed937

2.0.0-beta.2 #

2020-08-14

设计规范调整 #

  • 行高从 1.5(21px) 调整为 1.5715(22px)。
  • 基础圆角调整，由4px 改为 2px。
  • 分割线颜色明度降低，由 #E8E8E8 改为 #F0F0F0。
  • Table 默认背景颜色从透明修改为白色。

兼容性调整 #

  • IE 最低支持版本为 IE 11。
  • Vue 最低支持版本为 Vue 3.0。

调整的 API #

  • 移除了 LocaleProvider，请使用 ConfigProvider 替代。

  • 移除了 Tag 的 afterClose 属性。

  • 合并了 FormModel、Form，详见下方的 Form 重构部分。

  • tabIndex、maxLength、readOnly、autoComplete、autoFocus 更改为全小写。

  • 为了在 template 语法中更友好的使用插槽，所有涉及到 xxxRender, renderXxxx 的均改成单参数，涉及到 itemRender、renderItem、customRender、dropdownRender、dateCellRender、dateFullCellRender、monthCellRender、monthFullCellRender、renderTabBar。

  • 所有配置 scopedSlots 的地方统一改成 slots。

  • { on, props, attrs, ... } 配置进行扁平化处理，如 { props: {type: ''xxx''}, on: {click: this.handleClick}} 改成 { type: ''xxx'', onClick: this.handleClick }, 涉及相关字段：okButtonProps、cancelButtonProps。

  • xxx.sync 改成 v-model:xxx

  • v-model 更改成 v-model:xxx，具体涉及组件：

    • v-model 改成 v-model:checked 的组件有: CheckableTag、Checkbox、Switch
    • v-model 改成 v-model:value 的组件有: Radio、Mentions、CheckboxGroup、Rate、DatePicker
    • v-model 改成 v-model:visible 的组件有: Tag、Popconfirm、Popove、Tooltip、Moda、Dropdown
    • v-model 改成 v-model:activeKey 的组件有: Collaps、Tabs
    • v-model 改成 v-model:current 的组件有: Steps
    • v-model 改成 v-model:selectedKeys 的组件有: Menu

图标升级 #

在 ant-design-vue@1.2.0 中，我们引入了 svg 图标（为何使用 svg 图标？）。使用了字符串命名的图标 API 无法做到按需加载，因而全量引入了 svg 图标文件，这大大增加了打包产物的尺寸。在 2.0 中，我们调整了图标的使用 API 从而支持 tree shaking，减少默认包体积约 150 KB(Gzipped)。

旧版 Icon 使用方式将被废弃：

<a-icon type="smile" /> <a-button icon="smile" />

2.0 中会采用按需引入的方式：

<template>
  <smile-outlined />
  <a-button>
    <template v-slot:icon><smile-outlined /></template>
  </a-buttom>
</template>
<script>
import SmileOutlined from ''@ant-design/icons/SmileOutlined'';
export default {
  components: {
    SmileOutlined
  }
}
</script>

组件重构 #

在 1.x 中我们提供了 Form、FormModel 两个表单组件，原有的 Form 组件使用 v-decorator 进行数据绑定，在 Vue2 中我们通过上下文进行强制更新组件，但是在 Vue3 中，由于引入 patchFlag 等优化方式，强制刷新会破坏 patchFlag 带来的性能优势。所以在 2.0 版本中我们将 Form、FormModel 进行合并，保留了 FormModel 的使用方式，丰富了相关功能，并改名成 Form。

涉及改动：

  • Form 新增 scrollToFirstError,name,validateTrigger 属性，新增 finish、finishFailed 事件，新增 scrollToField 方法。
  • Form.Item 新增 validateFirst, validateTrigger, 废弃 prop 属性，使用 name 替换。
  • 嵌套字段路径使用数组，过去版本我们通过 . 代表嵌套路径（诸如 user.name 来代表 { user: { name: '''' } }）。然而在一些后台系统中，变量名中也会带上 .。这造成用户需要额外的代码进行转化，因而新版中，嵌套路径通过数组来表示以避免错误的处理行为（如 [''user'', ''name'']）。
  • validateFields 不再支持 callback。validateFields 会返回 Promise 对象，因而你可以通过 async/await 或者 then/catch 来执行对应的错误处理。不再需要判断 errors 是否为空：
// v1
validateFields((err, value) => {
  if (!err) {
    // Do something with value
  }
});

改成

// v2
validateFields().then(values => {
  // Do something with value
});

Ant Design Vue作者@唐金州：怎样高效入门 Vue?

Ant Design Vue作者@唐金州：怎样高效入门 Vue?

今儿跟大家聊聊 Vue 。


不得不承认， Vue 越来越受欢迎了。对比 Angular 和 React，虽然三者都是非常优秀的前端框架，但从 GitHub 趋势看，Vue 已经排在第一位，达到了13万的 Star。


放眼国内外，不管是 BAT 等大厂，还是创业公司，Vue 都有广泛的应用。面试的时候，Vue 相关技术原理也一定是必考点。可以说，对于任何一个前端工程师来说，掌握 Vue 可能不是一个可选项，而更像一门“必修课”。


可是，想要真正用好并不容易。经常有粉丝在后台留言有关 Vue 学习的问题，大家遇到困惑无非是这些方面：

  1. 概念过多，记不住。开发的时候还要一遍又一遍翻文档。

  2. 没能真正理解数据驱动，总是用各种 hack 方法更改视图，为项目挖了一个又一个的坑。

  3. 状态管理的不合理，不知道如何组织 vue 中的 data，provide、vuex、observable。

  4. 工程化，大型项目无从下手。


其实，这些痛点和难点是学习和使用 Vue 的必经之路。


很多粉丝留言问我市面上有没有靠谱的学习资料，今天介绍一位朋友——唐金州，他最近在极客时间开设了《Vue开发实战》视频课，不同于市面上大多数教程，这门课程除了讲解 Vue 的核心知识点及实现原理，在整个学习周期，金州还会带你基于 Vue 去开发一个完整的大型开源项目 Ant Design Pro，从开发、测试、打包构建到最终的上线，并努力将它打造成一个万星项目。



唐金州是谁？


唐金州，目前就职于一点资讯，负责数据中心的前端开发和管理工作。在加入一点资讯之前，他曾就职于搜狗、蚂蚁金服，主要也是负责前端相关的开发工作，对中后台和移动端都有丰富的开发经验。


同时，他也是开源组件库 Ant Design Vue 的作者，这一组件库在开源后获得了众多好评，已经纳入 Ant Design 官方域名下，成为了蚂蚁金服 Ant Design 官方唯一指定的Vue版组件库。


给大家奉上金州老师精心画的 Vue 学习脑图，建议你收藏，为日后学习做准备：

     

上述很多知识点都会在视频课《Vue开发实战》中涉及到，整个课程从 Vue 基础、到生态、再到项目实战，构建一个完整的体系。


我为什么推荐这门课？


现在市面上有不少免费的 Vue 课程，但我看过后发现这些课程可以分成下面几类：

  • 仅仅叙述官方文档，并没有自己的理解和总结，看了以后还要自己花很多时间去理解和钻研；

  • 培训机构的录屏课，这些课大多比较老旧，甚至停留在Vue 1.x的版本。

  • 课程节奏太散，互动闲扯内容过多，时间效率非常低。


《Vue开发实战》这门课，对比上述课程，你可以获得：


1、掌握 Vue 核心知识点和实现原理。金州会从属性、事件、插槽、指令再到生命周期为你详解，让你对 Vue 有一个全面的认识，可以上手开发基本的组件，甚至是负责项目中独立的模块。


2、帮你打通前端工程化全链路技能点，构建一个更全面的知识体系。而且都会搭配课后习题，帮助你进一步加深对技术的理解。


3、最吸引我的是金州带你基于 Vue 去开发完整的大型开源项目 Ant Design Pro，让你具备开发大型前端项目的能力。


4、另外，这个课基于 Vue 2.6 最新版本的语法进行开发，无缝对接即将到来的 3.0 版本，保证你能够快速享受新版本带来的优势。


目录我看了，非常全面，你可以扫文末海报查看。


从我这里订阅有什么福利？


  1. 限时优惠¥99（原价¥129），三杯咖啡的价格。

  2. 今日的订阅用户，立即邀请你进「Vue学习交流群」，仅限前 500人，并获得【前端大礼包】，包括价值4800元的「GMTC 全球大前端技术大会演讲 PPT」+「架构师大前端」+「Web应用开发者」+「2018进击的大前端」+「前端面试指南」，点阅读原文，凭借订阅截图领取！


部分资料图如下：

       

扫码订阅


△扫描海报获取课程目录或订阅


订阅后还可以和金州老师在留言区互动答疑，直接跟业界高手“对话”，机会难得。

点击「阅读原文」，凭购买《Vue开发实战》截图领取价值4800元前端大礼包。


本文分享自微信公众号 - Vue中文社区（vue_fe）。
如有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一起分享。

Ant Design按需加载

Ant Design按需加载

不eject情况下配置antd按需加载

1.安装 react-app-rewired

yarn add react-app-rewired

 

2. 项目根目录下新建 config-overrides.js 文件

/* config-overrides.js */

module.exports = function override(config, env) {
  //do stuff with the webpack config...
  return config;
}
+-- your-project
|   +-- config-overrides.js
|   +-- node_modules
|   +-- package.json
|   +-- public
|   +-- README.md
|   +-- src

3. 修改package.json文件中的start、build、test 命令

/* package.json */

  "scripts": {
-   "start": "react-scripts start",
+   "start": "react-app-rewired start",
-   "build": "react-scripts build",
+   "build": "react-app-rewired build",
-   "test": "react-scripts test --env=jsdom",
+   "test": "react-app-rewired test --env=jsdom",
    "eject": "react-scripts eject"
}

4. 安装以下组件

yarn add less less-loader customize-cra

5. 扩展配置选项

修改config-overrides.js文件

const {
    override,
    fixBabelImports,
    addLessLoader
  } = require("customize-cra");
  
  module.exports = override(
    fixBabelImports("import", {
      libraryName: "antd", libraryDirectory: "lib", style: true // change importing css to less
    }),
    addLessLoader({
      javascriptEnabled: true,
      modifyVars: { 
        "@font-size-base": "12px",
        "@text-color": ''rgba(0, 0, 0, .85)''
      }
    })
  )

6. 启动开发服务

yarn start

 

今天关于vue3.0使用ant-design-vue进行按需加载原来这么简单和ant design vue按需加载的讲解已经结束，谢谢您的阅读，如果想了解更多关于Ant Design Pro 使用更多 Ant Design of Vue 组件、Ant Design Vue 2.0.0-beta.3 发布 Vue 3 重构、Ant Design Vue作者@唐金州：怎样高效入门 Vue?、Ant Design按需加载的相关知识，请在本站搜索。

本文标签：

上一篇Ant Design Vue表单验证失败（ant design vue 表单验证）

下一篇[mac]安装openssl（mac安装openssl）

相关文章