Vue3+Vite教程：新手入门到项目实践-原创手记-慕课网

概述

本文详细介绍了Vue3的核心特性和Vite的优点，帮助读者快速掌握Vue3与Vite的结合使用方法。文章从安装Node.js和Vue CLI开始，逐步指导读者搭建Vue3+Vite项目，并深入讲解了组件开发、路由配置、状态管理和部署优化等关键步骤。通过本教程，读者可以轻松构建高效、高性能的应用。

Vue3与Vite简介

1.1 Vue3核心特性介绍

Vue.js 是一个用于构建用户界面的渐进式框架。Vue 3是Vue的最新版本，引入了许多改进和新特性，以提高性能和开发体验。以下是Vue 3的一些核心特性：

Composition API：Vue 3引入了Composition API，它提供了一种更灵活的方式来组织和重用组件逻辑。Composition API允许开发者将相关的逻辑组合在一起，而不是依赖于Lifecycle Hooks或Options API的限制。
更快速的响应式系统：Vue 3的响应式系统经过了重写，使用了Proxy对象而不是观察者模式，这使得响应式性能得到了巨大的提升。
更好的TypeScript支持：Vue 3在设计之初就考虑到了TypeScript的支持，提供了更好的类型定义和工具支持。
Teleport：Teleport组件允许你将任何DOM元素移动到页面上的任何位置，这对于需要将弹窗组件移出页面正常流的场景非常有用。
Fragments：Vue 3允许在同一个组件中返回多个根元素，这在处理具有多个根元素的UI组件时非常有用。
自定义渲染器：Vue 3可以支持自定义渲染器，这意味着你可以使用Vue的虚拟DOM来为特定平台创建渲染器，例如Web、Node.js或是React Native。

以下是使用Composition API的一个简单示例：

<template>
  <div>
    <h1>{{ greeting }}</h1>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const greeting = ref('Hello, Vue 3!')
</script>

1.2 Vite简介与优势

Vite是一个由Vue官方团队设计的新一代前端构建工具。它与传统的构建工具如Webpack相比，具有以下优势：

基于原生ES模块：Vite直接利用ES模块的特性，允许开发者在开发过程中直接导入模块，而无需等待整个项目构建完成。这提高了开发效率。
热更新：Vite在开发阶段能够实现快速热更新，这意味着更改代码后，浏览器能够立即显示效果，无需等待整个项目重新构建。
零配置启动：Vite提供了零配置启动的能力，开发者可以在最短的时间内开始开发，无需配置复杂的构建工具。
源代码保留：在开发阶段，Vite使用原生的ES模块来提供快速的服务端渲染，而在生产阶段，Vite会使用Rollup或其他工具来构建优化的静态资源。

以下是vite.config.js的简单配置示例：

import { defineConfig } from 'vite'

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

Vue3+Vite项目搭建

2.1 安装Node.js和Vue CLI

安装Node.js

首先，确保你的系统上已经安装了Node.js。你可以访问Node.js官网（https://nodejs.org/）下载并安装最新版本。

# 查看Node.js版本
node -v

安装Vue CLI

Vue CLI是Vue.js的官方命令行工具，可以帮助你快速搭建Vue项目。安装Vue CLI步骤如下：

# 全局安装Vue CLI
npm install -g @vue/cli

2.2 创建Vue3+Vite项目

安装Vite

npm install -g create-vite

创建项目

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

# 创建Vue3+Vite项目
create-vite my-vue3-vite-project

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

cd my-vue3-vite-project
npm install

启动开发服务器

npm run dev

这将会启动Vite的开发服务器，并在浏览器中打开默认页面。

2.3 项目结构解析

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

my-vue3-vite-project/
├── .git/
├── public/
│   ├── index.html
├── src/
│   ├── assets/
│   ├── components/
│   ├── App.vue
│   ├── main.js
├── package.json
└── vite.config.js

重要文件介绍

public/index.html：项目的入口HTML文件。
src/main.js：应用的入口文件，用于初始化Vue应用。
src/App.vue：应用的根组件。
vite.config.js：Vite项目的配置文件，可以在此文件中配置开发服务器、预构建、构建输出等。

以下是vite.config.js的完整示例：

import { defineConfig } from 'vite'

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

基本组件开发

3.1 创建第一个Vue组件

创建组件文件

在src/components目录下创建一个新的Vue组件文件HelloWorld.vue：

<template>
  <div>
    <h1>Hello, Vue 3!</h1>
  </div>
</template>

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

<style scoped>
h1 {
  color: #4A90E2;
}
</style>

在主组件中使用新组件

在src/App.vue中引入并使用新组件：

<template>
  <div id="app">
    <HelloWorld />
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";

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

3.2 组件属性与插槽

组件属性

在Vue中，可以通过props定义组件属性。以下是一个使用props的例子：

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    message: {
      type: String,
      required: true,
    },
  },
};
</script>

在App.vue中使用这个组件时，可以传递一个属性值：

