公告

记录一下自己学习和生活中的所见所闻

小凯的个人成长
Search K

Appearance

本套课程适合后端程序员快速掌握前端，利用 4 小时了解 vue 重点知识 详细课程可参考另外一套尚硅谷vue课程 Vue3快速上手

前端工程化4小时速通笔记 ​

目录 ​

笔记地址 ​

2. 前端工程化 - 快速通关 （4h）

代码地址 ​

代码地址：
https://gitee.com/leifengyang/frontend-quickstart
https://github.com/leifengyang/frontend-quickstart

学习安排 ​

image (6).png

技术点 ​

image (5).png

适合 ​

image (7).png

前置知识 ​

image (8).png

ES6 ​

新语法

let ​

之前声明变量使用 var 但是使用 var 有不好的地方

所以现在使用 let 来声明变量

const ​

使用 const 来声明变量

解构（语法糖） ​

没有语法糖之前我们要取出数组中的值要使用索引

image (9).png

语法糖写法

image (10).png

image (11).png

链判断 ​

image (12).png

参数值 ​

image (13).png

箭头函数 ​

用来声明函数

以前的写法

image (14).png

image (15).png

模板字符串 ​

image (16).png

Promise ​

异步处理

image (17).png

image (18).png

image (19).png

image (20).png

自定义 promise ​

image (21).png

Async ​

image (22).png

用来简化 promise 来开发异步函数

await ​

同步操作，等 promise 执行完成，然后使用 promise 的结果

这样可以避免写.then

模块化 ​

不同的功能放在不同的 js 中

那么别人要怎么使用呢，毕竟在不同的文件中，和 java 中一样使用导入导出功能

npm 包管理 ​

npm 和 maven 一样，管理前端依赖的，使用 npm 首先需要先下载 node.js

为了加快速度，需要设置镜像源

常用命令 ​

npm init -y ​

初始化项目

npm install ​

可以去仓库里面搜索

npm install -g ​

全部项目都可以使用

npm uninstall ​

卸载包

npm run ​

项目运行

启动 ​

打包 ​

vite 构建工具 ​

npm create vite ​

Vue3 ​

https://cn.vuejs.org/guide/introduction.html

使用 vite 创建脚手架

组件化 ​

script 里面编写 js

template 里面编写 html

style 里面编写 css 样式

运行原理 ​

根组件入口是 app.vue

插值 ​

取出变量的值

常用指令 ​

v-html ​

v-text ​

上面两个是基础指令，下面来看事件指令

v-on ​

简写

v-if ​

判断指令

v-for ​

循环指令，用来进行遍历取出值

属性绑定 ​

v-bind ​

默认绑定不具备响应式特性

简写

响应式变化 ​

就是数据的变化可以更新到页面上

点击完之后确实改变了地址如下图

但是发现点击 go 还是显示百度

默认绑定不具备响应式特性

ref 函数 ​

  1. 把基本数据使用 ref()包装成响应式数据

  1. 使用代理对象.value=""

只有修改的时候才是.value，取值的时候直接取值

reactive()函数 ​

这种方式修改的时候可以不用.value，只能包装对象类型的数据，ref 是什么类型都可以包装

插件安装 ​

浏览器中安装插件

安装完之后点击 F12，点击+号，点击 vue

然后就可以进行调试了

表单绑定 ​

这是双向绑定，前面是单向绑定

单向绑定 v-bind：数据到页面

双向绑定 v-model：表单的输入框，页面改变了数据也就改变了

数据到页面，页面到数据

能够改变首先这些都要是响应式数据

  1. 声明响应式数据

  1. 使用 v-model 来进行双向绑定

计算属性 ​

computed

监听 ​

watch ​

实时监听数据的变化，并且执行一些动作，需要指定监听哪个数据

watchEffect ​

不要指定监听哪个数据，只要说监听之后要做什么，因为其实他是监听了所有数据，随便写 if 哪个满足就是执行，不满足就不会执行

生命周期 ​

https://www.bilibili.com/video/BV14t421M7CL?spm_id_from=333.788.videopod.episodes&vd_source=2074845aa36e291c34caa4671c3b2eda&p=28

组件传值 ​

使用很多

