问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

Vue SFC Playground 怎么使用？

头像
你好啊你好
    41922790

    image.png

    代码地址

    这里提示都出来了嘛，怎么说未导出呢？
    要如何正确引入ant并使用呢？

    vue3前端
    阅读 1.7k
    avatarAI BotBETA

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

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

    npm install antd
# or
yarn 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 标签的冲突。

    2 个回答
    得票最新
    头像
    君迹我心
      5.1k41927
      ✓ 已被采纳

      可以使用 ES-module ，只要找到好用的 CND 地址就行：

      <script>
import { DatePicker } from "https://lib.baomitu.com/ant-design-vue/4.0.7/antd.esm.min.js";
console.log("DatePicker:", DatePicker);
export default {
  data() {
    return {
      msg: 'Hello World!'
    }
  }
}
</script>
      头像
      Meathill
        22.8k133642

        SFC playground 不能装依赖，但是可以通过 ESM 加载远程依赖。

        所以这里我们可以利用 unpkg.com 来满足加载依赖需求。unpkg 会为所有 npm 包提供 CDN。比如，要加载 lodash，就可以这样：

        import _ from 'https://unpkg.com/lodash-es@latest/lodash.js';

        关于利用 SFC playground 尝试学习开发，我做过一个系列视频：Vue3 开发扫雷游戏，抽空可以看看。

        撰写回答
        你尚未登录，登录后可以
        • 和开发者交流问题的细节
        • 关注并接收问题和回答的更新提醒
        • 参与内容的编辑和改进，让解决方法与时俱进
        推荐问题