vue3 + vite
时间: 2023-07-01 18:29:15 浏览: 136
vue3+vite+ts
当然可以使用 Vite 来开发 Vue 3 项目,下面是具体的步骤:
1. 首先,确保你已经安装了 Node.js 和 npm。
2. 在命令行中输入以下命令来安装 Vite:
```
npm install -g vite
```
3. 接着,创建一个新的 Vue 3 项目。在命令行中输入以下命令:
```
mkdir my-project
cd my-project
npm init -y
npm install vite vue@next
```
其中,my-project 是你想要创建的项目名称,你可以自己修改。
4. 创建 `index.html` 文件,并添加以下内容:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Vue 3 + Vite</title>
</head>
<body>
<div id="app"></div>
<script type="module">
import { createApp } from 'vue';
import App from './App.vue';
createApp(App).mount('#app');
</script>
</body>
</html>
```
5. 创建 `App.vue` 文件,并添加以下内容:
```html
<template>
<div>
<h1>{{ message }}</h1>
</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello, Vite!'
}
}
}
</script>
```
6. 在命令行中输入以下命令来启动 Vite 开发服务器:
```
vite
```
7. 如果一切顺利,你应该可以在浏览器中看到一个欢迎页面了。现在你已经成功地创建了一个 Vue 3 + Vite 项目。
希望能对你有所帮助!
阅读全文