Vite + Vue 项目创建教程

简介

Vite（法语意为"快速"，发音 /vit/）是一个现代前端构建工具，提供了极速的开发服务器和优化的构建配置。Vue 是一个流行的渐进式JavaScript框架，用于构建用户界面。本教程将指导您如何使用Vite创建一个Vue项目，并介绍基本的开发流程。

Vite的优势

极速的服务器启动：Vite 使用原生 ES 模块导入，无需打包即可启动服务器
即时的模块热更新：修改代码后，页面会立即更新，无需刷新浏览器
优化的构建：生产环境下使用 Rollup 进行高效打包
丰富的功能：TypeScript、JSX、CSS预处理器等开箱即用
灵活的插件API：可以通过插件扩展功能

前置条件

在开始之前，请确保您的系统已安装以下软件：

Node.js：版本 >= 14.18.0 或 16.0.0 以上
- 可以通过 Node.js 官网下载安装
- 或使用 NVM 管理多个 Node.js 版本
包管理器：npm（随Node.js安装）、yarn 或 pnpm
- Yarn 安装：npm install -g yarn
- PNPM 安装：npm install -g pnpm
编辑器：推荐使用 Visual Studio Code
- 建议安装 Volar 扩展以获得更好的 Vue 开发体验

创建项目

使用NPM

打开终端（命令提示符或PowerShell），运行以下命令：

npm create vite@latest my-vue-app -- --template vue

在执行此命令后，您将看到类似以下的输出：

Scaffolding project in C:\path\to\my-vue-app...

Done. Now run:

  cd my-vue-app
  npm install
  npm run dev

cd my-vue-app
npm install

安装过程中，您将看到类似以下的输出：

added XX packages in Xs

XX packages are looking for funding
  run `npm fund` for details

使用Yarn

运行以下命令创建项目：

yarn create vite my-vue-app --template vue

cd my-vue-app
yarn

使用PNPM

运行以下命令创建项目：

pnpm create vite my-vue-app -- --template vue

cd my-vue-app
pnpm install

交互式创建（推荐）

如果您不确定要使用哪个模板，可以使用交互式方式创建项目：

npm create vite@latest

执行此命令后，您将看到以下提示：

√ Project name: ... my-vue-app
√ Select a framework: » Vue
√ Select a variant: » JavaScript

Scaffolding project in C:\path\to\my-vue-app...

Done. Now run:

  cd my-vue-app
  npm install
  npm run dev

在这个交互过程中：

首先，输入项目名称（例如 my-vue-app）
然后，使用方向键选择框架，选择 Vue 并按回车
最后，选择变体，可以选择：
- JavaScript：标准 JavaScript 项目
- TypeScript：带有 TypeScript 支持的项目
- Customize with create-vue：使用更多选项自定义项目
- Nuxt：Vue 的全栈框架

项目结构说明

创建完成后，您的项目目录结构将如下所示：

my-vue-app/
├── public/              # 静态资源目录，不会被Vite处理
│   └── favicon.ico      # 网站图标
├── src/                 # 源代码目录
│   ├── assets/          # 资源文件（会被Vite处理）
│   │   └── logo.png     # Vue logo
│   ├── components/      # Vue组件目录
│   │   └── HelloWorld.vue # 示例组件
│   ├── App.vue          # 根组件
│   ├── main.js          # 应用入口文件
│   └── style.css        # 全局样式
├── index.html           # HTML入口文件
├── package.json         # 项目配置和依赖
├── vite.config.js       # Vite配置文件
└── README.md            # 项目说明文档

关键文件说明

index.html

这是应用的入口HTML文件，位于项目根目录而不是public目录：

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

main.js

应用的JavaScript入口点：

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'

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

App.vue

根组件，定义了应用的主要结构：

<script setup>
import HelloWorld from './components/HelloWorld.vue'
</script>

<template>
  <div>
    <a href="https://vitejs.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="https://vuejs.org/" target="_blank">
      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
    </a>
  </div>
  <HelloWorld msg="Vite + Vue" />
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>

启动开发服务器

安装依赖后，您可以启动开发服务器：

npm run dev

或者使用yarn：

yarn dev

或者使用pnpm：

pnpm dev

