前端面试题宝典

【小白必看】保姆级教你搭vite+Vue项目

简介：收藏了
可前往公众号查看原文：前端面试，关注公众号，查看最新面经和技术文章哦~

哈喽，大家好，我是Fine。

今天推荐的这篇文章以小白视角讲解搭建vite+Vue（react）项目。先对比Vue-CLI和Vite，介绍各自特点及选择建议。接着详细说明搭建Vite+Vue 3项目的步骤，包括环境准备、创建项目、安装依赖、启动服务器。有兴趣的同学可以看看。

以下是正文：

本文以小白为写作视角。主要通过搭建vite+vue3 项目，讲解项目目录，以及使用一个简单实例区分组件Hook与HTML开发。当然在文末react项目搭建也是一样操作。

事不宜迟，开始搭建你的第一个vite+Vue项目吧

引言：Vue-CLI 与 Vite 的选择

选哪个进行开发？

Vue-CLI 和 Vite 都是构建基于 Vue 项目时的流行选项，但它们各有特点，适用于不同的场景和需求。下面引用AI 回答

Vue-CLI：传统而全面的脚手架工具

Vue-CLI 是官方提供的脚手架工具，旨在帮助开发者快速创建新的 Vue 项目。它拥有以下优势：

  • 丰富的插件和预设配置：Vue-CLI 提供了大量插件和预设配置，能够满足从小型应用到复杂企业级项目的各种需求。
  • 灵活的配置选项：对于较为复杂的大项目，Vue-CLI 允许开发者根据具体需求进行深度定制，提供了高度的灵活性。
  • 成熟的生态系统：由于 Vue-CLI 已经存在多年，围绕它的社区非常活跃，有丰富的文档、教程和支持资源。

然而，随着前端技术的不断进步，Vue-CLI 的某些方面显得有些过时，特别是在启动时间和热更新效率上。

Vite：新时代的高效构建工具

Vite 是一个新兴的前端构建工具，由 Vue.js 核心团队成员尤雨溪提出并开发。它专注于提升开发体验，特别是在大型项目中的表现尤为突出。以下是 Vite 的主要特点：

  • 快速冷启动：Vite 使用原生 ES 模块（ESM）来实现按需编译，这使得首次启动应用的速度非常快。传统的打包工具需要预先打包整个应用程序，而 Vite 只会在请求时编译必要的模块，大大减少了初始加载时间。
  • 即时热更新 (HMR) ：Vite 实现了一个更高效、更精确的 HMR 机制。当文件发生变化时，Vite 只重新加载发生变化的模块，而不会影响其他部分的状态，确保了开发过程中的流畅性和即时反馈。
  • 开箱即用的功能：Vite 内置了对 TypeScript、JSX、CSS 预处理器、ESLint 等的支持，减少了额外配置的工作量。开发者可以立即开始编码，无需花费大量时间在环境搭建上。
  • 基于 Rollup 的生产构建：尽管 Vite 的开发服务器是基于 ESM 的，但其生产构建依赖于 Rollup。Rollup 是一个高效的模块打包工具，具有强大的优化能力和丰富的插件生态系统，确保了最终输出的代码质量和性能。
  • 兼容性与灵活性：Vite 支持多种主流框架，如 Vue、React、Preact、Svelte、Lit 等，并且可以通过插件系统轻松扩展其功能。无论是哪种框架，Vite 都能提供一致的开发体验和最佳实践支持。

选择建议

  • 如果你正在开发一个新项目，尤其是中大型项目，强烈推荐使用 Vite。它的快速启动和高效的 HMR 机制将大大提高你的开发效率，同时减少等待时间。
  • 如果你已经在使用 Vue-CLI 并且项目运行良好，那么不必急于迁移。Vue-CLI 仍然是一个稳定且功能强大的工具，尤其适合那些已经依赖其特定插件或配置的项目。

下面使用 vite 搭建（小声bb，哔站很多项目或是讲解vue/react 都在用vite）

01| 搭建 Vite + Vue 3 项目详细步骤

1. 环境准备

