前端工程化

最新推荐文章于 2024-07-09 23:44:56 发布

懒羊羊oo

最新推荐文章于 2024-07-09 23:44:56 发布

阅读量1k

点赞数 20

分类专栏：前端文章标签：前端

本文链接：https://blog.csdn.net/2301_77138117/article/details/139682396

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

学习了尚硅谷的前端工程化视频（01、课程介绍_哔哩哔哩_bilibili）

一、es6

1.let和const

为什么不用var而用let？因为var会越域，一个变量不应该跳出作用域

避免重复声明

避免变量提升

未报错

const声明常量不可被更改

2.解构

分为数组解构和对象解构

数组解构

如果需要数组中的值往往用索引

如果数组内容较多，且里面的值经常被用

对象解构

以前

解构对象用大括号解构数组用中括号

解构表达式也可以用在方法上面

3.链判断

安全的读取对象内部属性

有可能是后端返回的json数据

错误的写法是因为：message不一定有，message.body也不一定有...

更简洁的链判断直接一句话安全地取出数据各种深层的嵌套中的值

4.参数默认值

带默认值的参数必须放在后面

5.箭头函数

6.模版字符串

7.Promise

代表异步对象，类似于Java中的CompletableFuture

其要做的事情是在后台慢慢做的，无须等待；完成之后用PromiseAPI的一些方法去接收做完的结果

fetch是浏览器支持从远程获取数据的一个函数，这个函数返回的就是Promise对象

.then拿到正常结果

.catch获取异常信息

8.自定义Promise

9.Async函数

在函数前加上async关键字就可以把这个函数变成一个异步函数

输出100

用async快速包装成Promise对象

打印出来是then接到的，因为async不知道哪个是异常信息

正确的应该在发生错误时抛异常

10.await函数

若嵌套层级比较深，一直用.then会导致链路很长，不容易阅读

用顺序思维

将异步操作变为同步等待，提升阅读性

11.模块化

为了让别人可以使用

用到export关键字将需要暴露给别人的功能导出去

将对象和方法一起导出

导入

二、npm

npm是node,js中进行包管理的工具进行依赖管理

如果当前项目在开发期间需要第三方的js库，npm可以帮助远程下载js库，就如java中的maven

在node.js的官网上下载

确认安装：

设置镜像源：设置国内阿里云下载的更快

在项目中的终端测试npm的一些命令：

测试：

会生成一个package.json文件如下（此文件就是npm用来维护和管理项目的文件）：

如果需要安装第三方的包例如安装jquery，就直接在终端输入npm install juery

可以看到在目录下会生成一个node_modules文件夹，里面包含了jquery

有npm仓库可以搜索相关功能的js包npm的js仓库https://www.npmjs.com

回到刚刚那个图，"scripts" : 其中可以编写npm可以运行的脚本，例如在示例test脚本中我编写了返回‘哈哈哈’，在终端运行，可以看到下图：

如果项目要启动，可以创建一个main.js文件

如果有了node.js环境，这些js命令可以直接用node运行

所以直接在刚刚的脚本自定义编写一个"dev"，如上上上图

对项目进行打包“build”，内容后续会完成

分享给别人不要把node_modules一并分享，因为碎的文件很多

对方也要安装node.js 使用npm install 不加包名可以把package.json中的所有dependencies安装

三、Vite

官网：https://cn.vitejs.dev

快速构建前端项目脚手架

统一的工程化规范：目录结构、代码规范、git提交规范等

自动化构建和部署：这可以自行进行代码打包、压缩、合并、编译等常见的构建工作，可以通过集成自动化部署脚本，自动将代码部署到测试、生产环境等

首先创建一个项目脚手架： npm create vite

由于我之前创建过，它提示我先remove掉

自动生成package.json

用npm run dev启动项目即可跳转页面

ctrl+c终止运行

执行 npm run build 可以对项目进行打包

模块都被放到了dist目录下，如果是开发一个springboot前后端不分离的项目，直接把dist目录放到springboot的src的资源目录下即可启动

如果在public文件中创建一个json文件可以直接运行项目后通过修改地址跳转页面

