步骤一：首先已安装好Vue3的环境
可以通过以下命令安装Vue3：
npm install vue@next
步骤二：创建一个main.js文件，用于初始化Vue3应用：
import { createApp } from 'vue';
import App from './App.vue';
createApp(App).mount('#app');
步骤三：创建一个App.vue文件，作为Vue3应用的根组件：
<template>
<div>
<h1>{{ message }}</h1>
<button @click="changeMessage">点击修改消息</button>
</div>
</template>
<script>
export default {
data() {
return {
message: '这是默认消息'
};
},
methods: {
changeMessage() {
this.message = '修改后的消息';
}
}
};
</script>
步骤四：创建一个index.html文件，引入Vue3的核心库和上述两个文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue3入门</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app"></div>
<script src="main.js"></script>
</body>
</html>
一个简单的Vue3应用已经完成了。你可以在浏览器中打开该网页，观察到页面上显示的默认消息，并可以点击按钮修改消息。
936
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