在开始搭建 Vite + Vue 3 项目之前，确保你的计算机已经安装了 Node.js 和 npm（Node Package Manager）。你可以通过以下命令来检查是否已正确安装：

node -v
npm -v

如果你还没有安装 Node.js 和 npm，请访问 Node.js 官方网站[1] 下载并安装。

2. 创建 Vite + Vue 3 项目

打开终端或命令行工具，执行以下命令来创建一个新的 Vite 项目，并选择 Vue 作为框架模板。这里我们使用 JavaScript 作为主要编程语言，但你也可以选择 TypeScript 以便于团队协作和代码维护。

npm init vite

接下来，按照提示输入项目的名称（例如 try-vue3），然后选择 Vue 框架模板。系统会自动为你创建一个基于 Vite 的 Vue 3 项目结构。

对于语言的选择，如果你想要保持简单，可以继续选择 JavaScript。如果你想为未来的合作开发打下更好的基础，可以选择 TypeScript。以下是选择 JavaScript 的示例：

image.png

3. 进入项目目录并安装依赖

创建项目后，进入新创建的项目目录，并安装所需的依赖包。这一步是必须的，因为 Vite 项目模板只是提供了一个基本的文件结构，而实际的运行还需要下载和配置相关的依赖。

cd my-vue-app
npm install

4. 启动开发服务器

完成依赖安装后，你可以启动开发服务器来开始开发。Vite 提供了一个非常快速的热更新（HMR）机制，使得开发过程更加流畅。【HMR： 不中断用户操作的情况下更新应用代码或资源的技术。它允许开发者在开发过程中快速地看到代码更改的效果，而无需重新启动整个应用程序】

npm run dev

成功启动后，你应该可以在浏览器中访问 http://localhost:5174（端口号可能会有所不同），看到默认的 Vue 3 欢迎页面。这意味着你的 Vite + Vue 3 项目已经成功搭建起来了！

02| 项目结构：理解你的项目
image.png

1. src - 主要开发区

src 目录是项目的主战场，包含了所有的源代码。这个目录下的文件和子目录根据功能进行划分，使得项目结构清晰，易于维护。

  • **assets**：存放静态资源，如图片、图标、字体等。这些资源不会经过构建工具的处理，而是直接被复制到输出目录中。例如，你可以在这里放置 logo.png、favicon.ico 等文件。
  • **components**：组件区，这里是现代前端开发的核心。每个组件都是一个独立的功能单元，由 HTML 模板、CSS 样式和 JavaScript 逻辑组成。组件化开发使得代码更加模块化、可复用，并且更容易维护。你可以按照功能对组件进行分类，比如 Header.vue、Footer.vue、Carousel.vue（轮播图组件）等。Vue 组件可以包含钩子（hooks），用于管理组件的生命周期和状态。
  • **App.vue**：根组件，它是整个应用程序的入口点。App.vue 文件定义了应用的基本布局和结构，通常包括一个或多个子组件。它使用 Vue 的模板语法，支持指令（如 v-if、v-for）、属性绑定（v-bind）、事件处理（v-on）等特性。此外，App.vue 还包含了 <script> 标签用于编写逻辑代码，以及 <style> 标签用于定义样式。
  • **main.js 或 main.ts**：这是应用程序的入口文件。它负责创建 Vue 实例，并将其挂载到 DOM 上。对于 TypeScript 项目，此文件将命名为 main.ts，并包含类型注解以增强代码的安全性和可读性。
  • router (可选) ：如果你的应用需要路由功能，可以在这个目录下创建路由配置。Vue Router 是官方推荐的路由管理库，它允许你定义多页面应用的导航规则。
  • store (可选) ：如果项目涉及到复杂的状态管理，可以引入 Vuex 或 Pinia（Vue 3 推荐的状态管理库）。store 目录用于存放全局状态和相关逻辑。
  • utils (可选) ：这是一个通用的工具函数存放处，例如日期格式化、字符串操作等辅助函数。
  • views (可选) ：视图层组件，通常对应于单页应用中的不同页面。它们可能是由多个组件组合而成的大型组件。

2. public - 静态资源区

