vue3+vite小项目实战示范,具体步骤
时间: 2023-02-23 15:16:53 浏览: 182
vue 项目实战
3星 · 编辑精心推荐
下面是 Vue3 + Vite 的小项目实战示范的具体步骤:
1. 安装 Node.js 和 npm,如果您已经安装了这些,请跳过此步骤。
2. 创建一个文件夹,然后在命令行中进入该文件夹。
3. 在命令行中运行以下命令来初始化项目:
```
npm init -y
```
4. 安装 Vue3 和 Vite:
```
npm install vue@3.0.0-rc.11
npm install -D vite
```
5. 在项目根目录下创建一个名为 "public" 的文件夹,并在其中创建一个名为 "index.html" 的文件:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue3 + Vite Example</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
```
6. 在项目根目录下创建一个名为 "src" 的文件夹,并在其中创建一个名为 "main.js" 的文件:
```
import { createApp } from 'vue'
const app = createApp({
template: `
<div>
{{ message }}
</div>
`,
data() {
return {
message: 'Hello Vue3 + Vite'
}
}
})
app.mount('#app')
```
7. 在命令行中运行以下命令启动开发服务器:
```
npx vite
```
8. 在浏览器中打开 `http://localhost:3000`,您应该能看到 "Hello Vue3 + Vite"。
这就是 Vue3 + Vite 的小项目实战示范的具体步骤,希望对
阅读全文