前端 - Vue SFC Playground 怎么使用？

Question

代码地址

要如何正确引入ant并使用呢？

Answer 1

这是一个涉及到如何正确使用 Vue 的单文件组件 (SFC, Single File Component) 的问题。首先，ant通常指的是 Ant Design，这是一个由蚂蚁金服出品的用于构建企业级用户界面的设计库。

在使用之前，请确保你已经在你的项目中安装了 Ant Design。你可以通过 npm 或 yarn 安装：

npm install antd# oryarn add antd

然后，在你的 Vue SFC 中，你可以这样引入并使用 Ant Design 的组件：

<template>  <a-button type="primary">Primary Button</a-button></template><script>import { Button } from 'antd';export default {  name: 'MyComponent',  components: {    'a-button': Button, // 使用 antd 的 Button 组件，注意这里需要用 'a-' 前缀来避免与 html 标签冲突  },}</script>

在上面的代码中，我们首先从 'antd' 中导入了 'Button' 组件，然后在我们的 SFC 的 components 选项中，我们使用 'a-' 前缀来定义一个新的组件 'a-button'，这样我们就可以在模板中使用 'a-button' 来代替 Ant Design 的 'Button' 组件了。注意，Ant Design 的组件名通常以大写字母开头，并且是驼峰式的，比如 'Button' 会变成 'aButton'。我们在这里使用 'a-' 前缀来避免与 HTML 标签的冲突。