首页手记 Vite教程：新手入门到实践应用

Vite教程：新手入门到实践应用

标签：

前端工具 Vue.js

概述

Vite 是由 Vue.js 作者尤雨桐开发的一款新型前端构建工具，基于 ES 模块，实现了极快的冷启动速度和高效的开发体验。本文将详细介绍 Vite 的安装、配置以及与现代前端技术栈的集成方法，并分享一些实战案例，帮助读者更好地理解和应用 Vite。

Vite 简介与安装

Vite 是一款由 Vue.js 作者尤雨桐开发的新型前端构建工具。它基于 ES 模块，利用了现代浏览器的原生模块解析能力，从而实现了极快的冷启动速度。与传统的构建工具（如 Webpack）相比，Vite 在开发环境下的构建速度更快，因为它不需要全量编译整个项目，而是直接解析模块，只编译相关的代码。这极大地提升了开发效率。

什么是 Vite

Vite 是一个基于原生 ES 模块的构建工具，它利用了现代浏览器对 ES 模块的支持，实现了快速的冷启动。Vite 在开发模式下不需要全量编译代码，而是通过动态加载模块，只编译和重新加载修改的部分代码。这极大地提升了开发效率和体验。在生产环境中，Vite 会进行全量编译和优化，以确保最佳的性能。

安装 Vite 的准备工作

在安装 Vite 之前，你需要确保系统中安装了 Node.js 和 npm。你可以通过以下命令来检查是否已经安装了 Node.js：

node -v
npm -v

如果未安装，可以通过以下步骤安装 Node.js：

访问 Node.js 的官方网站 https://nodejs.org/。
根据操作系统选择合适的安装包，下载并安装。
安装完成后，重新运行上述命令检查安装是否成功。

Vite 的快速安装与配置

安装 Vite

你可以使用 npm 或 yarn 来全局安装 Vite。以下是使用 npm 安装 Vite 的方法：

npm install -g create-vite

创建新项目

使用 Vite 创建一个新项目可以通过以下命令来完成：

create-vite my-vite-app

进入项目并安装依赖

进入刚刚创建的项目目录，并安装项目依赖：

cd my-vite-app
npm install

配置文件介绍

Vite 的配置文件通常是 vite.config.js，在这个文件中，你可以配置 Vite 的各种选项。以下是一个简单的 vite.config.js 文件示例：

import { defineConfig } from 'vite';

export default defineConfig({
  // 配置服务器端口
  server: {
    port: 3000,
  },
  // 配置构建输出目录
  build: {
    outDir: 'dist',
  },
});

创建你的第一个 Vite 项目

在本节中，我们将创建一个简单的 Vite 项目，并对其进行解析和调试。

初始化 Vite 项目

首先，使用 Vite 命令创建一个新的项目：

create-vite my-vite-app
cd my-vite-app
npm install

这会创建一个新的 Vite 项目，并安装必要的依赖。

项目结构解析

一个典型的 Vite 项目结构如下：

my-vite-app/
├── public/
│   └── index.html
├── src/
│   ├── assets/
│   │   └── logo.svg
│   ├── components/
│   │   └── HelloWorld.vue
│   ├── App.vue
│   └── main.js
├── vite.config.js
└── package.json

关键文件说明

public/index.html：项目的入口 HTML 文件。
src/App.vue：项目的主组件。
src/main.js：项目的入口 JavaScript 文件。
src/assets/logo.svg：项目中的静态资源。
src/components/HelloWorld.vue：一个示例组件。
vite.config.js：Vite 的配置文件。
package.json：项目的配置文件，包含了项目元数据和脚本命令。

`src/App.vue`

<template>
  <div>
    <h1>欢迎使用 Vite</h1>
  </div>
</template>

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

<style scoped>
/* 样式代码 */
</style>

`src/main.js`

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

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

运行与调试项目

要启动项目，你可以运行以下命令：

npm run dev

这将启动 Vite 服务器，并在浏览器中打开默认的开发服务器页面（通常是 http://localhost:3000）。此外，你还可以使用以下命令来调试项目：

npm run build
npm run preview

这将构建项目并在本地服务器上预览构建后的版本。

Vite 中的文件加载与优化

在本节中，我们将探讨 Vite 如何处理模块化和 ES 模块支持，以及如何实现构建优化和缓存机制。

模块化与 ES 模块支持

Vite 是基于 ES 模块的构建工具，这意味着你可以在项目中直接使用 import 和 export 语法。例如，在 src/main.js 中，你可以这样引入其他模块：

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

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

同时，你可以在组件中使用 export default 来导出组件：

<template>
  <div>
    <h1>Hello, Vite!</h1>
  </div>
</template>

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

<style scoped>
/* 样式代码 */
</style>