同理 vite.svg也可以看到

src包含所有源码编写，样式，js文件，以及vue组件

四、Vue

核心框架类似于java中的spring 提供一站式的功能整合后边一系列的框架如 Vue-Router、Pinia

1.组件化

使用vite创建vue项目脚手架，并测试vue功能

以上，启动vite的全过程

一个网页可以化成一堆一堆的小组件

在Vue中想要开发一个组件称为SFC

例如脚手架中生成的第一个项目中App.vue

在numpy run dev之后会实时更新

在components下新建一个组件

自动生成基本框架

将刚写的组件像标签一样导入App.vue 自动生成上面的脚本信息

未来组件变多就可以构成一个大型的Vue系统

2.运行原理

main.js是项目模块化的入口

每一个vue都是通过createApp函数创建的

要让vue从根组件开始渲染就需要 挂载应用

3.插值

变量放到姓名后就是插值

显示

4.常用指令

v-xxx即称为指令

基础指令： v-html(取html) \ v-text(取文本)

事件指令：v-on

判断指令：v-if

循环指令：v-for

（1）基础指令

用插值我们会发现没有把html效果显现出来

用v-html将其中的html内容取出

v-text即把其中的文本内容取出效果跟直接插值是一样的

（2）事件指令

事件指令v-on ：在button绑定一个点击事件调用buy函数弹出购买成功的窗口

简写依然可以点击成功

在click后还可以跟修饰符例如如果跟.once说明事件只可以被触发一次

点击第二次就点不了了

（3）判断指令

v-if 对语句进行判断显示

也可以将下面改成v-else不带语句可以看到现在显示的是很便宜且太贵了没有显示

（4）循环指令

v-for遍历可以同时提取数组中的内容和索引索引从0开始

5.属性绑定

v-bind 将标签上的任意属性和某一变量进行绑定

将url的值取出放到href属性上

简写直接用冒号

6.响应式

点击后 Go的地址还是

原因：

默认数据是不具备响应式特性的

响应式特性：数据的变化可以更新到页面效果上

提供了两个函数： ref(),reactive():

（1）ref()函数

ref() ：

1.将基本数据、对象类型数据使用ref()包装成响应式数据

2.使用代理对象.value = “” 修改成新址

3.页面取值直接插值取值属性绑定也一样修改才需要.value

点击前

点击后

（2）reactive()函数

reactive() ：

1.将对象类型数据使用ref()包装成响应式数据

2.使用代理对象 = “” 修改成新址

3.页面取值属性绑定直接{{变量名}}

例：每点一次加价加一百块

用ref可以实现加价但是要.value很麻烦

reactive

7.表单绑定双向绑定机制

属性绑定 v-bind 单向绑定数据-->页面

表单绑定 v-model 双向绑定数据<-->页面

创建组件Form 在templates标签中添加以下代码形成一个表单

<div style="display: flex;">
  <div style="border: 1px solid black;width: 300px">
    <form>
      <h1>表单绑定</h1>
      <p style="background-color: azure"><label>姓名(文本框)：</label><input/></p>
      <p style="background-color: azure"><label>同意协议(checkbox)：</label>
        <input type="checkbox"/>
      </p>
      <p style="background-color: azure">
        <label>兴趣(多选框)：</label><br/>
        <label><input type="checkbox" value="足球"/>足球</label>
        <label><input type="checkbox" value="篮球"/>篮球</label>
        <label><input type="checkbox" value="羽毛球"/>羽毛球</label>
        <label><input type="checkbox" value="乒乓球"/>乒乓球</label>
      </p>
      <p style="background-color: azure">
        <label>性别(单选框)：</label>
        <label><input type="radio" name="sex" value="男">男</label>
        <label><input type="radio" name="sex" value="女">女</label>
      </p>
      <p style="background-color: azure">
        <label>学历(单选下拉列表)：</label>
        <select>
          <option disabled value="">选择学历</option>
          <option>小学</option>
          <option>初中</option>
          <option>高中</option>
          <option>大学</option>
        </select>
      </p>
      <p style="background-color: azure">
        <label>课程(多选下拉列表)：</label>
        <br/>
        <select multiple>
          <option disabled value="">选择课程</option>
          <option>语文</option>
          <option>数学</option>
          <option>英语</option>
          <option>道法</option>
        </select>
      </p>
    </form>
  </div>
  <div style="border: 1px solid blue;width: 200px">
    <h1>结果预览</h1>
    <p style="background-color: azure"><label>姓名：</label></p>
    <p style="background-color: azure"><label>同意协议：</label>
    </p>
    <p style="background-color: azure">
      <label>兴趣：</label>
    </p>
    <p style="background-color: azure">
      <label>性别：</label>
    </p>
    <p style="background-color: azure">
      <label>学历：</label>
    </p>
    <p style="background-color: azure">
      <label>课程：</label>
    </p>
  </div>
