首页课程创意工坊价格

15 / 15

构建工具Vite | 自在学

构建工具Vite

在前面所有的学习中，我们主要使用CDN方式引入Vue，这种方式适合学习和简单演示，但在实际项目中，我们通常使用构建工具来管理项目。Vite是Vue官方推荐的构建工具，它提供了快速的开发服务器和优化的生产构建。

因此我们有必要学习如何使用Vite来创建和管理Vue项目，了解项目结构、开发服务器、构建配置等。这些知识将帮助你搭建更加现代化的Vue开发环境。

构建工具Vite

什么是Vite

Vite是一个现代化的前端构建工具，由Vue的作者尤雨溪创建。Vite的主要特点包括：

快速的开发服务器启动
即时的模块热更新（HMR）
优化的生产构建
原生ES模块支持
丰富的插件生态

Vite使用原生ES模块，在开发时不需要打包，所以启动速度非常快。在生产构建时，Vite使用Rollup进行打包，生成优化的代码。

创建Vue项目

使用Vite创建Vue项目非常简单。首先，确保你已经安装了Node.js（版本16或更高）。

使用npm创建项目

|
npm create vue@latest my-vue-app

这个命令会启动一个交互式的项目创建向导，你可以选择需要的功能，比如TypeScript支持、Router、Pinia等。

使用yarn创建项目

|
yarn create vue my-vue-app

使用pnpm创建项目

|
pnpm create vue my-vue-app

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

|
cd my-vue-app
npm install

项目结构

使用Vite创建的Vue项目通常具有以下结构：

|
my-vue-app/
├── public/              # 静态资源目录
│   └── favicon.ico
├── src/                 # 源代码目录
│   ├── assets/          # 资源文件（图片、样式等）
│   ├── components/      # 组件目录
│   ├── router/          # 路由配置（如果选择了Router）
│   ├── stores/          # Pinia stores（如果选择了Pinia）
│   ├── App.vue          # 根组件
│   └── main.js          # 应用入口文件
├── index.html           # HTML模板
├── package.json         # 项目配置和依赖
├── vite.config.js       # Vite配置文件
└── README.md            # 项目说明

让我们看看主要的文件：

index.html

index.html是Vue应用的入口HTML文件，负责定义应用的基础结构。它通常包含HTML文档的基本标签（如<!DOCTYPE html>、<html>、<head>和<body>），其中<head>部分设置了字符编码、页面标题、图标和视口等元信息，而<body>中的<div id="app"></div>用于挂载Vue实例。此外，还会通过<script type="module" src="/src/main.js"></script>来加载应用的主入口JavaScript文件，实现前端的逻辑与功能。整个页面结构和资源加载都在该文件中初始化，是项目启动的重要基础。

|
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue App</title

注意，<script>标签的type="module"属性，这表示使用ES模块。

main.js

main.js 是整个 Vue 应用的主入口文件，负责以下几个关键任务：

导入 Vue 框架核心（createApp），用于创建 Vue 应用的实例；
导入全局样式文件（如 ./style.css），确保样式能够在应用各个组件中生效；
加载根组件（通常是 App.vue），该组件作为应用的起点，其他所有页面和组件都是在这里渲染或包含的；
使用 createApp(App) 创建应用实例；
最后，调用 .mount('#app')，将整个 Vue 应用挂载到 index.html 里的 <div id="app"></div> 元素上，这样应用才能在页面中显示并交互。

简而言之，main.js 的作用就是“把 Vue 应用注入到页面”，是所有前端逻辑的起点。

|
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
 
createApp(App).mount('#app')

在这个文件中，我们导入Vue、样式文件和根组件，然后创建应用实例并挂载到DOM。

App.vue

App.vue 是整个 Vue 应用的根组件，也就是所有页面和功能的“总入口”。这个文件采用了单文件组件（SFC, Single File Component）格式，把模板（模板负责页面结构）、脚本（负责逻辑代码）和样式（负责样式设置）三个部分集中管理，方便开发和维护。例如：

<template> 部分决定了组件在页面上渲染出来的 HTML 结构和展示内容；
<script> 或 <script setup> 部分编写 JavaScript 逻辑，比如定义数据、引入子组件、响应用户操作等。这里通常会使用 Vue 3 推荐的 <script setup> 语法，让代码更简洁、类型友好；
<style> 部分用于局部样式设置，可以使用 scoped 属性让样式只作用于当前组件，避免影响全局其他部分。

在 App.vue 中，通常会作为应用的顶层页面框架，也会引入你的第一个子组件（比如 HelloWorld），并包含应用的整体布局和全局样式入口。整个 Vue 应用就是从 App.vue 渲染出来，然后所有其他页面和组件都在这里被引入或切换。简单来说，App.vue 是承载整个 Vue 项目的“外壳”和核心枢纽，采用 SFC 格式将结构、逻辑、样式三合一，极大提升了开发效率和可维护性。

