Vue3.x 作为一个渐进式 JavaScript 框架，为开发者提供了强大的工具和灵活的方法来构建用户界面。本文将详细介绍如何通过两种完全不同的方式构建一个 Vue3.x 组件，以及如何在其他 Vue3.x 组件和 HTML 文件中使用这个构建出来的组件。
SFC（单文件组件）模式
构建 Vue3.x 组件
构建一个 Vue3.x 组件主要涉及创建一个单文件组件（Single File Component，SFC），这里我们通过 JavaScript 来实现。
步骤 1：定义组件
首先，创建一个名为 MyComponent.vue 的文件作为 Vue 组件。Vue3.x 推荐使用 Composition API 来定义组件，因此下文将利用 setup 函数。
<template>
<div>{{ message }}</div>
</template>
<script>
import { ref } from 'vue';
export default {
name: 'MyComponent',
setup() {
const message = ref('Hello Vue3!');
return { message };
}
}
</script>
上述代码中定义了一个简单的组件，它利用了 Vue3.x 的响应式系统（ref）来管理数据状态，并在模板中显示这个状态。
步骤 2：在 Vue3.x 项目中使用组件
假设要在另一个组件中使用 MyComponent 组件，需要先在父组件中导入它。
导入并注册组件
在父组件中（比如 App.vue），导入并局部注册 MyComponent：
<template>
<div>
<MyComponent />
</div>
</template>
<script>
import MyComponent from './components/MyComponent.vue';
export default {
name: 'App',
components: {
MyComponent
}
}
</script>
通过这种方式就可以在 App.vue 的模板中任何位置使用 <MyComponent /> 了。
步骤 3：在 HTML 文件中直接使用 Vue3.x 组件
要在纯 HTML 文件中使用 Vue3.x 组件，则需要通过 Vue 的全局 API createApp 来挂载一个 Vue 应用实例，并注册组件。
创建一个 HTML 文件
在你的 HTML 文件中，你需要引入 Vue3.x 的脚本，并定义一个挂载点（比如一个 div 元素）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue3 Component in HTML</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app"></div>
<script type="module">
import { createApp } from 'vue';
import MyComponent from './path/to/MyComponent.vue';
const app = createApp({
components: {
MyComponent
},
template: `<MyComponent />`
});
app.mount('#app');
</script>
</body>
</html>
通过在 <script> 标签中设置 type="module"，使得可以使用 ES 模块导入语法。然后，我们从 Vue 导入 createApp 函数，并从组件文件导入 MyComponent 组件。通过调用 createApp 并传递一个包含 MyComponent 组件的对象，我们创建了一个 Vue 应用实例。最后，通过调用 mount 方法并指定一个选择器，我们将 Vue 应用挂载到 DOM 中。
非SFC（纯js）模式
步骤 1：构建 Vue3.x 组件（MyComponent.js）
首先，创建一个 Vue3.x 组件 MyComponent.js，并使用 template 字段来定义组件的模板。
// MyComponent.js
import { defineComponent, ref } from 'vue';
const MyComponent = defineComponent({
name: 'MyComponent',
setup() {
const message = ref('Hello, Vue3 with template!');
return { message };
},
template: `<div>{{ message }}</div>`
});
export default MyComponent;
这个组件通过 setup 函数返回一个响应式数据 message，并在 template 字段中使用这个数据。
步骤 2：在主组件（App.js）中使用 MyComponent.js
接下来，创建 App.js 文件，在这个文件中，定义一个主组件 App，并在其中使用 MyComponent。
// App.js
import { defineComponent } from 'vue';
import MyComponent from './MyComponent.js';
const App = defineComponent({
name: 'App',
components: {
MyComponent
},
template: `
<div id="app">
<h1>This is the App component</h1>
<MyComponent />
</div>`
});
export default App;
这里在 App 组件的 template 字段中直接使用了 MyComponent 组件。
步骤 3：在 HTML 文件中使用 Vue 应用
在 index.html 文件中，首先引入 Vue 库，并使用 <script> 标签直接引入 App.js，在这个脚本中将执行创建和挂载 Vue 应用的动作。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue 3 App</title>
<script type="module" src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app"></div>
<script type="module">
import { createApp } from 'vue';
import App from './App.js';
createApp(App).mount('#app');
</script>
</body>
</html>
在这个 index.html 文件中，首先为 Vue 应用提供了一个挂载点 <div id="app"></div>。然后，通过 <script type="module"> 引入 Vue 库和定义的 App.js。最后，使用 createApp(App).mount('#app'); 创建 Vue 应用并挂载到页面上的指定元素。
采用这种方式，不仅充分利用了 Vue 3.x 中 template 字段的便利，而且还保持了应用的模块化。这样的实践允许开发者以更接近 Vue 推荐的方式来定义和使用组件，同时也使得组件的引用和挂载过程更加直观和简洁。通过在 index.html 中完成应用的挂载，更清楚地控制了应用的入口点，为可能的进一步扩展留出了空间。
总结
通过以上步骤，展示了如何通过两种把不同的方式构建一个 Vue3.x 组件，以及如何在其他 Vue3.x 组件和普通 HTML 文件中使用它。这种灵活性是 Vue 的一大优势，使得它可以适应各种不同的开发需求和环境。无论是在单页面应用中，还是在传统的多页面应用中嵌入 Vue 组件，Vue3.x 都提供了简洁而强大的解决方案。
原文链接：https://juejin.cn/post/7341267497427337216 作者：慕仲卿