</div>

写入需要绑定的信息

这部分绑定到文本框中

当改变vite页面的文本框 username也会发生变化这就是双向传递

结果预览直接用插值填的什么就能看到什么

其他的依葫芦画瓢注意v-model的位置和值的类型还有包括数组的取值

<script setup>
  import {reactive} from "vue";

  const data = reactive({
    username:"zhangsan",
    agree: true,
    hobby: [],
    gender: "",
    degree: "",
    course: []
  })
</script>

<template>
  <div style="display: flex;">
    <div style="border: 1px solid black;width: 300px">
      <form>
        <h1>表单绑定</h1>
        <p style="background-color: azure"><label>姓名(文本框)：</label><input v-model="data.username"/></p>
        <p style="background-color: azure"><label>同意协议(checkbox)：</label>
          <input type="checkbox" v-model="data.agree"/>
        </p>
        <p style="background-color: azure">
          <label>兴趣(多选框)：</label><br/>
          <label><input type="checkbox" value="足球" v-model="data.hobby"/>足球</label>
          <label><input type="checkbox" value="篮球" v-model="data.hobby"/>篮球</label>
          <label><input type="checkbox" value="羽毛球" v-model="data.hobby"/>羽毛球</label>
          <label><input type="checkbox" value="乒乓球" v-model="data.hobby"/>乒乓球</label>
        </p>
        <p style="background-color: azure">
          <label>性别(单选框)：</label>
          <label><input type="radio" name="sex" value="男" v-model="data.gender">男</label>
          <label><input type="radio" name="sex" value="女" v-model="data.gender">女</label>
        </p>
        <p style="background-color: azure">
          <label>学历(单选下拉列表)：</label>
          <select v-model="data.degree">
            <option disabled value="">选择学历</option>
            <option>小学</option>
            <option>初中</option>
            <option>高中</option>
            <option>大学</option>
          </select>
        </p>
        <p style="background-color: azure">
          <label>课程(多选下拉列表)：</label>
          <br/>
          <select multiple v-model="data.course">
            <option disabled value="">选择课程</option>
            <option>语文</option>
            <option>数学</option>
            <option>英语</option>
            <option>道法</option>
          </select>
        </p>
      </form>
    </div>
    <div style="border: 1px solid blue;width: 200px">
      <h1>结果预览</h1>
      <p style="background-color: azure"><label>姓名：{{data.username}}</label></p>
      <p style="background-color: azure"><label>同意协议：{{data.agree}}</label>
      </p>
      <p style="background-color: azure">
        <label>兴趣：
            <li v-for="h in data.hobby">{{h}}</li>
        </label>
      </p>
      <p style="background-color: azure">
        <label>性别：{{data.gender}}</label>
      </p>
      <p style="background-color: azure">
        <label>学历：{{data.degree}}</label>
      </p>
      <p style="background-color: azure">
        <label>课程：
          <li v-for="c in data.course">{{c}}</li>
        </label>
      </p>
    </div>
  </div>
</template>

<style scoped>

</style>

8.计算属性

在base的基础上添加一个加量的按钮用totalPrice计算总价（价格*数量）

为什么箭头指向的都是表示num数据前面的加了.value后面没加？

因为.value只有在脚本里面加

9.监听

