异常教程

npm create vite@latest（建议收藏）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

  • 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
  • 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

在现代前端开发领域，快速搭建项目框架是开发者高效工作的关键一步。随着技术生态的快速发展，Vite 以其闪电般的冷启动速度和开箱即用的特性，迅速成为开发者社区的热门选择。本文将围绕 npm create vite@latest 命令展开，通过循序渐进的方式，帮助编程初学者和中级开发者理解如何通过这一工具快速创建项目，并掌握其核心配置与优化技巧。

一、从零开始：什么是 Vite？

Vite 是由 Evan You（Vue.js 的作者）开发的下一代前端构建工具，它的核心设计理念是“无需构建即可开发”。传统构建工具（如 Webpack 或 Parcel）在开发阶段需要先将代码编译为浏览器可识别的格式，这一过程通常需要数秒甚至更长时间，导致开发体验滞后。

而 Vite 通过 ES Module 原生支持和按需编译技术，实现了毫秒级的冷启动和即时热更新。想象一下，你开车时需要先检查油量、轮胎、发动机状态才能出发，而 Vite 直接给你一辆已经预热的赛车——这就是 Vite 带来的开发体验提升。

二、快速上手：使用 npm create vite@latest 创建项目

1. 命令解析

npm create vite@latest 是基于 npm v9+ 新增的 npm create 命令的快捷方式，用于快速生成 Vite 项目模板。其完整语法为：

npm create vite@latest [project-name]

其中 [project-name] 是项目的名称，若省略则会提示输入。

2. 安装步骤

步骤 1：安装 Node.js 环境
确保已安装 Node.js（建议 LTS 版本）。若未安装，可通过官网（nodejs.org ）下载。

步骤 2：执行创建命令
在终端输入以下指令：

npm create vite@latest my-vite-project

系统会提示选择项目模板（如 Vue、React、Svelte 等），并指定包管理工具（npm 或 pnpm）。

步骤 3：进入项目目录并启动开发服务器

cd my-vite-project  
npm install  
npm run dev

此时浏览器会自动打开 http://localhost:3000，显示默认的 Vite 欢迎页面。

三、项目结构解析

创建完成后，项目目录结构如下：

my-vite-project/  
├── node_modules/          # 第三方依赖包  
├── public/                # 静态资源（会被直接复制到输出目录）  
├── src/                   # 源代码目录  
│   ├── assets/            # 图片、字体等资源  
│   ├── components/        # 可复用的组件（如 Vue 的 .vue 文件）  
│   ├── App.{js|vue|tsx}   # 入口组件  
│   └── main.{js|ts}       # 主启动文件  
├── index.html             # HTML 模板  
├── package.json           # 项目依赖与脚本配置  
├── vite.config.js         # Vite 配置文件（可选）  
└── README.md              # 项目说明文件

1. 关键文件说明

  • vite.config.js：用于自定义构建配置（如插件、别名、环境变量等）。
  • index.html：HTML 入口文件，通过 <script type="module" src="/src/main.js"></script> 引入主文件。
  • package.json：包含项目依赖和脚本，如： 
    {  
  "scripts": {  
    "dev": "vite",  
    "build": "vite build",  
    "preview": "vite preview"  
  }  
}

四、Vite 核心配置与优化

1. 配置别名（Aliases）

通过 resolve.alias 可简化路径引用。例如，在 vite.config.js 中添加：

import { defineConfig } from 'vite';  
export default defineConfig({  
  resolve: {  
    alias: {  
      '@': '/src',          // 将 @ 指向 src 目录  
      'components': '/src/components'  
    }  
  }  
});

之后可在代码中直接使用 import MyComponent from '@/components/MyComponent.vue'。

2. 插件系统

Vite 的插件机制允许扩展功能。例如，安装并使用 vite-plugin-purgecss 去除未使用的 CSS：

npm install vite-plugin-purgecss --save-dev

在 vite.config.js 中配置：

import purgecss from 'vite-plugin-purgecss';  
export default defineConfig({  
  plugins: [purgecss()]  
});

3. 开发与生产环境分离

通过 define 宏替换环境变量：

export default defineConfig({  
  define: {  
    __IS_DEV__: JSON.stringify(process.env.NODE_ENV === 'development')  
  }  
});

在代码中即可使用 if (__IS_DEV__) console.log('开发环境');。

五、常见问题与解决方案

1. 端口被占用

运行 npm run dev 时若提示端口冲突，可通过以下方式解决：

  • 修改 vite.config.js 指定端口： 
    export default defineConfig({  
  server: {  
    port: 3001  
  }  
});
  • 直接在命令行指定： 
    npm run dev -- --port 3001

2. 资源路径问题

在 public 目录中的静态文件可通过绝对路径引用，例如：

<img src="/logo.png" alt="Logo"> <!-- 直接访问 public/logo.png -->

3. 构建后性能优化

  • 代码分割：Vite 默认使用 ES Modules 的动态导入特性实现代码分割。
  • 压缩资源：通过 build.minify 配置启用 Terser 或 Esbuild 压缩： 
    export default defineConfig({  
  build: {  
    minify: 'esbuild' // 或 'terser'  
  }  
});

六、实战案例：创建一个 React 项目

1. 生成 React 模板

执行命令时选择 React：

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

2. 添加路由功能

安装 React Router：

npm install react-router-dom

在 src 目录下创建 router.js：

import { createBrowserRouter, RouterProvider } from 'react-router-dom';  
import App from './App';  
import Home from './pages/Home';  
import About from './pages/About';  

const router = createBrowserRouter([  
  { path: '/', element: <Home /> },  
  { path: '/about', element: <About /> }  
]);  

export default function Router() {  
  return <RouterProvider router={router} />;  
}

在 src/main.jsx 中引入路由：

import React from 'react';  
import ReactDOM from 'react-dom/client';  
import Router from './router';  

ReactDOM.createRoot(document.getElementById('root')).render(  
  <React.StrictMode>  
    <Router />  
  </React.StrictMode>  
);

3. 运行与构建

npm run dev    # 开发模式  
npm run build  # 生产构建

七、进阶技巧：与 TypeScript 结合

1. 快速启用 TypeScript

在创建项目时选择 vanilla-ts 或 vue-ts 模板：

npm create vite@latest my-ts-app -- --template vanilla-ts

Vite 会自动配置 tsconfig.json，并支持类型检查。

2. 自定义类型声明

在 src 目录下创建 types.d.ts 文件：

declare module '*.svg' {  
  const content: string;  
  export default content;  
}

即可在代码中直接导入 SVG 文件：

import Logo from './logo.svg';  
console.log(Logo); // 输出 SVG 字符串

八、Vite 与传统构建工具对比

特性ViteWebpack/Parcel
开发模式加载速度毫秒级（基于原生 ES Modules）秒级（需要先编译所有代码）
构建配置复杂度极简（开箱即用）中高（需手动配置 loader 等）
插件生态快速增长（兼容 Rollup 插件）成熟但部分功能需定制
生产构建性能高效（基于 Rollup）取决于配置

九、结论

通过本文的讲解，开发者可以掌握 npm create vite@latest 的核心用法，并理解其背后的技术原理。无论是快速搭建个人项目，还是企业级应用，Vite 都能提供高效、灵活的开发体验。未来，随着 Vite 生态的进一步成熟，它在前端工具链中的地位将愈发重要。

建议读者通过实际项目实践本文中的配置技巧，并探索 Vite 官方文档中的高级功能（如自定义服务器、SSR 支持等）。记住，技术的学习需要“用中学”，每一次实践都将加深对工具的理解！

最新发布

查看更多文章