<HelloWorld message="Hello from App.vue" />

使用插槽

插槽允许你在组件中定义占位符，并在使用组件时填充内容。以下是一个插槽的例子：

<template>
  <div>
    <h1>Default slot</h1>
    <slot></slot>
  </div>
</template>

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

在App.vue中使用这个组件时，可以自定义内容：

<HelloWorld>
  <p>This is the content inside the slot.</p>
</HelloWorld>

3.3 使用Vite的开发服务器

Vite的开发服务器允许你快速开发和热更新。在项目根目录下运行：

npm run dev

这将启动开发服务器，并在浏览器中打开默认页面。每次你保存更改时，浏览器会自动刷新并显示最新的更改。

路由与状态管理

4.1 配置Vue Router实现多页面应用

安装Vue Router

npm install vue-router@next

创建路由配置

在src目录下创建一个router目录，然后在该目录下创建一个index.js文件：

import { createRouter, createWebHistory } from "vue-router";
import Home from "../views/Home.vue";
import About from "../views/About.vue";

const routes = [
  {
    path: "/",
    name: "Home",
    component: Home,
  },
  {
    path: "/about",
    name: "About",
    component: About,
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

创建视图组件

在src/views目录下创建Home.vue和About.vue组件：

<!-- src/views/Home.vue -->
<template>
  <div>
    <h1>Home</h1>
  </div>
</template>

<script>
export default {
  name: "Home",
};
</script>

<!-- src/views/About.vue -->
<template>
  <div>
    <h1>About</h1>
  </div>
</template>

<script>
export default {
  name: "About",
};
</script>

在主组件中使用路由

在src/main.js中引入并使用路由：

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";

createApp(App).use(router).mount("#app");

4.2 使用Pinia管理应用状态

安装Pinia

npm install pinia

创建一个Store

在src目录下创建一个store目录，然后在该目录下创建一个index.js文件：

import { createPinia } from "pinia";

const useExampleStore = defineStore("example", {
  state: () => ({
    count: 0,
  }),
  actions: {
    increment() {
      this.count++;
    },
  },
});

export default useExampleStore;

在组件中使用Store

在任何组件中使用Pinia Store：

<template>
  <div>
    <h1>Count: {{ count }}</h1>
    <button @click="increment">Increment</button>
  </div>
</template>

<script setup>
import { useExampleStore } from "../store";

const store = useExampleStore();

const count = store.count;
const increment = store.increment;
</script>

部署与优化

5.1 构建与部署Vue3+Vite应用

构建应用

在项目根目录下，运行以下命令来构建应用：

npm run build

构建完成后，你会在dist目录下看到生成的静态文件。

部署到静态文件服务器

将dist目录下的文件部署到静态文件服务器。你可以使用任何静态文件服务器，例如Nginx、Apache或直接部署到GitHub Pages。

以下是package.json中的构建脚本示例：

{
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  }
}

5.2 性能优化技巧

使用Tree Shaking

Vue 3的Composition API允许开发者编写更模块化的代码，这有助于Tree Shaking自动移除未使用代码，从而减小打包文件的大小。

代码分割

使用import()语法进行动态导入，可以在运行时按需加载模块，从而提高应用的加载速度。例如：

import('./components/SomeComponent').then((module) => {
  module.SomeComponent;
});

图片优化

使用vite-plugin-compression插件对图片进行压缩，减小图片大小，提高加载速度。

使用CDN

使用CDN来加载框架和库文件，减少服务器压力和加载时间。

优化CSS和JavaScript

使用PostCSS和Terser压缩CSS和JavaScript代码，减小文件体积。

实践案例：构建个人博客

6.1 设计博客架构

博客架构通常包括以下主要部分：

主页：展示最新的文章列表。
文章详情页：展示文章的详细内容。
分类和标签：分类和标签导航，方便用户浏览。
后台管理：文章管理、分类管理等。

6.2 实现文章列表与详情页

文章列表页

<template>
  <div>
    <h1>文章列表</h1>
    <ul>
      <li v-for="article in articles" :key="article.id">
        <router-link :to="`/article/${article.id}`">
          {{ article.title }}
        </router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      articles: [
        { id: 1, title: "Vue 3入门" },
        { id: 2, title: "Vite入门" },
        { id: 3, title: "Vue 3与Vite实践" },
      ],
    };
  },
};
</script>

文章详情页

<template>
  <div>
    <h1>{{ article.title }}</h1>
    <p>{{ article.content }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      article: {
        id: this.$route.params.id,
        title: "Vue 3入门",
        content: "这是Vue 3入门的文章内容。",
      },
    };
  },
};
</script>

6.3 使用Vite进行开发与部署

开发环境

在开发环境下，使用Vite的开发服务器进行快速开发和热更新：

npm run dev

构建与部署

在生产环境下，使用以下命令进行构建和部署：

npm run build

将构建好的文件部署到静态文件服务器，如Nginx或GitHub Pages。