命令安装
1、如果没有vue项目则执行以下命令创建新vue3项目。如果有项目则跳过本步
npm create vue@latest
具体内容请看vue官网:快速上手 | Vue.js (vuejs.org)
2、 安装ant-Design-vue,命令如下:
npm install ant-design-vue@4.x --save
具体内容请看官网:Ant Design of Vue - Ant Design Vue (antdv.com)
3、框架使用
在main.ts/main.js文件中添加一下内容
(1)组件全部引入
// main.ts
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/reset.css';
const app = createApp(App);
app.use(Antd)
// App.vue
<a-button>按钮</a-button>
(2)组价按需引入。一般不这个引入
// main.ts
import { DatePicker } from 'ant-design-vue';
import 'ant-design-vue/dist/reset.css';
const app = createApp(App);
app.use(DatePicker);
// App.vue
<script setup lang="ts">
// 时间组件变量
let value1 = ref()
</script>
<template>
<a-date-picker v-model:value="value1" />
</template>
手动安装
这里就是重点了,当时有这个需求时,我在百度上找了好多都是用命令安装ant框架的,但是这种方式在内网机上肯定是不行的,因此我们必须要手动安装,但是手动安装就意味着肯定没有命令行安装的方式简单。
现在我们先在有网络的电脑上执行上面的命令安装操作,将ant所需要的插件包下载下来,然后开始往内网项目中转移。
第一步:在外网项目的node_modules中将以下ant框架所需要的依赖包复制到内网项目中。
第二步:在内网项目中的main.ts/main.js文件中添加如下代码:
import Antd from 'ant-design-vue';
// 手动添加ant-design-vue的css样式
import 'ant-design-vue/dist/reset.css';
const app = createApp(App);
app.use(Antd)
第三步:使用组件-这里只展示组件中导入。一般情况我们也不需要全局导入
<a-button>按钮</a-button>
本次需求我需要一个自定义的菜单,这里我就用自定义的菜单栏做演示了
JavaScript内容
// 引入图标
import { MailOutlined, AppstoreOutlined, SettingOutlined } from '@ant-design/icons-vue';
// 引入组件
import { Menu } from 'ant-design-vue';
// 组件被点击后的事件
const handleClick = (e:any)=>{
console.log(e)
}
HTML内容
<div>
<Menu
mode="vertical"
defaultSelectedKeys='[1]'
@click="handleClick"
style="width: 80px">
<Menu.Item key="1" >
<div class="MenuItem">
<mail-outlined />
<b>首页</b>
</div>
</Menu.Item>
<Menu.SubMenu key="sub1" title="更多">
<Menu.Item key="3">
<div class="MenuItem">
<appstore-outlined />
<b>菜单</b>
</div>
</Menu.Item>
<Menu.Item key="4">
<div class="MenuItem">
<setting-outlined />
<b>设置</b>
</div>
</Menu.Item>
</Menu.SubMenu>
</Menu>
</div>
CSS内容
.MenuItem{
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.ant-menu-submenu{
height: 55px !important;
line-height: 55px !important;
}
.ant-menu-item{
display: flex !important;
flex-direction: column;
justify-content: center;
align-items: center;
height: 55px !important;
line-height: 55px !important;
}
.ant-menu-title-content{
margin-inline-start:0 !important;
line-height: 20px;
}
.ant-menu-submenu-arrow{
display: none;
}
.ant-menu-submenu-title{
display: flex !important;
align-items: center;
justify-content: center;
flex-direction: column;
padding-inline-end: 17px !important;
}
内容展示