watch/watchEffect

实时的监听一些数据变化并执行一些动作

限购操作大于3就弹出提醒并且将值控制在3

（1）watch

（2）watchEffect

不用说监听哪一个数据只用说当数据发生变化的时候要执行什么动作监听所有的响应式数据

在回调中达到什么样的预期执行什么样的动作触发某一个分支代码

10.组件传值

项目开发中用的非常多

这几个就是兄弟组件

建立一个Father和一个Son组件

Father中

Son中

App中

渲染如下

（1）父传子 props

单向数据流：父改了可传递给子子改了传递不了父

父组件中定义变量money 儿子接收money的值

绑定给Son标签

儿子怎么用

定义一个属性可以定义很多属性所以构造一个数组此处只有一个money属性

传递的值是只读属性

当要加值可以直接用对象（批量绑定的快速写法）

直接传递对象

会被一对一映射到儿子的属性里面

完整定义更多的定制性

（2）子传父 emit

使用emit定义事件相当于儿子买了棒棒糖告诉父亲父亲再去付钱

Father.vue中感知事件接收事件的值

@buy如果有事件buy的发生就调用moneyMinis函数

效果点确定就扣钱

兄弟传值：利用父子传值即可。

11.插槽 - Slots

也是父组件给子组件传值的一种方式

如果传递的是页面模板插槽最合适

在son中写两个插槽的位置给其赋予名字方便在Father插入html模版

这样就是如果Father不传值就默认哈哈Son内容，如果传值就直接覆盖

在Father中将模版完善用v-slot选择填入哪个

简写 v-slot：变 #

效果：

五、Vue-Router

1.整合配置

切换路由类似于Java中的SpringMVC

步骤

先搭建一个框架供我们写路由

views里面的.vue文件都只是简单的用<h1>写了他们的名字我就不放图了

想要实现的效果就是点击那个标签就把在横线下面显示那个标签的内容

在终端首先安装vue-router的依赖： npm install vue-router@4

后面我们会将a标签全部替换成以下

会动态展示地址对应的组件

在js里面我们需要定义这些代码

因为配置的较多用一个router文件夹包含 index.js注释了简单的步骤

（1）定义路由表

（2）创建路由器

（3）导出路由器

（4）vue实例使用路由器

最后将app.vue的标签改掉即可看到一个动态的页面

页面效果

2.路径参数

在编写路由表时可以在路由位置使用：变量名进行占位即可动态接收数据即路径参数

在路由中进行占位

在/haha/后面无论输入什么都可以访问到Haha组件因为id的值是动态的

效果（在对象后加上 .id 可以获取到里面的值）

3.嵌套路由

可以实现多层嵌套界面

想要实现的效果：点击用户中心先跳到User组件

在路由中设置

效果

在main.js文件中添加路由记得子路由里面的地址不要加/ 因为上面这张图会有

最终效果

4.编程式导航

如果在js代码中拿到路由数据

（1）useRoute

在UserProfile.vue

route.name打印组件名是需要在路由表中定义才会有名字的

点击按钮呈现

（2）useRouter

5.路由传参

（1）params参数路径参数必须使用组件的name

在路由表中动态变量替换的路径位置

使用内置对象获取

效果

也可以用编程方式 就是上面学的useRoute

效果

用对象传参进行显示

效果

也可以用params传参进行显示

效果

（2）query参数

拼接的字符串也可以是动态的

效果

用编程方式

query的对象传参

效果

query传参地址上也是拼接的

效果

6.导航守卫

拦截器思想，将路由器跳转到指定界面之前进行拦截，再加上一定地逻辑判断

在之前进行拦截

正常跳转（默认可以删掉）

取消导航

用字符串需要有条件避免比如本来在/hello还要一直跳转到/hello

还可能远程找服务器要一些数据 await等待服务器数据返回外层必须加关键字async

六、Axios

Axios是一个基于promise的网络请求库，用于浏览器和node.js

前后分离模式下连接前后端的桥梁

安装库

导入

1.发送请求

上面的API测试服务器我用着有问题