|
<template>
  <div id="app">
    <h1>欢迎使用Vue</h1>
    <HelloWorld />
  </div>
</template>
 
<script setup>
import HelloWorld from './components/HelloWorld.vue'
</script>
 
<style scoped>
#app

开发服务器

启动开发服务器：

|
npm run dev

开发服务器启动后，通常会在http://localhost:5173运行。当你修改代码时，浏览器会自动刷新，显示最新的更改。

Vite的开发服务器支持热模块替换（HMR），这意味着当你修改组件时，只有修改的部分会更新，不会刷新整个页面，这样可以保持应用的状态。

单文件组件（SFC）

单文件组件（Single File Component，简称 SFC）是 Vue 的一个核心特性。它允许你在同一个 .vue 文件中，分别用 <template>、<script> 和 <style> 标签，分别编写组件的结构、逻辑和样式。

<template> 部分负责描述组件的 DOM 结构和渲染内容。
<script> 或 <script setup> 部分用于编写组件的 JavaScript 逻辑，比如数据、事件处理、生命周期等。
<style> 部分用于书写和管理该组件的 CSS 样式，可以通过 scoped 属性让样式只作用于当前组件，避免污染全局。

通过单文件组件，你可以以文件为单位，封装维护每个独立的功能模块，大大提升开发效率和项目可维护性。

|
<template>
  <div class="user-card">
    <h3>{{ user.name }}</h3>
    <p>年龄：{{ user.age }}</p>
    <button @click="handleClick">点击我</button>
  </div>
</template>
 
<script setup>
import

<script setup>是组合式API的语法糖，它自动将顶层变量暴露给模板。<style scoped>表示样式只作用于当前组件。

构建生产版本

构建生产版本：

|
npm run build

这个命令会在dist目录中生成优化的生产构建文件。构建后的文件可以部署到任何静态文件服务器。

预览生产构建：

|
npm run preview

这个命令会启动一个本地服务器来预览构建后的应用。

Vite配置

Vite的各种行为都可以通过根目录下的 vite.config.js 文件进行个性化配置。这个配置文件支持导出一个配置对象或返回对象的函数，常见的配置项包括插件（plugins）、开发服务器（server）、构建输出（build）、别名（resolve.alias）等。例如，我们可以通过修改端口、自动打开浏览器、指定打包输出目录、使用Vue插件等来满足不同开发需求。

|
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
 
export default defineConfig({
  plugins: [vue()],
  server: {
    port: 3000,
    open: true
  },
  build: {
    outDir: 'dist',
    assetsDir: 'assets'
  }
})

使用Vue Router

如果在创建项目时勾选了 Vue Router，项目会自动帮你集成并配置好路由相关的目录结构与文件。通常会在 src/router/index.js（或 .ts）中看到初始的路由配置。路由的作用是根据 URL 地址，在页面间切换并渲染对应的组件，实现单页面应用的导航功能：

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

然后在main.js中使用路由：

|
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
 
createApp(App).use(router).mount('#app')

使用Pinia

如果在创建项目时勾选了 Pinia，那么项目会自动为你集成并配置好状态管理相关的内容。默认情况下，项目目录下会多出一个 src/stores/ 文件夹，里面用于集中管理所有的 Store（存储模块）。

我们以一个计数器 Store 的创建为例：

|
// src/stores/counter.js
import { defineStore } from 'pinia'
 
export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0
  }),
  actions: {
    increment() {
      this.count++
    }
  }
})

然后在main.js中使用Pinia：

|
import { createApp } from 'vue'
import App from './App.vue'
import { createPinia } from 'pinia'
 
const app = createApp(App)
app.use(createPinia())
app.mount('#app')

环境变量

Vite 支持使用环境变量，允许你根据不同的运行环境（如开发、测试、生产）配置不同的参数。你可以在项目根目录下新建 .env 文件，用来定义全局环境变量：

例如，创建 .env 文件并添加如下内容：

|
# .env
VITE_API_URL=https://api.example.com

在代码中使用环境变量：

|
const apiUrl = import.meta.env.VITE_API_URL

注意，只有以VITE_开头的变量才会暴露给客户端代码。

下一步

在这最后一节课中，我们演示了如何使用Vite来创建和管理Vue项目。我们了解了项目结构、单文件组件、开发服务器、构建配置等。 Vite是Vue开发的现代化工具，它提供了快速的开发体验和优化的生产构建。掌握Vite后，你就能快速搭建出专业的Vue开发环境。

至此，你已经具备了使用 Vue 创建自己网站的核心知识。遇到问题时，记得多查阅官方文档。别忘了，多实践才能真正掌握所学内容。