【前端-vue】：ES6模块化&异步编程高级用法、vue3、组件库、axios拦截器、proxy跨域代理 vant 安

vant

安装：

Vue 3 项目，安装最新版 Vant——npm i vant

Vue 2 项目，安装 Vant 2——npm i vant@latest-v2

一、ES6模块化&异步编程高级用法

1.ES6模块化

（1）目的实现模块化统一规范。ES6是浏览器端和服务器端通用的模块化开发规范

编辑

（2）在node.js种体验ES6模块化

编辑

（3）基本语法

编辑

①默认导出——export default

export default { n1 }

默认导入——import from

//从01.js模块当中导入export default向外共享的成员
import m1 from './01.js'

注意：每个模块当中只允许使用一次export default，否则会报错

默认导入时的接收名称可以任意，只要时合法就行

②按需导出——export

export let s1 = '111'
export function say(){}

按需导入——import{ }from '模块标识符'

import{ s1,s2 } from './01.js'

注意：注意区别默认和按需的区别！！！！！

编辑

说明：as重命名例如：import { s1 as s},这就可以重命名了

③直接导入并执行模块中的代码——import '模块路径'

//例如当前文件模块是05.js,此时我们不许哟啊得到模块向外共享的成员
import './05.js'

2.Promise

为了解决回调地狱的问题

（1）回调地狱

多层回调函数的相互嵌套，就形成了回调地狱

缺点：代码耦合性太强，牵一发而动全身，难以维护；大量冗余的代码相互嵌套，可读性变差

（2）Promise

编辑

（3）基于回调函数顺序读取文件内容

编辑

②then-fs的基本使用

编辑

③then（）方法的特性—— 返回一个新的Promise实例对象, 例:

编辑

④通过.catch捕获错误——Promise.prototype.catch方法

