创建vue3 + vite的项目指南

原创已于 2025-03-01 07:44:23 修改 · 1.8k 阅读

17 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端

于 2025-02-21 13:25:21 首次发布

以下是创建 Vue 3 + Vite 项目的详细指南，从环境准备到项目启动，一步一步带你完成。

1. 环境准备

在开始之前，确保你的开发环境已经安装了以下工具：

1.1 安装 Node.js

Vite 和 Vue 3 都需要 Node.js 环境。如果没有安装，请按照以下步骤操作：

1.访问 Node.js 官网。

2.下载并安装最新的 LTS 版本（推荐）。

3.安装完成后，检查是否安装成功：

node -v
npm -v

如果显示版本号，说明安装成功。

2. 使用 Vite 创建 Vue 3 项目

2.1 使用 Vite 脚手架

Vite 提供了一个快速创建项目的工具。打开终端，运行以下命令：

npm create vite@latest

2.2 设置项目

运行上述命令后，Vite 会引导你完成项目配置：

1.项目名称：输入你的项目名称，例如 my-vue3-app。

✔ Project name: … my-vue3-app

2.选择框架：选择 Vue。

✔ Select a framework: › Vue

3.选择变体：选择 JavaScript 或 TypeScript（根据你的需求）。

✔ Select a variant: › JavaScript

4.项目创建完成后，进入项目目录：

cd my-vue3-app

3. 安装依赖

进入项目目录后，安装项目所需的依赖：

npm install

4. 启动开发服务器

安装完成后，启动开发服务器：

npm run dev

Vite 会启动一个本地开发服务器，并输出访问地址（通常是 http://localhost:5173）。打开浏览器访问该地址，你会看到 Vue 3 的欢迎页面。

5. 项目结构

创建的项目结构如下：

my-vue3-app/
├── node_modules/         # 项目依赖
├── public/               # 静态资源（如图片、字体）
├── src/                  # 源代码目录
│   ├── assets/           # 静态资源（如图标、样式）
│   ├── components/       # Vue 组件
│   ├── App.vue           # 根组件
│   └── main.js           # 项目入口文件
├── index.html            # 项目入口 HTML 文件
├── package.json          # 项目配置和依赖
├── vite.config.js        # Vite 配置文件
└── ...                   # 其他配置文件

6. 开发与构建

6.1 开发模式

在开发过程中，使用以下命令启动开发服务器：

npm run dev

Vite 支持热重载（HMR），修改代码后会立即生效。

6.2 生产构建

当项目开发完成后，使用以下命令构建生产环境的代码：

npm run build

构建后的文件会生成在 dist 目录中。

6.3 预览生产构建

可以使用以下命令在本地预览生产环境的构建结果：

npm run preview

7. 安装常用依赖（可选）

7.1 安装 Vue Router

如果需要路由功能，可以安装 Vue Router：

npm install vue-router@4

然后在 src 目录下创建 router 文件夹，并配置路由：

// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';

const routes = [
  { path: '/', component: Home },
  // 其他路由
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

在 main.js 中使用路由：

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

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

7.2 安装 Vuex（状态管理）

如果需要状态管理，可以安装 Vuex：

npm install vuex@next

然后在 src 目录下创建 store 文件夹，并配置 Vuex：

// src/store/index.js
import { createStore } from 'vuex';

export default createStore({
  state: {
    count: 0,
  },
  mutations: {
    increment(state) {
      state.count++;
    },
  },
  actions: {
    increment({ commit }) {
      commit('increment');
    },
  },
});

在 main.js 中使用 Vuex：

import { createApp } from 'vue';
import App from './App.vue';
import store from './store';

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

7.3 安装 Axios（HTTP 请求）

如果需要发送 HTTP 请求，可以安装 Axios：

npm install axios

然后在代码中使用：

import axios from 'axios';

axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

8. 配置 Vite（可选）

如果需要自定义 Vite 配置，可以修改 vite.config.js 文件。例如，配置代理服务器：

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

export default defineConfig({
  plugins: [vue()],
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      },
    },
  },
});