前端工程化

ZXT
679 阅读4分钟

前端工程化

当我们要构建大型项目时，在使用一个个页面编写会十分的繁琐。我们会使用工程化工具来构建项目。

Vite 是一个现代的前端构建工具，它旨在提供快速的开发体验和高效的生产构建。与传统的构建工具相比，Vite 提供了更快的冷启动时间和即时热更新（HMR），特别适合复杂的大型项目。

我们使用 npm init vite初始化一个vite项目。接着按照要求进行选择使用的框架，语言。

image.png image.png

可以看到初始化出了一个项目解构目录，这个目录结构竟然跟我们的node项目极其相似。这是因为其实在开发过程中，Vite 确实依赖于于 Node.js 的开发服务器来提供资源映射和热更新（HMR）等功能。有点像springboot中的静态文件。存放我们的静态资源。

接下来我们照样从Vue和React分别做一个小demo带大家入门。

VUE

vue的初始化目录结构长下面这样 image.png 我们先npm i 安装一下需要的依赖，接着使用npm run dev 启动一下项目。项目启动了，点击网址即可进入。

image.png

image.png

目录中的index.html是我们的入口文件，我们进去看看。

image.png 可以看到里面有一个div标签，他是我们的挂载点，接着引入了一个main.js文件，我们猜也能猜到这是给我们的div#app标签里面添加东西的。我们点进去看看：

image.png mian.js中引入了createApp方法，还引入了css文件，引入了一个APP组件，将组件挂载到了app标签上。这里使用了import导入css样式。 这条语句的作用是从当前目录下的 style.css 文件中“导入”内容。但实际上，它并不是导入 JavaScript 代码，而是告诉构建工具（如 Vite 或 Webpack）去处理这个 CSS 文件并将其应用到项目中。

现代前端开发强调“组件化”思维，即每个组件都是一个独立的功能单元，由 HTML、CSS 和 JavaScript 组成。这种方式不仅提高了代码的复用性和可维护性，还使得团队协作更加高效。

组件 = HTML + CSS + JS：每个组件封装了一组相关的逻辑和样式，形成一个完整的功能单元。 我们接着进入App.vue这个组件看看。

image.png

vue的组件是非常清晰简单的三段式：template用来写HTML,style用来写css，script用来写js交互逻辑。 接着我们来自己实现一个Count计数器试试。

首先我们在components目录下创建一个Count.vue组件：

<script setup>
import { ref } from 'vue'
let count = ref(0);
const increment = function(){
    count.value++;
}
</script>
<template>
    <p>Count: {{ count }}</p>
    <button @click="increment">+1</button>
</template>

可以看到我们的响应式数据及事件函数不需要用setup函数进行return返回了，只要在script上加上setup即可。

接着在App.vue上引入我们的组件

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

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

React

我们先重复之前的步骤创建一个react项目。可以看到里面照样有index.html入口文件。 里面引入了一个JSX文件，等等，JSX是什么？不是JS吗

JSX 是一种语法扩展，而不是文件类型。它让开发者能够在 JavaScript 中编写类似 HTML 的代码，从而简化了 React 组件的创建和管理。通过编译工具（如 Babel），JSX 会被转换为标准的 JavaScript 代码，确保浏览器能够正确解析和执行。 简单来说，他就是把JS和HTML混合在一起了，这样就有一种使用JS书写的感觉，非常的舒适！！！ image.png 我们点开main.jsx

image.png 发现他导入了一个组件,css文件，以及一个StrictMode。接着进行了渲染

将 App 组件包裹在 StrictMode 中的主要原因是为了利用其提供的额外检查和警告，从而编写更健壮和兼容性更好的代码。虽然 StrictMode 不会对生产环境中的性能或功能产生影响，但在开发环境中它可以显著提升代码质量。

与 Vue 不同，React 使用函数即组件的方式，使得代码更加简洁和直观。里面的每一个函数就是一个组件。我们的函数名需要大写，并且返回HTML标签，他把js和HTML融合在了一起，所以写起来就一个字！！爽！！！

下面是一个demo

我们创建一个JSX文件（组件），引入useState函数。在里面创建App函数，，并在结尾将App导出

import { useState } from 'react'

function App() {
  
}

export default App

我们在这里想获取我们github的仓库。我们可以创建一个响应式数据数组用来接收，同时我们给一个响应式数据用来表示接收与否的状态。

接着遍历我们的结果数组来返回值

import { useState } from 'react'

function App() {
  const[repos,setRepos] = useState([]);
  const [loading,setLoading] = useState(true);
  fetch('http://api.github.com/users/urrr/repos')
  .then(res => res.json())  
  .then(res =>{
    setRepos(res);
    setLoading(false);
  })
  return (
    <>
    <div>
      <h2>{loading && 'loading...'}</h2>
      <ul>
        {
          repos.map(repo =>
            <li key={repo.id}>{repo.name}</li>
          )
        }
      </ul>
    </div>
    </>
  )
}

export default App

可以看到我们在遍历的时候能直接使用js的语法，非常的舒适，并且能够动态刷新页面的状态。

avatar
文章
阅读
粉丝