保姆级教你搭vite+Vue(react)项目,认识目录(建议收藏~~)

476 阅读10分钟

Vue + React CLI 命令行工具:构建现代前端应用的基石

本文以小白为写作视角。主要通过搭建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 官方网站 下载并安装。

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 项目已经成功搭建起来了!

image.png

02| 项目结构:理解你的项目

image.png

1. src - 主要开发区

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

  • assets:存放静态资源,如图片、图标、字体等。这些资源不会经过构建工具的处理,而是直接被复制到输出目录中。例如,你可以在这里放置 logo.png、favicon.ico 等文件。
  • components:组件区,这里是现代前端开发的核心。每个组件都是一个独立的功能单元,由 HTML 模板、CSS 样式和 JavaScript 逻辑组成。组件化开发使得代码更加模块化、可复用,并且更容易维护。你可以按照功能对组件进行分类,比如 Header.vueFooter.vueCarousel.vue(轮播图组件)等。Vue 组件可以包含钩子(hooks),用于管理组件的生命周期和状态。
  • App.vue:根组件,它是整个应用程序的入口点。App.vue 文件定义了应用的基本布局和结构,通常包括一个或多个子组件。它使用 Vue 的模板语法,支持指令(如 v-ifv-for)、属性绑定(v-bind)、事件处理(v-on)等特性。此外,App.vue 还包含了 <script> 标签用于编写逻辑代码,以及 <style> 标签用于定义样式。
  • main.jsmain.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.txtmanifest.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 上。

image.png

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 导出一个对象,该对象包含组件的所有选项,如 datamethods 等。

react搭建

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

image.png

image.png