Vite中将Vanilla项目升级为Vue3

在 Vite 中将 Vanilla 项目升级为 Vue 3 项目有一套简单的最佳实践步骤。这些步骤可以帮助你将 Vue 集成到现有的 Vite 项目中，并确保项目结构合理、易于维护。以下是推荐步骤：

1、安装 Vue 相关依赖

在你的项目中，运行以下命令来安装 Vue 3 和 Vite 的 Vue 插件：

yarn add vue@next
yarn add -D @vitejs/plugin-vue

2、配置 Vite 插件

在 vite.config.js 中导入并配置 Vue 插件。这样 Vite 就能识别 .vue 文件并对其进行适当的处理。

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
});

3、项目结构调整

为了更好地组织 Vue 组件，创建一个 src 目录，并在其中添加 App.vue 作为主应用组件，以及一个 main.js 或 main.ts 文件作为入口文件：

├── index.html
└── src
    ├── App.vue
    └── main.js

4、创建 App.vue

在 src 文件夹中创建一个基本的 App.vue 文件，以便测试 Vue 组件的渲染效果：

<!-- src/App.vue -->
<template>
  <div id="app">
    <h1>Hello, Vue 3!</h1>
  </div>
</template>

<script>
export default {
  name: 'App',
};
</script>

<style>
/* 样式可以根据需要自定义 */
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
}
</style>

5、设置入口文件

在 src 目录下创建 main.js（或 main.ts 如果使用 TypeScript），并在其中引入 Vue 以及 App.vue 组件：

// src/main.js
import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#app');

6、配置 index.html

确保你的 index.html 文件包含 Vue 挂载的 DOM 节点（通常是 id="app"），并正确加载 main.js：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Vite + Vue 3</title>
</head>
<body>
  <div id="app"></div>
  <script type="module" src="/src/main.js"></script>
</body>
</html>

7、启动开发服务器

完成配置后，运行 Vite 开发服务器来查看效果：

yarn dev
posted @ 2025-01-14 16:08  非法关键字  阅读(108)  评论(0)    收藏  举报