Vite入门：新手必读的简单教程

本文介绍了Vite入门的基础知识，涵盖了Vite的安装、项目创建和基本配置。详细讲解了Vite的文件加载与优化方法，以及静态资源处理和高级特性。通过学习，读者可以快速掌握Vite入门所需的技能。

1.1 什么是Vite

Vite 是一个新的前端构建工具，由 Vue.js 的作者尤雨溪开发。与传统的构建工具（如 Webpack）相比，Vite 具有更快的启动速度和更为有效的模块化处理方式。Vite 基于 ES module，使用了原生的 ES module 解析来替代传统的打包方式，这使得开发过程中的模块加载速度大幅提升。

1.2 安装Vite

安装 Vite 有两种主要方式：全局安装以及使用 npm 安装。全局安装可以让你在任何项目中使用 Vite，而使用 npm 安装则是在单个项目中安装 Vite。

1. 全局安装

   使用 npm 或 yarn 安装 Vite：

   npm install -g create-vite

   或者使用 yarn：

   yarn global add create-vite

2. 使用 npm 安装

   在你的项目中安装 Vite：

   npm install vite --save-dev

1.3 创建第一个Vite项目

创建一个简单的 Vite 项目可以通过 create-vite CLI 来实现。以下是创建项目的步骤：

1. 创建项目

   使用 create-vite 命令来创建一个新的 Vite 项目：

   create-vite my-vite-app

   这将创建一个新的文件夹 my-vite-app 并在其中初始化一个 Vite 项目。

2. 初始化项目

   进入项目目录并安装依赖：

   cd my-vite-app
   npm install

3. 启动开发服务器

   使用 Vite 启动开发服务器：

   npm run dev

   这将启动开发服务器，并在浏览器中自动打开或等待你输入 URL 来访问。

2.1 项目文件夹结构介绍

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

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

• public/：存放静态资源，如 index.html。
• src/：存放源代码。
• src/assets/：存放静态资源，如图片和字体。
• src/components/：存放 Vue 组件。
• src/App.vue：根组件。
• src/main.js：项目的入口文件。
• vite.config.js：Vite 的配置文件。
• package.json：项目配置文件。
• .gitignore：Git 配置文件，定义哪些文件和目录不需要提交到版本控制系统。

2.2 main.js和App.vue讲解

main.js 是项目的入口文件，负责初始化和挂载根组件。

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

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

这段代码首先导入 Vue 的 createApp 函数，然后导入 App.vue 组件。最后，它将 App.vue 挂载到 #app 元素上。

App.vue 是根组件，通常用于定义整个应用的结构。

<template>
  <div id="app">
    <h1>Hello Vite!</h1>
    <HelloWorld msg="Welcome to your Vue.js + Vite project"/>
  </div>
</template>

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

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

<style>
/* 根组件的样式 */
</style>

在这个例子中，App.vue 引入了一个名为 HelloWorld 的组件，并使用了它。

下面是 HelloWorld.vue 组件的完整代码示例，展示了如何在项目中使用组件：

<template>
  <div class="hello-world">
    <h2>{{ msg }}</h2>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

<style scoped>
.hello-world {
  font-size: 1.5em;
  color: #42b983;
}
</style>

3.1 使用Vite启动开发服务器

启动开发服务器非常简单，只需要运行以下命令：

npm run dev

这将启动一个开发服务器，并在浏览器中自动打开。默认情况下，Vite 会监听 localhost:3000 端口。

3.2 基本配置文件详解

Vite 的配置文件是 vite.config.js。这个文件允许你自定义 Vite 的行为，如设置开发服务器端口、修改环境变量等。

下面是一个简单的 vite.config.js 文件示例：

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

export default defineConfig({
  plugins: [vue()],
  server: {
    port: 5000 // 设置开发服务器端口
  },
  base: './' // 设置构建文件的公共基础路径
})

在这个例子中，plugins 数组用于注册插件，server 对象用于配置开发服务器，base 用于设置构建文件的基础路径。

4.1 如何使用模块

Vite 使用原生 ES module 语法来加载模块，这意味着你可以在任何地方直接使用 ES module 语法。

例如，你可以在 main.js 中这样导入模块：