public 目录用于存放不经过构建过程直接被复制到输出目录的静态资源。例如，index.html 是项目的入口页面，它引用了 src/main.js 作为应用程序的启动点。其他常见的静态文件还包括 robots.txt、manifest.json 等。

3. package.json - 项目依赖与脚本

package.json 是 Node.js 项目的核心配置文件，它不仅列出了项目的依赖关系，还包含了项目元数据和脚本命令。以下是其中的关键部分：

  • **dependencies**：生产环境中所需的包，这些包在打包时会被包含在最终的构建结果中。对于 Vue 3 项目，vue 库是一个必不可少的依赖项，因此它应该始终存在于 dependencies 中。
  • **devDependencies**：开发过程中需要用到的工具和库，如 vite、@vitejs/plugin-vue 等。这些依赖只在开发环境中使用，在生产环境中不需要，因此它们被列为 devDependencies。
  • **scripts**：定义了一系列常用的 npm 脚本，如 npm run dev 启动开发服务器，npm run build 打包项目，npm run serve 预览打包后的项目等。

4. vite.config.js - Vite 配置文件

vite.config.js 是 Vite 的配置文件，用于自定义构建行为和其他设置。通过这个文件，你可以指定插件、优化选项、环境变量等。对于 Vue 3 项目，默认情况下会自动加载 @vitejs/plugin-vue 插件来支持 .vue 文件的解析。

5. .gitignore - 忽略文件列表

.gitignore 文件用于指定哪些文件和目录不应被 Git 版本控制系统跟踪。这有助于保持仓库的整洁， 在开发环境中，npm run dev 命令会启动 Vite 开发服务器，它基于 HTTP 协议监听 index.html 文件的变化。index.html 是项目的入口页面，包含了应用程序的挂载点 <div id="app"></div>。真正的逻辑起点则是 src/main.js 文件，在这里通过 createApp().mount('#app') 将 Vue 应用实例挂载到 DOM 上。

03| vue3项目小实例

vue 标准“三剑客”：template 逻辑结构 script 脚本组件 style css 样式

1.修改App.vue

导入component里面Counter.vue文件 ，Counter 是实例，在style里面scoped 使用局部样式

<script setup>
import Counter from './components/Counter.vue'
</script>

<template>
   <div>
   <Counter />
   </div>
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>

2.组件开发：添加Counter.vue 组件

Vue 3 推崇组件化的开发方式，这使得代码更加模块化和可复用。每一个组件都是一个独立的功能单元，由 HTML 结构、JavaScript 逻辑和 CSS 样式组成。组件可以嵌套和组合，形成复杂的用户界面。比如，轮播图就是一个典型的组件示例，它可以作为一个独立的 UI 组件被多次复用。

下面用简单“+”业务需求进行书写组件，这里使用setup 语法糖，lang="ts"这样设置可以在js环境使用TS语法

<template>
  <div>
    <button @click="count++">Count is: {{ count }}</button>
    <h1>hello </h1>
  </div>
</template>

<script setup lang="ts">
    import { ref } from 'vue'
    const count = ref(0)
</script>

<style >
.counter {
  font-weight: bold;
  text-align: center;
  margin-top: 50px; 
}
button {
  padding: 10px 20px;
}
</style>

PixPin_2024-12-20_23-51-04.gif

补充：Setup 语法糖

Setup 实现简化组件逻辑。Vue 3 引入了 Composition API 和 setup 函数，这是一组新的API，旨在简化组件逻辑的组织。通过 setup，你可以更直观地处理响应式数据、定义计算属性、注册生命周期钩子以及声明方法。如果你选择不使用 setup，那么你需要通过 export default 导出一个对象，该对象包含组件的所有选项，如 data、methods 等。

react搭建

react搭建一样使用vite 快速完成。但是选择框架时候使用react

image.png
image.png

本文转自 https://juejin.cn/post/7450427906935881738

如有侵权，请联系删除。

最后

还没有使用过我们刷题网站（https://fe.ecool.fun/）或者刷题小程序的同学，如果近期准备或者正在找工作，千万不要错过，题库主打题全和更新快哦~。

有会员购买、辅导咨询的小伙伴，可以通过下面的二维码，联系我们的小助手。