vue项目中自动安装和手动安装Ant框架

命令安装

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;
}

内容展示