Ant Design Vue 浏览器引入之后怎么使用组件
时间: 2025-02-20 10:39:24 浏览: 63
在浏览器中直接使用 Ant Design Vue 组件,首先你需要确保已经在 HTML 文件里正确地引入了相关的库文件(包括Vue和Ant Design Vue)。以下是一个简单的步骤说明:
### 引入依赖
#### 使用CDN链接
为了方便快速开始,在HTML页面上可以通过 CDN (内容分发网络) 直接加载所需资源。
```html
<!-- 引入 Vue -->
<script src="https://cdn.jsdelivr.net/npm/vue@next"></script>
<!-- 引入 ant design vue 和 样式表 -->
<link rel="stylesheet" href="https://unpkg.com/ant-design-vue/lib/style/index.css">
<script src="https://unpkg.com/ant-design-vue/dist/antd.min.js"></script>
```
### 创建应用实例并挂载组件
接下来是创建一个基础的应用程序结构以及注册和使用按钮等基本组件的例子:
```html
<div id="app">
<a-button type="primary">点击我</a-button>
</div>
<script type="module">
// 初始化vue app
const App = {
setup() {},
template: `<div><a-button type="primary">点击我</a-button></div>`
};
Vue.createApp(App).use(antdv).mount('#app');
</script>
```
> 注意:上面代码中的`type="module"`是为了支持ES6模块化规范。如果遇到跨域等问题时可能需要调整服务器配置或移除该属性试试看效果如何。
另外需要注意的是,由于我们是在全局环境中引入的 `antdv` ,所以在调用 `.use()` 方法的时候可以直接传入变量名而不需要引用路径。
当然实际项目开发建议采用构建工具如webpack、Vite等方式来进行打包部署以获得更好的性能优化及更灵活的功能扩展能力。
阅读全文
相关推荐


















