vite从0开始搭建vue3开发环境
时间: 2023-07-29 14:06:03 浏览: 74
要使用 Vite 从零开始搭建 Vue 3 开发环境,你需要按照以下步骤进行操作:
1. 首先,安装 Node.js 和 npm。你可以从 Node.js 官网下载最新版本的 Node.js。
2. 在你的项目文件夹中,使用以下命令初始化一个新的 npm 项目:
```
npm init -y
```
3. 安装 Vite 和 Vue 3:
```
npm install vite vue@next --save-dev
```
4. 在项目文件夹中创建一个名为 `index.html` 的文件,并将以下代码添加到文件中:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Vue 3 Vite Demo</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
```
5. 在项目文件夹中创建一个名为 `src` 的文件夹,并在其中创建一个名为 `main.js` 的文件。将以下代码添加到文件中:
```js
import { createApp } from 'vue';
import App from './App.vue';
const app = createApp(App);
app.mount('#app');
```
6. 在 `src` 文件夹中创建一个名为 `App.vue` 的文件,并将以下代码添加到文件中:
```html
<template>
<div>
<h1>Hello, {{ name }}!</h1>
<p>This is a Vue 3 Vite demo.</p>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
name: 'World',
};
},
};
</script>
```
7. 在终端中使用以下命令启动 Vite:
```
npx vite
```
8. 在浏览器中打开 http://localhost:3000,你应该能够看到一个显示 "Hello, World!" 的页面。
现在你的 Vue 3 Vite 开发环境已经准备好了!你可以在 `App.vue` 中添加更多的 Vue 3 代码,并在浏览器中实时查看结果。
相关推荐
![.zip](https://img-home.csdnimg.cn/images/20210720083646.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)