创建 Vue 3.0 应用实例：
1. 安装 Vue.js 3.0：
在项目目录中运行以下命令安装 Vue.js 3.0：
npm install vue@next
2. 创建 Vue 3.0 应用：
在你的 HTML 文件中，引入 Vue.js 3.0，并创建一个应用实例。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue 3.0 App</title>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script src="node_modules/vue/dist/vue.global.js"></script>
<!-- 或者使用 CDN： <script src="https://unpkg.com/vue@next"></script> -->
<script>
const app = Vue.createApp({
data() {
return {
message: 'Hello, Vue 3.0!'
};
}
});
app.mount('#app');
</script>
</body>
</html>
注意：vue.global.js 是 Vue.js 3.0 的全局构建，适用于直接在浏览器中使用。如果你使用构建工具（比如 webpack）进行开发，通常应该使用 Vue.js 3.0 的模块构建。
创建 Vue 3.0 组件实例：
1. 创建 Vue 3.0 组件：
在你的项目中，创建一个 Vue 组件。组件通常保存在单独的 .vue 文件中，或者在一个 JavaScript 文件中定义。
<!-- MyComponent.vue -->
<template>
<div>
<h1>{{ title }}</h1>
<p>{{ content }}</p>
</div>
</template>
<script>
export default {
data() {
return {
title: 'Vue 3.0 Component',
content: 'This is a Vue 3.0 component.'
};
}
};
</script>
2. 在应用中使用组件：
在你的应用中使用 app.component 方法注册组件，并在模板中使用组件。
<!-- main.js -->
import MyComponent from './MyComponent.vue';
const app = Vue.createApp({
// ...
});
app.component('my-component', MyComponent);
app.mount('#app');
<!-- index.html -->
<div id="app">
{{ message }}
<my-component></my-component>
</div>
在上述示例中，app.component 方法用于注册 MyComponent 组件，并在模板中使用了 my-component 标签来渲染该组件。
这是基本的 Vue 3.0 应用和组件实例的创建过程。在实际项目中，你可能会使用构建工具（比如 Vue CLI）来更方便地组织和管理你的 Vue.js 项目。
转载请注明出处：http://www.zyzy.cn/article/detail/481/Vue 3.0