执行后，您将看到类似以下的输出：

  VITE v4.4.9  ready in 326 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help

现在，您可以在浏览器中访问 http://localhost:5173/ 查看您的应用。

开发服务器特性

热模块替换 (HMR)：修改代码后，页面会自动更新，无需手动刷新
快速刷新：保留组件状态，只更新修改的部分
错误覆盖：在页面上直接显示错误信息

构建生产版本

当您的应用开发完成，需要部署到生产环境时，运行以下命令：

npm run build

或者使用yarn：

yarn build

或者使用pnpm：

pnpm build

执行后，您将看到类似以下的输出：

vite v4.4.9 building for production...
✓ 33 modules transformed.
../dist/index.html                   0.49 kB │ gzip:  0.31 kB
../dist/assets/index-XxXxXxXx.css    1.42 kB │ gzip:  0.74 kB
../dist/assets/index-XxXxXxXx.js   142.95 kB │ gzip: 51.41 kB

构建完成后，生产文件将输出到 dist 目录。您可以将这个目录部署到任何静态文件服务器上。

本地预览生产构建

要在本地预览生产构建，运行：

npm run preview

或者使用yarn：

yarn preview

或者使用pnpm：

pnpm preview

这将启动一个本地静态Web服务器，将 dist 目录中的文件作为静态资源提供服务。

常见问题解决

端口已被占用

如果启动开发服务器时出现端口被占用的错误：

Error: listen EADDRINUSE: address already in use :::5173

解决方案：

手动指定不同的端口：

npm run dev -- --port 3000

或者在 vite.config.js 中配置：

export default {
  server: {
    port: 3000
  }
}

依赖安装失败

如果在安装依赖时遇到问题：

解决方案：

清除npm缓存：

npm cache clean --force

使用镜像源（中国大陆用户）：

npm config set registry https://registry.npmmirror.com

尝试使用不同的包管理器，如yarn或pnpm

TypeScript相关错误

如果使用TypeScript模板并遇到类型错误：

解决方案：

确保安装了正确的类型定义：

npm install @types/node --save-dev

检查 tsconfig.json 配置是否正确
在VSCode中使用Volar扩展，并启用Take Over Mode

进阶配置

环境变量

Vite提供了内置的环境变量支持。在项目根目录创建以下文件：

.env：所有环境都会加载
.env.development：开发环境加载
.env.production：生产环境加载

环境变量必须以 VITE_ 开头才能在客户端代码中访问：

# .env.development
VITE_API_URL=http://localhost:3000/api

在代码中使用：

console.log(import.meta.env.VITE_API_URL) // http://localhost:3000/api

添加CSS预处理器

要添加SCSS支持，安装相应的预处理器：

npm add -D sass

然后，您可以直接在 .vue 文件中使用：

<style lang="scss">
$color: red;

.text {
  color: $color;
}
</style>

配置别名

在 vite.config.js 中配置路径别名：

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

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  }
})

然后在代码中使用：

import Component from '@/components/Component.vue'

添加Vue Router

安装Vue Router：

npm install vue-router@4

创建路由配置文件 src/router/index.js：

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // 路由懒加载
    component: () => import('../views/About.vue')
  }
]

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')

总结

通过本教程，您已经学会了如何使用Vite创建Vue项目，了解了项目结构，以及如何启动开发服务器和构建生产版本。Vite提供了极速的开发体验和优化的构建过程，是现代Vue应用开发的理想选择。

随着您的项目发展，您可能需要添加更多功能，如状态管理（Pinia/Vuex）、UI组件库（Element Plus/Vuetify）等。Vite的插件系统和灵活的配置使得扩展项目变得简单。

(教程)Vite + Vue 项目创建

(教程)Vite + Vue 项目创建

Vite + Vue 项目创建教程

目录

简介

Vite的优势

前置条件

创建项目

使用NPM

使用Yarn

使用PNPM

交互式创建（推荐）

项目结构说明

关键文件说明

index.html

main.js

App.vue

启动开发服务器

开发服务器特性

构建生产版本

本地预览生产构建

常见问题解决

端口已被占用

依赖安装失败

TypeScript相关错误

进阶配置

环境变量

添加CSS预处理器

配置别名

添加Vue Router

总结

参考资源

推荐阅读更多精彩内容