要在 Vite
中创建一个
Vue 3
项目，请按照以下步骤操作：
1. 安装最新版本的
Node.js。
2. 使用 npm 安装 Vite：`npm install -g vite`。
3. 创建一个新目录并进入它：`mkdir my-
vue3-
app && cd my-
vue3-
app`。
4. 初始化一个新的 npm
项目：`npm init -y`。
5. 安装
Vue 3 和
Vue-
Router：`npm install
vue@next
vue-
router@4`。
6. 创建一个 `index.html`
文件，并添加以下内容：
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>My
Vue 3
App</title>
</head>
<body>
<div id="
app"></div>
<script src="/src/main.js"></script>
</body>
</html>
```
7. 创建一个 `src` 目录，并在其
中创建一个 `main.js`
文件，并添加以下内容：
```javascript
import { create
App } from '
vue';
import
App from './
App.
vue';
import
router from './
router';
create
App(
App).use(
router).mount('#
app');
```
8. 创建一个 `
App.
vue`
文件，并添加以下内容：
```
vue
<template>
<div>
<h1>Welcome to my
Vue 3
app!</h1>
<
router-
view></
router-
view>
</div>
</template>
<script>
export default {
name: '
App',
};
</script>
```
9. 创建一个 `
router` 目录，并在其
中创建一个 `index.js`
文件，并添加以下内容：
```javascript
import { create
Router, createWebHistory } from '
vue-
router';
const
routes = [
{
path: '/',
name: 'Home',
component: () => import('../
views/Home.
vue'),
},
];
const
router = create
Router({
history: createWebHistory(),
routes,
});
export default
router;
```
10. 在 `
router` 目录
中创建一个 `
views` 目录，并在其
中创建一个 `Home.
vue`
文件，并添加以下内容：
```
vue
<template>
<div>
<h2>Home Page</h2>
<p>Welcome to my
Vue 3
app!</p>
</div>
</template>
<script>
export default {
name: 'Home',
};
</script>
```
11. 最后，使用 `vite` 命令启动开发服务器：`vite`。你的
Vue 3 应用程序现在应该已经启动了！
以上就是使用 Vite 创建
Vue 3
项目的完整步骤。
1202
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