构建优化与缓存机制

Vite 使用了缓存机制来提高构建速度。在开发模式下，Vite 会缓存编译的结果，因此在修改代码时，只需重新编译修改的部分。生产模式下，Vite 会进行全量编译和优化，以确保最佳性能。

例如，在 vite.config.js 中，你可以配置缓存选项：

export default defineConfig({
  cacheDir: './node_modules/.vite',
});

此外，Vite 还支持按需加载模块，这对于优化前端性能非常重要。例如，你可以使用动态导入：

import('./my-module').then(({ default: MyModule }) => {
  // 使用 MyModule
});

静态资源处理

Vite 可以自动处理项目中的静态资源。例如，你可以在 public/ 目录下放置一些静态资源文件，如 favicon.ico 或 logo.png，Vite 会自动将这些文件拷贝到输出目录。

你也可以在模块中导入静态资源，例如：

import logo from './assets/logo.svg';

console.log(logo);

Vite 的配置选项详解

在本节中，我们将详细介绍 Vite 配置文件 vite.config.js 中的各种配置选项。

配置文件介绍（如 vite.config.js）

vite.config.js 是 Vite 的配置文件，你可以在此文件中配置各种选项。以下是一个简单的 vite.config.js 文件示例：

import { defineConfig } from 'vite';

export default defineConfig({
  server: {
    port: 3000,
  },
  build: {
    outDir: 'dist',
  },
});

服务器配置

在 server 部分，你可以配置开发服务器的端口、代理和静态文件处理等选项。例如：

server: {
  port: 3000,
  host: '0.0.0.0',
  proxy: {
    '/api': 'http://localhost:3001',
  },
}

构建配置

在 build 部分，你可以配置输出目录、压缩、代码分割等选项。例如：

build: {
  outDir: 'dist',
  assetsDir: 'static',
  minify: true,
  rollupOptions: {
    output: {
      chunkFileNames: 'static/js/[name]-[hash].js',
      entryFileNames: 'static/js/[name]-[hash].js',
    },
  },
}

常用配置选项解析

服务器端口配置

server: {
  port: 3000,
}

这将设置开发服务器的端口为 3000。

输出目录配置

build: {
  outDir: 'dist',
}

这将设置构建输出的目录为 dist。

模块解析配置

resolve: {
  alias: {
    '@': '/src',
  },
}

这将为 @ 设置别名，以简化模块路径。

资源处理配置

publicDir: 'public',
assetsDir: 'static',

这将设置静态资源目录为 public，输出的静态文件目录为 static。

自定义服务器设置

你还可以在 Vite 中自定义服务器设置，例如，通过 server.middlewares 选项添加自定义中间件：

server: {
  middlewares: () => [
    require('compression')(),
  ],
}

这将使用 Compression 中间件来压缩服务器的响应。

Vite 与现代前端技术栈的集成

在本节中，我们将探讨如何将 Vite 与其他现代前端技术栈集成，包括 TypeScript、Vue 和 React。

TypeScript 集成

要将 TypeScript 与 Vite 集成，你需要在项目中安装 typescript 和 vite-plugin-vue（如果使用 Vue）：

npm install --save-dev typescript vite-plugin-vue

然后，你需要在 vite.config.js 中添加 TypeScript 插件配置：

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

export default defineConfig({
  plugins: [vue(), tsconfigPaths()],
  build: {
    lib: {
      entry: 'src/index.ts',
      name: 'MyLibrary',
      fileName: 'my-library',
    },
    rollupOptions: {
      external: ['vue'],
      output: {
        globals: {
          vue: 'Vue',
        },
      },
    },
  },
});

TypeScript 项目结构

在 tsconfig.json 中，你需要配置 TypeScript 以识别项目文件结构：

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "Node",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts"],
  "exclude": ["node_modules"]
}

Vue 与 React 集成

Vue 集成

要将 Vite 与 Vue 集成，你需要安装 Vue 相关依赖：

npm install vue vue-template-compiler

然后，你可以在 vite.config.js 中配置 Vue 插件：

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

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

React 集成

要将 Vite 与 React 集成，你需要安装 React 相关依赖：

npm install react react-dom @types/react @types/react-dom

然后，你可以在 vite.config.js 中配置 React 插件：

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

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

扩展插件使用

Vite 支持许多扩展插件，以满足不同的需求。例如，你可以使用 vite-plugin-sass 插件来处理 Sass 文件：

npm install vite-plugin-sass

然后，在 vite.config.js 中配置插件：

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

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

Vite 项目部署与实战案例

在本节中，我们将讨论如何部署 Vite 项目，并分享一些实战案例。

项目打包与部署流程

打包项目

在 package.json 中配置打包命令：