父传子 ​

  1. 父亲声明一个属性

  1. 儿子定义一个属性接收值

子传父 ​

使用 emit

  1. 在子里面定义一个事件

  1. 父里面绑定事件

事件绑定了方法

插槽 slots ​

也是父组件给子组件传值的一种方式，之前传的都是属性，那么像页面模版的传递使用插槽最方便

  1. 子组件里面定义一个插槽

  1. 父组件里面写个页面模版

然后这个页面模版就会替换掉子组件 slots 的位置，实现动态模版

插槽指定默认值 ​

如果父组件没有传递就会使用这个默认值

插槽取名分开传递 ​

这样就可以分开了，不然全部传递了，有些又不需要这个功能

这样就会知传递 title，btn 不会传递了

Vue-Router ​

路由的框架，页面跳转的逻辑

app.vue ​

里面写跳转的页面的地址

创建 views ​

整合 View-Router ​

  1. 安装依赖

npm install vue-router@4
  1. 创建 router

定义路由器

创建路由器

导出路由器

vue 实例使用路由器

使用 router-link 来绑定跳转链接

之前都是使用超链接

路径参数 ​

https://www.bilibili.com/video/BV14t421M7CL?spm_id_from=333.788.player.switch&vd_source=2074845aa36e291c34caa4671c3b2eda&p=34

嵌套路由 ​

https://www.bilibili.com/video/BV14t421M7CL?spm_id_from=333.788.player.switch&vd_source=2074845aa36e291c34caa4671c3b2eda&p=35

编程式导航 ​

https://www.bilibili.com/video/BV14t421M7CL?spm_id_from=333.788.player.switch&vd_source=2074845aa36e291c34caa4671c3b2eda&p=36

useRoute ​

useRouter ​

路由传参 ​

https://www.bilibili.com/video/BV14t421M7CL?spm_id_from=333.788.videopod.episodes&vd_source=2074845aa36e291c34caa4671c3b2eda&p=37

params 参数 ​

query 参数 ​

导航守卫 ​

https://www.bilibili.com/video/BV14t421M7CL?spm_id_from=333.788.videopod.episodes&vd_source=2074845aa36e291c34caa4671c3b2eda&p=38

相当于拦截器

Axios ​

https://www.axios-http.cn/

网络请求库，连接前后端的桥梁，它是基于 promise 写 的还记得 promise 吗，经典的.then 方法

发送请求 ​

https://www.bilibili.com/video/BV14t421M7CL?spm_id_from=333.788.videopod.episodes&vd_source=2074845aa36e291c34caa4671c3b2eda&p=40

实例配置 ​

拦截器 ​

https://www.bilibili.com/video/BV14t421M7CL?spm_id_from=333.788.player.switch&vd_source=2074845aa36e291c34caa4671c3b2eda&p=42

Pinia ​

https://pinia.vuejs.org/zh/introduction.html

状态管理就是保存一些数据在各个组件之间进行共享，就像后端使用的 redis 一样

为什么使用 ​

比如我们有个用户登陆到管理系统，他访问了很多页面，这些页面都需要使用这个用户的信息，那么我们应该如何操作

  1. 第一种就是路由传参通过携带用户信息的参数来获取信息
  2. 第二种就是组件传值，父传子，子传父

但是上面两种方式都太麻烦了

我们使用 pinia 共享数据，哪个组件想要这些数据，直接从 pinia 里面取就可以了

核心概念 ​

案例实现 ​

https://www.bilibili.com/video/BV14t421M7CL?spm_id_from=333.788.player.switch&vd_source=2074845aa36e291c34caa4671c3b2eda&p=44

setup 写法 ​

https://pinia.vuejs.org/zh/introduction.html

推荐，更加灵活

https://www.bilibili.com/video/BV14t421M7CL?spm_id_from=333.788.videopod.episodes&vd_source=2074845aa36e291c34caa4671c3b2eda&p=45

Antd ​

一个组件框架类似于 ElementPlus 库

https://www.antdv.com/docs/vue/introduce-cn

https://www.bilibili.com/video/BV14t421M7CL?spm_id_from=333.788.videopod.episodes&vd_source=2074845aa36e291c34caa4671c3b2eda&p=48

element plus ​

https://element-plus.org/zh-CN/