目录
引入ant-design-vue
1.全局引入
1. 定制软件命令行使用npm安装npm install ant-design-vue --save2. main.ts定制软件文件中导入import Antd from 'ant-design-vue';import 'ant-design-vue/dist/antd.css';- 1
- 2
- 3
- 4
- 5
2. 局部引入
定制软件为了减小打包大小，定制软件提高加载速度，定制软件更推荐这种做法
定制软件局部引入组件
1. 定制软件命令行安装ant-design-vue包npm install ant-design-vue --save2 创建antPlugin.js文件，定制软件按需引入组件都可在这定制软件个文件中写，以button组件为例import Vue from 'vue'import {Button} from 'ant-design-vue' // 官方文档中组件去掉a，首字母大写如a-form-model， 按需引入组件就是 FormModelVue.use(Button)3 main.ts 导入此文件import ‘@/util/antPlugin’4 babel.config.js 添加import插件，自动引入组件对应样式module.exports = { // ... plugins: [ [ 'import', { libraryName: 'ant-design-vue', libraryDirectory: 'es', style: 'css' } ] ]}5 坑引入样式时，需要npm安装less-loader去解析，less-loader版本过高超过6.0后，会报错。需手动设置javascriptEnabled。故我们在vue.config.js文件中设置(*楼主当时设置了好多遍也没起效，最后发现是less-loader没安装完全，多安装几次就好了*)modules.exports = { css: { loaderOptions: { less: { javascriptEnabled: true } } }}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
局部引入图标
按需采用吧，而且要注意ant-design-vue组件中，自带的图标，也要引用进来，不然组件图标会消失。
1 在项目中创建文件icons.ts ，引入并导出你需要的图标export { default as CloseCircleFill } from '@ant-design/icons/lib/fill/CloseCircleFill'export { default as QuestionCircleTwoTone } from '@ant-design/icons/lib/twotone/QuestionCircleTwoTone'export { default as ForkOutline } from '@ant-design/icons/lib/outline/ForkOutline'2 在vue.config.js中配置将从npm包中导入映射从你创建的文件中导入module.exports = { configureWebpack: { resolve: { alias: { '@ant-design/icons/lib/dist$': path.resolve(__dirname, './src/util/icons.ts') } }, plugins: [ new MomentLocalesPlugin({ localesToKeep: ['zh-CN'] }) ] },}3 坑记得找到组件自身所引入图标，也导入进来- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
使用
1message的使用
可在js中方便的调用message弹窗
1 创建message.jsimport { message } from 'ant-design-vue'2 定义sucess、error等方法，并导出，即可方便使用了function success (msg: string) { message.success(msg)}export default { success, error, warn, info }- 1
- 2
- 3
- 4
- 5
- 6
- 7
2 日期范围组件本地化
讲一下日期选择器本地化，这里讲一下多处
多处本地化，推荐使用config-provider
一个地方组件化，推荐使用组件中locale参数
tempate中使用a-config-provider<a-config-provider :locale="locale"> <a-range-picker :ranges="range" v-model="dateData" :disabledDate="getDisabledTime" :allowClear="false" format="YYYY-MM-DD HH:mm:ss" /> </a-config-provider> js中import moment from 'moment'import zhCN from 'ant-design-vue/es/locale/zh_CN'import 'moment/locale/zh-cn'moment.locale('zh-cn') class类中 public locale = zhCN //定义语言 public range = { //设置快捷选项 今天: [moment().startOf('day'), moment()], 昨天: [ moment() .startOf('day') .subtract(1, 'days'), moment() .endOf('day') .subtract(1, 'days') ], 最近三天: [ moment() .startOf('day') .subtract(2, 'days'), moment() ], 最近一周: [ moment() .startOf('day') .subtract(1, 'weeks'), moment() ] } public getDisabledTime(current: any) { //定义选择范围 return current < moment().subtract(7, 'day') || current > moment() }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
3组件化的小技巧
主要是依靠[] 操作符和，传递父方法。以list和form为例
list
1 子组件中 template中 <a-list item-layout="horizontal" :data-source="data"> <div v-if="headerButtons.length !== 0" slot="header" class="button-postion"> <a-button type="primary" class="button-margin" v-for="(button) in headerButtons" :key="button.name" @click="emitParent(button.funcName,button.type)"> {{button.name}} </a-button> </div> // 【顶部按钮，传递想展示按钮以及方法】 <a-list-item slot="renderItem" slot-scope="item"> <a-list-item-meta :description="item[name]" > <a href="javascript:void(0);" class="title-width" v-if="mainListFunc" slot="title" @click="emitRouter(item)">{{ item[id] }}</a> <span type="link" v-else slot="title" >{{ item[id] }}</span> </a-list-item-meta> //【 list列表，将展示字段传递，使用item[字段]来调用】 <div class="content-width">{{item[remark]}}</div> <a slot="actions"> <a-button size="small" type="link" v-for="(button) in buttons" :key="button.name" @click="emitParent(button.funcName,button.type,item)"> {{button.name}} </a-button> //【传递按钮时，同时传递方法】 </a> </a-list-item> </a-list>js中，接收参数并调用父方法 public emitParent (funcName: string, type: number, data: object = {}) { this.$emit(funcName, type, data) }2 父组件中template中引入子组件，并传递参数<list :headerButtons="headerButtons" :id="id" :name="name" :remark="remark" :data="data" :buttons="buttons" :mainListFunc="mainListFunc" @addOrEditData="startForm" @startSureShow="startSureShow" @mainIdFunc="gotoRouter"></list>js中 定义传递按钮参数及其他参数public buttons =[{ name: '编辑', funcName: 'addOrEditData', type: 2 }, { name: '删除', funcName: 'startSureShow', type: 3 }]/- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
form
1 子组件template中 <a-form-model ref="ruleForm" :model="formData" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol" > <a-form-model-item class="item-margin-bottom" v-for="item in formLabel" :key="item.propName" :label="item.label" :prop="item.propName"> // 【使用form循环来遍历输入列表，传入formLabel】 <a-radio-group v-if="item.type === 1" v-model="formData[item.propName]" :disabled="item.disabled"> // 【使用formData[item.propName]】来双向绑定 <a-radio v-for="radio in item.values" :key="radio.value" :value="radio.value">{{radio.label}}</a-radio> </a-radio-group> <a-input v-else-if="item.type === 2" v-model="formData[item.propName]" type="textarea" :disabled="item.disabled" /> <a-input v-else v-model="formData[item.propName]" :disabled="item.disabled" /> </a-form-model-item> </a-form-model>2父组件中template中引入并传递参数<dialog-form :title="title" :visible="visible" :confirmLoading="confirmLoading" :formData="formData" :formLabel="formLabel" :rules="rules" @saveFunc="saveScenceData" @cancelFunc="closeDialog"></dialog-form>js中定义参数 public formLabel = [{ label: '场景id', propName: 'businessid', disabled: false }, // 标签显示 { label: '场景名称', propName: 'businessname', disabled: false }, { label: '场景描述', propName: 'remark', disabled: false }, ] public formData= { // 表单数据 businessid: '', businessname: '', remark： ‘’ }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
优化
webpack分析插件
vue.config.js中module.exports = { chainWebpack: (config) => { config .plugin('webpack-bundle-analyzer') .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin) },}运行后，打开地址，可看到各个文件的打包大小，进而选择性的优化- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
优化强依赖插件moment
去除其他语言包，只保留中文和英文（英文内置，不可去除）module.exports ={ plugins: [ new MomentLocalesPlugin({ localesToKeep: ['zh-CN'] }) ] },}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9