初识vue和react，创建工程并非难事

谎言西西里
317 阅读7分钟

引言：

从本文开始我将从零开始同时学习 vue3 和 react 这两个JavaScript框架。Vue 和 React 都是目前非常流行且广泛使用的前端技术，许多公司和组织都在使用它们构建用户界面，所以为了提高自己的就业竞争力，我打算同时掌握这两门技术，那么话不多说，开学！！

Vue 部分：

什么是Vue？

Vue.js是当下非常流行的用于构建用户界面的 渐进式 的JavaScript框架。而什么是渐进式呢？其实就是我们可以逐步采用Vue.js框架所提供的功能。它的设计理念也很朴素，就是突出简单易用，让开发者能够快速上手并构建出高效、可维护的Web应用程序。

Vue.js的核心思想是数据驱动视图。这意味着我们只需要关注数据的变化，而Vue.js会自动更新视图，使得页面的展示与数据保持同步，这样我们就不需要手动操作DOM元素。可以说是让开发效率提升了一个档次。

初步介绍完Vue后想必你也有了一定了解，当然在后续学习后也会产生自己的看法，那么接下来就开始实战。

创建Vue3 工程：（基于 vite 创建）

Vite 是由 Evan You（尤雨溪）开发的一款新型前端构建工具，官网地址：Home | Vite中文网，其相比于其他例如webpack等前端构建工具是有一定优势的，例如：

  • 轻量快速的热重载（HMR），当修改文件时，Vite 可以实现几乎即时的 HMR，只重新加载改变的部分，而不是整个页面，这大大加快了开发过程中的反馈循环，能实现极速的服务启动。
  • 对TypeScript、JSX、CSS等支持开箱即用。
  • 真正的按需编译，不需要等待整个编译完成。

稍微介绍完vite后，我们就直接开始演示具体操作：

  1. 初始化一个新的Vite项目，在命令行中输入以下内容并执行。

    npm init vite

    image.png

    这里就是询问我们创建项目的名称是什么，输入想好的名称即可。

  2. 在输入完名称执行后，接下来就是选择我们所需的框架了，使用键盘右下角的方向键即可选择，在这里我们选择到Vue。

    image.png

  3. 选择完框架后，就是选择使用的变体了，在这里我选择JavaScript。

    image.png

  4. 执行完上述操作后，我们就创建好了Vue项目了，并且创建了脚手架项目（Scaffold Project），这个概念在软件开发中通常指的是使用某种工具或框架自动生成项目的基础结构。

    image.png 并且在下方会有一些提醒：

    • cd vue_eg：切换当前工作目录到vue_eg。
    • npm i：安装项目所需的所有依赖项。
    • npm run dev：用于运行在 package.json 文件中定义的 dev 脚本。

vue框架内部介绍：

在我们搭建好vue框架后发现，在框架里面有一大坨杂七杂八的东西，有些甚至完全没有见过，那么接下来我就一个个来介绍一下这些东西的用处到底是什么。（别忘了执行npm i）

image.png

.vscode文件夹：

我们打开.vscode文件夹后里面会包含一个extensions.json的文件，这个其实就是你在vscode里面安装的vue相关的插件，也可以删除，并没有本质上的影响。例如：

image.png

image.png

public文件夹：（脚手架的根目录）

目前只有一个文件vite.svg，这个其实就是页签图标。

image.png

页签图标大家想必也并不陌生，就拿我们最常用的百度来举例。

image.png

.gitignore：

.gitignore 文件是一个配置文件，用于告诉 Git 哪些文件或目录应该被忽略，不被纳入版本控制。这样我们就可以确保只有必要的文件被纳入版本控制，从而保持仓库的整洁和高效。

index.html：

这个其实就是我们这个项目的入口文件，不是我们之前使用的类似于main.js呀等等，当然我们也可以验证一下这个文件的效果，首先我们打开这个文件。

image.png

我们发现里面有默认的一些html代码，我们在命令行中输入npm run dev执行一下看看。

image.png

将其中的地址输入浏览器中查看

image.png

这个是框架给我们的默认页面，但是当我们将这个文件中的内容替换为任意的一个html代码，例如：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h1>hello world!</h1>
</body>
</html>

然后 ctrl+c 停止脚手架后，再输入npm run dev运行项目我们就会发现，这里单单执行了这个html项目，而在src文件夹中的东西全部没用了。只是显示了hello world!

image.png

README.md:

这个其实就是对工程的简单介绍，在不需要的情况下可以直接删除。不过多介绍

vite.config.js：

这个是整个工程的配置文件，例如配置代理呀，安装插件呀等等，都放置在这个里面。不过多介绍

src文件夹：（源代码文件夹）

这个文件夹可是重中之重，包含我们在项目写的.js、.css、.vue等都在这个文件夹里面。

image.png

main.js

这个文件主要支撑这个项目，这里我们要稍微分析一下里面的内容，帮助各位更好理解，打开这个文件我们来看看里面的内容，其中分为4段代码，我们来一个个分析。

image.png

  • import { createApp } from 'vue'：这句代码是在Vue3中创建了一个新的Vue应用实例，相当于我们创建了一个应用（App）。有人可能不太理解，我们把写一个应用当作在暖室内种一棵小树，而这个createApp就相当于我给这个要种的树搞了个盆，要在这个盆里种这棵小树。
  • import './style.css'：导入外部 CSS 文件。
  • import App from './App.vue'：导入根组件，而这个App就像我们那棵树的根，而我们后续写的像a.vue、b.vue等等，就是这棵树的树枝什么的，要安装在这个根上。
  • createApp(App).mount('#app')：创建一个新的 Vue 应用实例，使用 App 作为根组件，并且将这个应用实例挂载到 HTML 文件中 id 为 app 的元素上。这个就可以理解为把那棵树种在我们的盆里，然后再放到id为app的位置上。

这个id="app"在index.html里

并且在index.html里通过<script type="module" src="/src/main.js"></script>来连接到我们的main.js

App.vue（树的根）

这个就是根组件。不过多介绍

style.css（树的颜色，外观）

定义和管理应用的全局样式。不过多介绍

components（树枝）

在这个文件夹里面也存放着组件，但是比不上根组件。组件这里就不过多讲解了，后续我会写一篇专门关于理解组件的文章。而我们初始的里面就包含一个HelloWorld.vue文件，这就是我们打开初始的框架页面里面的组件。

image.png

assets

这里面存放着一些固有的css和一些图片。不过多介绍

React 部分

创建React 工程：（基于 vite 创建）

在学完如何使用vite创建Vue3后，其实React和那个步骤极其相似，照着下面的图片选择即可。（别忘了最后的npm i）

image.png

React框架内部介绍：

其大部分内容与vue相似，唯一不同的是React中多了eslint.config.js这个文件，并且src中的内容有点区别，所以这里我们只讲解这两个。

eslint.config.js：

这个文件主要是用于配置 ESLint 工具，以确保代码质量和一致性。而ESLint 是一个强大的静态代码分析工具，它可以帮助我们发现并修复代码中的问题，同时也可以强制执行一致的代码风格。

src：

在这其中我们发现使用的是.jsx后缀的文件而并非.js，而这里的.jsx是一种 JS 的语法扩展，在后续的文章中也会讲解，这里其作用和vue中.vue的作用相差不大。不过多介绍

小结：

本文我们学习了如何创建vue和react的工程，当然也有些其他的方法创建，还请读者自行查找。

---欢迎各位点赞、收藏、关注，如果觉得有收获或者需要改进的地方，希望评论在下方，不定期更新

0bae-hcffhsw0416753.gif
avatar
文章
阅读
粉丝