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 的示例:
3. 进入项目目录并安装依赖
创建项目后,进入新创建的项目目录,并安装所需的依赖包。这一步是必须的,因为 Vite 项目模板只是提供了一个基本的文件结构,而实际的运行还需要下载和配置相关的依赖。
cd my-vue-app
npm install
4. 启动开发服务器
完成依赖安装后,你可以启动开发服务器来开始开发。Vite 提供了一个非常快速的热更新(HMR)机制,使得开发过程更加流畅。【HMR: 不中断用户操作的情况下更新应用代码或资源的技术。它允许开发者在开发过程中快速地看到代码更改的效果,而无需重新启动整个应用程序】
npm run dev
成功启动后,你应该可以在浏览器中访问 http://localhost:5174
(端口号可能会有所不同),看到默认的 Vue 3 欢迎页面。这意味着你的 Vite + Vue 3 项目已经成功搭建起来了!
02| 项目结构:理解你的项目
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>
补充:Setup 语法糖
Setup 实现简化组件逻辑。Vue 3 引入了 Composition API 和 setup
函数,这是一组新的API,旨在简化组件逻辑的组织。通过 setup
,你可以更直观地处理响应式数据、定义计算属性、注册生命周期钩子以及声明方法。如果你选择不使用 setup
,那么你需要通过 export default
导出一个对象,该对象包含组件的所有选项,如 data
、methods
等。
react搭建
react搭建一样使用vite 快速完成。但是选择框架时候使用react