hbuilderx制作网页 使用ant design vue

### 使用 HBuilderX 和 Ant Design Vue 创建网页项目的教程

#### 项目初始化
为了启动一个新的基于 HBuilderX 的 Web 应用程序并集成 Ant Design Vue 组件库，需先安装最新版本的 HBuilderX 并创建一个空白的 Vue 项目。

# 安装依赖包
npm install ant-design-vue@next --save

#### 配置 main.js 文件
在 `main.js` 中引入 Ant Design Vue 及其样式文件来全局注册组件[^2]：

// main.js
import { createApp } from 'vue'
import App from './App.vue'

import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';

const app = createApp(App);
app.use(Antd);

app.mount('#app');

#### 添加自定义 CSS 样式重置
为确保页面布局的一致性和美观度，在 `src/assets/css/` 路径下新建名为 `reset.css` 的文件用于覆盖默认浏览器样式表[^3]:

/* reset.css */
html, body {
    margin: 0;
    padding: 0;
}
body {
    font-family: Arial, sans-serif;
}

接着修改 `App.vue` 来加载此 CSS 文件:

<!-- App.vue -->
<template>
  <router-view />
</template>

<style>
@import "./assets/css/reset.css";
</style>

#### 启用代码提示功能
为了让开发体验更加流畅高效，建议激活 HBuilderX 内建的语言服务支持以获得更好的编码辅助。这可以通过菜单栏进入【工具】-> 【设置】 -> 【语言服务设置】找到对应的选项完成配置[^5].

通过上述步骤可以顺利搭建起一套完整的前端工作流环境，利用 HBuilderX 结合 Ant Design Vue 构建现代化单页应用(SPA)，从而实现快速迭代与维护的企业级网站建设目标。