我用的是vue3 setup语法糖,怎么搭建?
时间: 2024-05-03 13:21:53 浏览: 15
搭建Vue3项目的基本步骤如下:
1. 安装Node.js和npm,如果已经安装过则可以跳过此步骤。
2. 安装Vue CLI 4.x版本或以上,使用npm安装:
```
npm install -g @vue/cli
```
3. 创建Vue3项目,使用Vue CLI创建项目:
```
vue create my-project
```
在创建项目时会让你选择使用哪种预设,可以选择默认的或手动选择需要的功能。
4. 进入项目目录,启动开发服务器:
```
cd my-project
npm run serve
```
5. 在src目录下创建一个名为`main.js`的文件,并添加以下内容:
```javascript
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
```
6. 在src目录下创建一个名为`App.vue`的文件,并添加以下内容:
```vue
<template>
<div>
<h1>{{msg}}</h1>
</div>
</template>
<script>
export default {
name: 'App',
setup() {
const msg = 'Hello World!'
return { msg }
}
}
</script>
```
7. 在public目录下的`index.html`文件中添加一个id为`app`的div标签:
```html
<body>
<div id="app"></div>
</body>
```
8. 在浏览器中打开http://localhost:8080/,可以看到页面上显示了`Hello World!`。
以上就是使用Vue3 setup语法糖搭建Vue3项目的基本步骤。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)