我在找到了一个可以测试的网站地址为Reqres - A hosted REST-API ready to respond to your AJAX requests

（1）get请求

对于get请求我访问了如下地址

获取到的数据的结构有很多 .then拿到响应结果

若打印resp.data 结果如下和上面所显示的是一样的

如果get发送请求还想要带一些参数

带的参数自动拼接到url地址后面

（2）post请求

对于post请求我访问了如下地址

测试

打印结果

带有参数的post请求

跟get类似但是注意get请求这里是config配置而post请求这里是请求要带的数据

因为是给其他地址发请求，是一个跨域请求，所有有一个预检

post请求的数据在负载中会自动转为json发给服务器服务器能感知

2.实例配置

实际上每一个url服务器地址固定，变化的只有后面的路径

创建一个实例利用axios.create自定义默认配置

点击四个按钮都能获取到信息

优化

导入

成功打印

3.拦截器

在请求或响应被then和catch处理前拦截它们

超时用弹框提示

如果delay按钮很多，那么每一个都要弹窗

所以我们需要利用拦截器机制 /hhtp/index.js中无论哪个请求出现错误，都会走拦截器的代码进行统一响应

修改return 如下就可以实现每个请求接收到，.then收到的数据就是拦截器再加工后的data数据

七、Pinia

1.核心概念

状态管理就是指保存一些状态数据,在各个组件之中共享，就像后端的redis

之前学的路由传参和组件传值都比较麻烦

2.定义存储单元

（1）Option写法：定义一个money存储单元

相当于配置了三个选项： State\Getters\Actions，不够灵活，不能随心所欲的组织代码结构

基础准备

创建一个Wallet.vue组件

步骤：

先建一个stores目录，然后在里面创建一个money.js文件

（1）定义Store

用defineStore(）定义，其第一个参数要求必须是一个独一无二的名字，Pinia将用它来连接store和devtools

配置中就包含以下，State\Getter\Action

money.js如下

import {defineStore} from "pinia";

//定义了一个money的存储单元
export const useMoneyStore = defineStore('money',{
    //其他配置
    state:() => ({money: 100}),
    getters: {
      rmb: (state) => state.money,
      usd: (state) => state.money * 0.14,
      eur: (state) => state.money * 0.13,
    },
    actions: {
        win(arg){
            this.money+=arg;
        },
        pay(arg){
            this.money-=arg;
        }

    },
});

Wallet.vue中导入用插值填充

<script setup>
import {useMoneyStore} from '../stores/money.js'
const moneyStore = useMoneyStore();
</script>

<template>
<div>
  <h2>¥: {{moneyStore.rmb}}</h2>
  <h2>$: {{moneyStore.usd}}</h2>
  <h2>€: {{moneyStore.eur}}</h2>
</div>
</template>

<style scoped>
  div{
    background-color: skyblue;
  }
</style>

显示

Game.vue中导入

<script setup>
  import {useMoneyStore} from '../stores/money.js'
  const moneyStore = useMoneyStore()
  function guaguale(){
    moneyStore.win(100);
  }

  function bangbang(){
    moneyStore.pay(5);
  }
</script>

<template>
  <button @click="guaguale">刮刮乐</button>
  <button @click="bangbang">棒棒糖</button>
</template>

<style scoped>

</style>

点击按键同步变化

数据可以跨组件进行共享，比之前的什么组件传值方便很多

（2）setup写法

官方更推荐！

我们可以传入一个函数，该函数定义了一些响应式属性和方法，并且返回一个带有我们想暴露出去的属性和方法的对象

注意！定义的功能需要全部return出去

其他的功能结构不需要改变

main.js中的代码

import {defineStore} from "pinia";
import {computed, ref} from "vue";

export const useMoneyStore = defineStore('money',()=>{
    const money = ref(100);
    const rmb = computed(()=>money.value);
    const usd = computed(()=>money.value*0.14);
    const eur = computed(()=>money.value*0.13);

    const win = (arg)=>{
        money.value += args;
    }
    const pay = (arg)=>{
        money.value -= args;
    }

    return {money,rmb,usd,eur,win,pay}
});