//例如：
then.readFile('./01.txt','utf8').catch(err=>{ console.log(err.message)}

说明：当出现错误之后，会找到catch报错，由于从上往下执行，所以报错中间的就不会执行。但是catch后面的代码可以继续执行

⑤Promise.all()方法

编辑

⑥Promise.race()方法

只要任何一个异步操作完成，就立即执行下一步的.then操作编辑

注意：不一定能够是按顺序输出的，也就是说，是看谁执行的快，结果不一定每一次都是1.text的内容

（3）基于Promise封装读文件的方法

编辑

①getFile方法的基本定义

编辑

②获取.then的两个形参

编辑

调用resolve和reject回调函数

//接上图代码
getFile（'./files/1.txt').then((r1)=>{console.log(r1),(err)=>{console.log(err.message)}}
//说明：我们使用定义的getFile方法，返回的是一个Promise实例，所以我们可以.then，r1表示成功，则打印成功结果，err表示失败，则打印失败结果

3.async/await

目的：简化Promise异步操作

编辑

此时，加上了await，r1,r2，r3不再是一个Promise对象，而是文件里面真正的内容。并且注意，如果使用了await，就要加上async

注意事项：

编辑

4.EventLoop

（1）同步任务异步任务

编辑

（2）同步任务和异步任务执行过程

编辑

（3）EventLoop（事件循环）概念

如上图，JavaScript主线程从“任务队列”中读取异步任务的会带哦函数，放到执行栈中依次执行。这个过程不断循环，整个运行机制又称为EventLoop.

5.宏任务和微任务

(1)异步任务又被分为宏任务和微任务

编辑

（2）宏任务和微任务的执行顺序

编辑

二、vue3

1.vue简介

编辑

（2）2、3版本对比

编辑

（3）调试工具

编辑

2.单页面应用程序（SPA）

编辑

可以通过下面的方法进行解决

（3）两种快速创建工程化SPA项目的方式

编辑

3.vite的基本使用

（1）创建vite的项目

编辑

（2）梳理项目结构

编辑

（3）vite项目的运行流程

编辑

4.组件化开发

是指根据封装的思想把页面上可重复使用的部分封装为组件。

好处：提高了前端代码的复用性和灵活性；提高了开发效率和后期的可维护性

（1）组件的template节点

编辑

就是我们不需要有一个大的根节点，去包裹内容了

（2）script中的节点

①name——自定义的组件名称可以清晰地区分每个组件

②data——vue组件渲染期间需要用到的数据，可以定义再data节点当中。data方法中return出去的对象，就是当前组件渲染期间所需要用的数据对象

export default{date() {return {username:'ahhahah',}},}

③methods——组件中的事件处理函数，必须定义到methods节点中

export default{methods:{addCount(){this.count++},},}

(3)style节点

让style支持less语法

编辑

（4）注册全局组件

编辑

②组件注册时名称的大小写

编辑

③：deep()样式穿透(在vue2里面是/deepl/)

编辑

:deep(.title){     }//括号里是我们的选择器

（5）绑定html的css

①以数组绑定

编辑

说明：这里代码的意思是，判断是否isitalic，如果是那么class就变成italic，字体就会变倾斜，如果不是就会为空。按钮点击之后会取反isitalic的值，从而达到改变效果的样子

②以对象绑定

也就是相当于把原来数组里面一个一个的，放到一整个对象当中去

class="对象名称"

对象名称：{这里面就是各个类名}

以对象格式，class与style绑定

编辑

5.props验证

（1）什么是

是指对封装组件时对外界传递过来的props数据进行合法性校验，从而防止数据不合法。

使用数组类型的props节点缺点：无法为每个prop指定具体的数据类型

编辑

（2）对象类型的props节点

使用此类型，可以对每个prop进行数据校验

编辑

（3）多个可能的类型（就是某个个prop的数据类型不唯一）

编辑

（4）必填项

编辑

（5）自定义验证函数

编辑

indexof函数： indexof() 方法用于查找元素在数组中第一次出现时的索引，如果没有，则返回-1。

6.计算属性

计算属性会缓存计算的结果，方法不会。只有计算属性的依赖项发生变化时，才会重新计算。

例如：一直计算的是count，结果只显示，计算属性被执行一次，三次的结果都是2，不会用第一步的结果继续计算得到4.

编辑

7.自定义事件

（1）

在封装组件时，为了让组件的使用者可以监听到组件内状态的变化，此时就需要用到组件的自定义事件

（2）使用步骤

封装组件：

①声明自定义事件——必须在emits节点中声明

编辑

②触发自定义事件——this.$emit('自定义事件的方法')

编辑

使用组件：

③监听自定义事件——v-on

编辑

（3）自定义事件传参

调用this.$emit（）方法触发自定义事件时，可以通过第二个参数为自定义事件传参

8.组件上之间的数据共享

（1）后代关系组件之间的数据共享

是指父节点向其子孙组件共享数据，利用provide和inject实现

①父节点通过provide共享数据

编辑

②子孙节点通过inject接收数据

编辑

（3）父级节点向外共享响应式

编辑

（4）vuex

是终极的组件之间的数据共享方案。适合大范围的频繁地共享数据

编辑

9.vue3全局配置axios

编辑

三、组件库

1.vue组件库

（1）在实际开发中，前端开发者可以把自己封装的.vue组件整理、打包、并发布为npm包

编辑

（2）vue组件和bootstrap的区别

编辑

（3）常用vue组件库

编辑

（4）Element UI

编辑

①安装：在vue2的项目中安装Element-ui——终端输入：npm i element-ui -S

②引入：

a.完整引入

编辑

b.按需引入

编辑

（5）把组件导入和注册封装为独立的模块

编辑

四、axios拦截器

1.拦截器

每次发起ajax请求和得到响应的时候自动被触发

编辑

2.配置请求拦截器

编辑

3.配置响应拦截器

编辑

五、proxy跨域代理

1.通过代理解决接口跨域问题

编辑

2.在项目中配置proxy代理

编辑

注意：devServer.proxy提供的代理功能，仅在开发调试阶段生效；项目上线时，依旧需要API

接口服务器开启CORS跨域资源共享

8.11-8.12学习汇报与总结

1.问题解决

（1）vue-router安装报错

编辑

解决：版本兼容性问题，vue版本才2.6.14，而下载的vue-router为4.1.3版本过高，所以选择安装一个低版本的vue-router

（2）问题：运行资料里面的代码显示报错显示：vue-cli-service' 不是内部或外部命令，也不是可运行的程序

解决：原因是由于在该代码中含有node_module依赖包，再拷贝到其他计算机时，项目路径发生变化，导致找不到vue-cli-service于是报错。所以重新下载npm i,然后再次运行，问题解决

参考：原文章

（3）问题：在拿到的现成现成代码中，想要重新npm i 然后报错

编辑

解决：清空缓存，输入npm cache clear --force,之后再次npm i 正常运行

（4）问题：导入vant组件库之后，运行代码报错

编辑

解决：app——App，名称写错

（5）问题：导入vant库组件之后，运行代码报错：Uncaught TypeError: (0,vue__WEBPACK_IMPORTED_MODULE_2__.createApp) is not a function

编辑

解决：大致搜索一下是版本问题，但是把版本都改低了之后，还是报错。最后，居然发现我安装的是vant2，但是我配置的是vant3，所以报错。最后按照官网vant2配置，运行正常。

（6）问题：通过路由展示对应的tabbar页面报错

编辑

解决：没有在main.js导入index.js.。导入后即可解决

import router from './router/index.js'
new Vue({
  render: h => h(App),
  router ,
}).$mount('#app')

【前端-vue】：ES6模块化&异步编程高级用法、vue3、组件库、axios拦截器、proxy跨域代理