import App from './App.vue'
import './assets/styles/global.css'

也可以在 App.vue 中这样导入组件：

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

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

4.2 如何优化文件加载

Vite 提供了多种优化文件加载的方法，例如：

• 按需加载

  使用动态导入（import()）来实现按需加载：

  const HelloWorld = await import('./components/HelloWorld.vue')

• 分割代码

  Vite 自动分割代码，因此不需要手动分割代码。你只需要正常使用模块，Vite 会自动处理。

• 缓存

  Vite 使用缓存来加速文件加载，这在开发环境中非常有用。

按需加载示例

下面是一个具体的按需加载示例，展示了如何在 main.js 中使用动态导入：

async function loadComponent() {
  const Component = await import('./components/Component.vue')
  return Component.default
}

const App = await loadComponent()
createApp(App).mount('#app')

这个示例中，loadComponent 函数用于动态加载组件，提高了应用的加载速度和性能。

5.1 处理CSS和图片资源

Vite 对静态资源的处理非常简单。你可以在组件中直接导入 CSS 文件和图片：

<template>
  <div>
    <h1>Hello Vite!</h1>
    <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./assets/logo.png" alt="Logo">
  </div>
</template>

<script>
import './assets/styles/style.css'
</script>

在这个例子中，logo.png 图片和 style.css 文件都被正确导入并使用。

5.2 使用PostCSS和Sass

Vite 支持 PostCSS 和 Sass 等预处理器。要使用这些工具，你需要安装相关的依赖，并在 vite.config.js 中配置它们。

例如，使用 PostCSS 和 Sass：

1. 安装依赖

   npm install postcss postcss-cli postcss-load-config sass --save-dev

2. 配置 PostCSS 和 Sass

   在 vite.config.js 中添加配置：

   import { defineConfig } from 'vite'
   import vue from '@vitejs/plugin-vue'
   
   export default defineConfig({
    plugins: [vue()],
    css: {
      postcss: {
        plugins: {
          'postcss-load-config': {}
        }
      }
    },
    resolve: {
      alias: {
        '~': path.resolve(__dirname, 'src')
      }
    }
   })

3. 使用 Sass 和 PostCSS

   现在你可以在项目中直接使用 Sass 语法和 PostCSS 插件：

   <template>
    <div>
      <h1>Hello Vite!</h1>
      <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./assets/logo.png" alt="Logo">
    </div>
   </template>
   
   <script>
   import './assets/styles/style.scss'
   </script>

   在 style.scss 中使用 Sass 语法：

   @import 'variables';
   
   h1 {
    color: $primary-color;
   }

6.1 HMR（Hot Module Replacement）介绍

HMR（Hot Module Replacement）是 Vite 的一个强大特性，它允许你在开发过程中实时更新模块而不需要刷新整个页面。

Vite 通过原生的 ES module 实现了 HMR，这意味着你在开发过程中可以实时看到代码的变化。

例如，假设你在 App.vue 中修改了一些样式，你只需要保存文件，HMR 就会自动更新样式，而不会刷新整个页面。

6.2 打包与部署

打包和部署是项目上线前需要完成的重要步骤。Vite 提供了简单的命令来打包项目：

1. 打包项目

   使用以下命令打包项目：

   npm run build

   这会生成一个 dist 文件夹，里面包含了所有需要的静态文件。

2. 部署

   你可以将生成的 dist 文件夹的内容部署到任何静态文件服务器上，如 Nginx、Apache 或是云服务商提供的静态文件存储服务。

例如，以下是一个简单的部署步骤：

1. 上传静态文件

   将 dist 文件夹的内容上传到服务器上的一个适当的位置。

2. 配置服务器

   配置服务器以提供这些静态文件。例如，在 Nginx 中，你可以这样配置：

   server {
    listen 80;
    server_name example.com;
   
    root /path/to/dist;
    index index.html;
   
    location / {
      try_files $uri $uri/ /index.html;
    }
   }

总结，通过上面的学习，你应该已经掌握了 Vite 的基本使用方法，从安装到配置，再到文件加载和优化，以及打包部署。Vite 的这些特性使其成为现代前端开发的理想选择。如果你希望进一步了解 Vite 的高级功能，可以参考 Vite 的官方文档。