{
  "scripts": {
    "build": "vite build"
  }
}

运行打包命令：

npm run build

部署到 GitHub Pages 或 Netlify

部署到 GitHub Pages

确保打包目录正确。
将打包后的文件推送到 GitHub 仓库的 gh-pages 分支。
设置 GitHub Pages 以使用 gh-pages 分支。

部署到 Netlify

创建 Netlify 账号并创建新站点。
连接到 GitHub/GitLab 仓库。
选择 dist 作为部署根目录。

实战案例分享与讨论

案例 1：博客系统

项目结构

my-blog/
├── public/
│   └── index.html
├── src/
│   ├── assets/
│   │   └── logo.svg
│   ├── components/
│   │   └── PostList.vue
│   ├── App.vue
│   └── main.js
├── vite.config.js
└── package.json

主要文件代码

src/App.vue

<template>
  <div>
    <PostList />
  </div>
</template>

<script>
import PostList from './components/PostList.vue';

export default {
  components: {
    PostList,
  },
};
</script>

src/components/PostList.vue

<template>
  <div>
    <h1>Posts</h1>
    <ul>
      <li v-for="post in posts" :key="post.id">
        {{ post.title }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      posts: [
        { id: 1, title: 'Post 1' },
        { id: 2, title: 'Post 2' },
      ],
    };
  },
};
</script>

案例 2：个人网站

项目结构

my-personal-site/
├── public/
│   └── index.html
├── src/
│   ├── assets/
│   │   └── logo.svg
│   ├── components/
│   │   └── About.vue
│   ├── App.vue
│   └── main.js
├── vite.config.js
└── package.json

主要文件代码

src/App.vue

<template>
  <div>
    <router-view />
  </div>
</template>

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

createApp(App).use(router).mount('#app');
</script>

src/components/About.vue

<template>
  <div>
    <h1>About Me</h1>
    <p>Hi, I'm John Doe!</p>
  </div>
</template>

案例 3：电商网站

项目结构

my-ecommerce-site/
├── public/
│   └── index.html
├── src/
│   ├── assets/
│   │   └── logo.svg
│   ├── components/
│   │   └── ProductList.vue
│   ├── App.vue
│   └── main.js
├── vite.config.js
└── package.json

主要文件代码

src/App.vue

<template>
  <div>
    <ProductList />
  </div>
</template>

<script>
import ProductList from './components/ProductList.vue';

export default {
  components: {
    ProductList,
  },
};
</script>

src/components/ProductList.vue

<template>
  <div>
    <h1>Products</h1>
    <ul>
      <li v-for="product in products" :key="product.id">
        {{ product.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      products: [
        { id: 1, name: 'Product 1' },
        { id: 2, name: 'Product 2' },
      ],
    };
  },
};
</script>

通过以上案例，你可以看到 Vite 在处理不同类型的应用时的强大灵活性。无论是简单的博客系统还是复杂的电商网站，Vite 都能提供高效的开发和部署体验。

点击查看更多内容

为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

MMTTMM

手记
篇

粉丝

65

获赞与收藏

364

关注作者，订阅最新文章

阅读免费教程

后端通用面试教程

41个小节 30583 343

网络编程入门教程

20个小节 12561 237

Pandas 入门教程

25个小节 18492 337

推荐

评论

收藏

共同学习，写下你的评论



感谢您的支持，我会继续努力的～

扫码打赏，你说多少就多少

赞赏金额会直接到老师账户

支付方式

打开微信扫一扫，即可进行扫码打赏哦

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

恭喜你，你的运气太好了，居然抽中了 100个积分！

恭喜你，抽中了价值元的专栏！

太棒了，直接落到你账户里！

积分商城里的罗技鼠标、机械键盘、
Kindle 阅读器、小米平衡车
Apple iPad （10.2英寸）、大额优惠券
在等着你去兑换了噢

作者：

免费赠送

兑换码：1111222211 复制

优惠券可用于购买实战课、体系课
无门槛使用

先去看看，有什么好东西马上兑换我爱学习，选课去


热搜

最近搜索清空

Vite教程：新手入门到实践应用

安装 Vite

创建新项目

进入项目并安装依赖

配置文件介绍

关键文件说明

src/App.vue

src/main.js

服务器配置

构建配置

服务器端口配置

输出目录配置

模块解析配置

资源处理配置

TypeScript 项目结构

Vue 集成

React 集成

打包项目

部署到 GitHub Pages 或 Netlify

部署到 GitHub Pages

部署到 Netlify

案例 1：博客系统

项目结构

主要文件代码

案例 2：个人网站

项目结构

主要文件代码

案例 3：电商网站

项目结构

主要文件代码

阅读免费教程

`src/App.vue`

`src/main.js`