ant-design-vue使⽤之路
⽬录
引⼊ant-design-vue
1.全局引⼊
1. 命令⾏使⽤npm安装
npm install ant-design-vue --save
2. main.ts⽂件中导⼊
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
2. 局部引⼊
为了减⼩打包⼤⼩，提⾼加载速度，更推荐这种做法
局部引⼊组件
1. 命令⾏安装ant-design-vue包
npm install ant-design-vue --save
2 创建antPlugin.js⽂件，按需引⼊组件都可在这个⽂件中写，以button组件为例
import Vue from 'vue'
import {Button} from 'ant-design-vue' // 官⽅⽂档中组件去掉a，⾸字母⼤写如a-form-model，按需引⼊组件就是 FormModel
Vue.use(Button)
3 main.ts 导⼊此⽂件
import ‘@/util/antPlugin’
fig.js 添加import插件，⾃动引⼊组件对应样式
// ...
ant安装包plugins: [
[
'import',
{ libraryName: 'ant-design-vue', libraryDirectory: 'es', style: 'css' }
]
]
}
5 坑
引⼊样式时，需要npm安装less-loader去解析，less-loader版本过⾼超过6.0后，会报错。
需⼿动设置javascriptEnabled。故我们在fig.js⽂件中设置(*楼主当时设置了好多遍也没起效，最后发现是less-loader没安装完全，多安装⼏次就好了*) ports = {
css: {
loaderOptions: {
less: {
javascriptEnabled: true
}
}
}
}
局部引⼊图标
按需采⽤吧，⽽且要注意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 在fig.js中配置将从npm包中导⼊映射从你创建的⽂件中导⼊
configureWebpack: {
resolve: {
alias: {
'@ant-design/icons/lib/dist$': solve(__dirname, './src/util/icons.ts')
}
},
plugins: [
new MomentLocalesPlugin({
localesToKeep: ['zh-CN']
})
]
},
}
3 坑
记得到组件⾃⾝所引⼊图标，也导⼊进来
使⽤
1message的使⽤
可在js中⽅便的调⽤message弹窗
1 创建message.js
import { message } from 'ant-design-vue'
2 定义sucess、error等⽅法，并导出，即可⽅便使⽤了
function success (msg: string) {
message.success(msg)
}
export default { success, error, warn, info }
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()
}
3组件化的⼩技巧
主要是依靠[] 操作符和，传递⽗⽅法。以list和form为例
list
<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.p e)">
{{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.pe,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" @addOrEdit Data="startForm"  @startSureShow="startSureShow" @mainIdFunc="gotoRouter"></list>
js中定义传递按钮参数及其他参数
public buttons =[{ name: '编辑', funcName: 'addOrEditData', type: 2 },
{ name: '删除', funcName: 'startSureShow', type: 3 }]/
form
<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"> // 【使⽤fo rm循环来遍历输⼊列表，传⼊formLabel】
<a-radio-group v-if="pe === 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="pe === 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="sav eScenceData" @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： ‘’
}
优化
webpack分析插件
chainWebpack: (config) => {
config
.plugin('webpack-bundle-analyzer')
.
use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
},
}
运⾏后，打开地址，可看到各个⽂件的打包⼤⼩，进⽽选择性的优化
优化强依赖插件moment
去除其他语⾔包，只保留中⽂和英⽂（英⽂内置，不可去除）
plugins: [
new MomentLocalesPlugin({
localesToKeep: ['zh-CN']
})
]
},
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。