1.1 安装vue-cli脚手架
PS D:\code\vue-demo> npm install -g @vue/cli
......
removed 1 package, and changed 898 packages in 49s
PS D:\code\vue-demo>
查看vue版本
PS D:\code\vue-demo> vue --version
@vue/cli 5.0.6
PS D:\code\vue-demo>
如果没有vue命令,使用Everything搜索vue.cmd,并配置环境变量即可.
1.2 使用CLI创建vue工程
执行以下命令:工程名为vue-20220625
PS D:\code\vue-demo> vue create vue-20220625
PS D:\code\vue-demo>
1.3 引入ant design vue组件
ant design vue 官网地址:https://www.antdv.com/docs/vue/introduce-cn
使用vscode打开工程,执行命令
PS D:\code\vue-demo\vue-20220625> npm install ant-design-vue --save
added 21 packages in 13s
至此vue从创建到引入ant design vue组件完成,接下来配置按需加载组件。
全量加载组件实际开发中不建议使用。
1.4 Ant Design Vue组件按需加载
参考官方说明,按需加载推荐使用babel-plugin-import插件。
babel配置文件.babelrc或者babel.config.js文件,安装插件&添加如下内容
安装插件:
npm install babel-plugin-import --save-dev
配置文件内容:
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
],
"plugins": [
// style必须使用css
["import", { "libraryName": "ant-design-vue", "libraryDirectory": "es", "style": "css" }] // `style: true` 会加载 less 文件
]
}
1.5 修改App.vue内容,使用AntD组件
<template>
<a-layout>
<a-layout-header class="header">
<div class="logo" />
<a-menu v-model:selectedKeys="selectedKeys1" theme="dark" mode="horizontal" :style="{ lineHeight: '64px' }">
<a-menu-item key="1">nav 1</a-menu-item>
<a-menu-item key="2">nav 2</a-menu-item>
<a-menu-item key="3">nav 3</a-menu-item>
</a-menu>
</a-layout-header>
<a-layout-content style="padding: 0 50px">
<a-breadcrumb style="margin: 16px 0">
<a-breadcrumb-item>Home</a-breadcrumb-item>
<a-breadcrumb-item>List</a-breadcrumb-item>
<a-breadcrumb-item>App</a-breadcrumb-item>
</a-breadcrumb>
<a-layout style="padding: 24px 0; background: #fff">
<a-layout-sider width="200" style="background: #fff">
<a-menu v-model:selectedKeys="selectedKeys2" v-model:openKeys="openKeys" mode="inline" style="height: 100%">
<a-sub-menu key="sub1">
<template #title>
<span>
<user-outlined />
subnav 1
</span>
</template>
<a-menu-item key="1">option1</a-menu-item>
<a-menu-item key="2">option2</a-menu-item>
<a-menu-item key="3">option3</a-menu-item>
<a-menu-item key="4">option4</a-menu-item>
</a-sub-menu>
<a-sub-menu key="sub2">
<template #title>
<span>
<laptop-outlined />
subnav 2
</span>
</template>
<a-menu-item key="5">option5</a-menu-item>
<a-menu-item key="6">option6</a-menu-item>
<a-menu-item key="7">option7</a-menu-item>
<a-menu-item key="8">option8</a-menu-item>
</a-sub-menu>
<a-sub-menu key="sub3">
<template #title>
<span>
<notification-outlined />
subnav 3
</span>
</template>
<a-menu-item key="9">option9</a-menu-item>
<a-menu-item key="10">option10</a-menu-item>
<a-menu-item key="11">option11</a-menu-item>
<a-menu-item key="12">option12</a-menu-item>
</a-sub-menu>
</a-menu>
</a-layout-sider>
<a-layout-content :style="{ padding: '0 24px', minHeight: '280px' }">
Content
</a-layout-content>
</a-layout>
</a-layout-content>
<a-layout-footer style="text-align: center">
Ant Design ©2018 Created by Ant UED
</a-layout-footer>
</a-layout>
</template>
<script>
import { UserOutlined, LaptopOutlined, NotificationOutlined } from '@ant-design/icons-vue';
import { defineComponent, ref } from 'vue';
export default defineComponent({
name: 'App',
components: {
UserOutlined,
LaptopOutlined,
NotificationOutlined,
},
setup() {
return {
selectedKeys1: ref(['2']),
selectedKeys2: ref(['1']),
openKeys: ref(['sub1']),
};
},
});
</script>
<style>
#components-layout-demo-top-side .logo {
float: left;
width: 120px;
height: 31px;
margin: 16px 24px 16px 0;
background: rgba(255, 255, 255, 0.3);
}
.ant-row-rtl #components-layout-demo-top-side .logo {
float: right;
margin: 16px 0 16px 24px;
}
.site-layout-background {
background: #fff;
}
</style>
1.6 启动vue工程
npm run serve
启动成功界面
分析问题:组件无法解析,说明组件未被引入。有人会说这可能是css样式未加载。因为ant design vue中需要使用less-loader 加载器,将less 转换为 css属性。在这里解释以下,其实vue CLI 脚手架中已经集成了less-loader等loader加载器,不需要在去安装依赖。
解决办法,按需引入组件, 按需引入组件时,css也会被引入。
<script>
import { UserOutlined, LaptopOutlined, NotificationOutlined } from '@ant-design/icons-vue';
import { Layout, Menu, Breadcrumb } from 'ant-design-vue';
import { defineComponent, ref } from 'vue';
export default defineComponent({
name: 'App',
components: {
ALayout: Layout,
ALayoutHeader: Layout.Header,
ALayoutSider: Layout.Sider,
ALayoutContent: Layout.Content,
ALayoutFooter: Layout.Footer,
AMenu: Menu,
AMenuItem: Menu.Item,
ASubMenu: Menu.SubMenu,
ABreadcrumb: Breadcrumb,
ABreadcrumbItem: Breadcrumb.Item,
UserOutlined,
LaptopOutlined,
NotificationOutlined,
},
setup() {
return {
selectedKeys1: ref(['2']),
selectedKeys2: ref(['1']),
openKeys: ref(['sub1']),
};
},
});
</script>
刷新web画面,内容显示正常。