使用vue3写一个简单小程序
时间: 2024-05-24 15:04:40 浏览: 184
好的,下面是一个简单的小程序示例:
首先,我们需要安装 Vue3:
```bash
npm install vue@next
```
然后,在 `index.html` 中引用 Vue3:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue3小程序</title>
</head>
<body>
<div id="app"></div>
<script src="https://unpkg.com/vue@next"></script>
<script src="./main.js"></script>
</body>
</html>
```
接着,创建 `main.js` 文件:
```js
import { createApp } from 'vue'
const app = createApp({
data() {
return {
message: 'Hello, World!'
}
},
template: '<div>{{ message }}</div>'
})
app.mount('#app')
```
这里我们使用 `createApp` 函数创建一个 Vue3 应用,然后定义了一个数据属性 `message`,并且使用了模板语法将其展示在页面上。
最后,在命令行中运行:
```bash
npm install -g live-server
live-server
```
然后打开浏览器,访问 `http://localhost:8080/` 就可以看到我们的小程序了!
阅读全文