vue3实例项目
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
vue3实例项目
以下是一个简单的Vue3 实例项目，演示了如何使用Vue3 构建一个简单的单页面应用：
1.
创建一个新的Vue3 项目：
2.
bash复制代码
vue create my-app
cd my-app
1.
在src目录下创建一个新的组件HelloWorld.vue，并添加以下代码：
2.
html复制代码
<template>
<div class="hello-world">
<h1>{{ message }}</h1>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
message: {
type: String,
required: true
}
}
}
</script>
<style>
.hello-world {
text-align: center;
}
</style>
1.
在src目录下创建一个新的App.vue文件，并添加以下代码：
2.
html复制代码
<template>
<div id="app">
<HelloWorld :message="message" />
</div>
</template>
<script>
import HelloWorld from'./components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
},
data() {
return {
message: 'Hello, World!'
}
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
1.
在src目录下创建一个新的index.html文件，并添加以下代码：2.
html复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,
initial-scale=1.0" />
<title>Vue3 Example</title>
</head>
<body>
<div id="root"></div>
<script src="/src/main.js"></script>
</body>
</html>
1.
在src目录下创建一个新的main.js文件，并添加以下代码：2.
javascript复制代码
import { createApp } from'vue'
import App from'./App.vue'
createApp(App).mount('#root')
1.
在项目根目录下运行以下命令启动项目：
2.
bash复制代码
npm run serve
1.在浏览器中访问http://localhost:8080，即可看到运行的Vue3 实例项目。