m0_61631823的博客

1.定义：分包指的是把一个完整的小程序项目，按照需求划分为不同的子包，在构建时打包成不同的分包，用户在使用时按需进行加载。2. 分包的好处：对小程序进行分包的好处主要有以下两点：可以优化小程序首次启动的下载时间在多团队共同开发时可以更好的解耦协作3.分包前与分包后的区别分包前：程序项目中所有的页面和资源都被打包到了一起，导致整个项目体积过大，影响小程序首次启动的下载时间。分包后：小程序项目由 1 个主包 + 多个分包组成：主包：一般只包含项目的启动页面..

1. 定义：全局数据共享（又叫做：状态管理）是为了解决组件之间数据共享的问题。开发中常用的全局数据共享方案有：Vuex、Redux、MobX 等。而我们微信小程序常用的全局共享方案是：MobX我们可以通过上面这张图清除的看到，如果不使用MobX全局数据共享的话，如果需要调用某个组件，则需要一层一层调用，如果定义了全局数据共享，那么可以直接拿到数据，不需要一层一层调用2.全局数据共享的具体方案在小程序中，可使用 mobx-miniprogram 配合 mobx-miniprogram-bin.

1.执行过程：①同步任务由JavaScript主线程次序执行②异步任务委托给宿主环境执行③已完成的异步任务对应的回调函数会被加入到任务队列中等待执行④JavaScript主线程的执行栈被清空后，会读取任务队列中的回调函数，次序执行⑤JavaScript主线程不断重复上面的第四步2.EventLoop（事件循环）：JavaScript主线程从“任务队列”中读取异步任务的回调函数，放到执行栈中依次执行这个过程是循环的，所以整个机制称为：EventLoop3.例题（经典面试题）i

两种导航方式：声明式导航、编程式导航1.声明式导航：点击链接实现导航的方式，例如：<a></a>、<router-link></router-link>等等2.编程式导航：①this.$router.push('hash地址')跳转至指定hash地址，并增加一条历史记录②this.$route.replace('hash地址')跳转到指定的hash地址，并替代当前的历史记录③this.$route.go(数值n)可以在浏览历史中

1.前端路由工作原理：①用户点击了页面上的路由链接②导致了URL地址栏中的Hash值发生了变化③前端路由监听到了到Hash地址的变化④前端路由把把当前Hash地址对应的组件渲染到浏览器2.路由的安装以及配置①在终端中输入下面命令：npm i vue-router@3.5.2 -S②在src源代码目录下新建router/index.js路由模块，并初始化如下代码：//1/导入Vue和VueRouter的包import Vue from "vue";import Vu

1.vue中的自定义指令包括：私有自定义指令、全局自定义指令2.私有自定义指令：在每个vue组件中，可以在directive节点下声明私有指令，示例：//定义：directives:{ color:{ //color是自定义的，在组件标签中填写相对应的名称 bind(el){ //存在一个对象，写法：bind(el,binding)，el代表当前指令所绑定到那个DOM对象 el.style.color='r

1.概念：插槽是vue为组件的封装者提供的能力，允许开发者在封装组件时，把不确定的，希望由用户指定的部分定义为插槽2.声明、使用：//在Left组件中<template> <div> <slot></slot> </div></template>//在App组件中<template> <div> <Left>

1.在vue的实例中，提供了一个内置的<component>组件，专门用来实现动态组件的渲染，可以使组件在使用时不必写死。具体用法：//以在App组件中使用Left组件为例//1.原来的组件使用，直接在App的<template></template>中以标签形式使用<template> <Left></Left></template>//2.使用动态组件后，改为下面所示<template&

1.ref引用：用来辅助开发者在不依赖于jQuery的情况下，获取DOM元素或组件的引用，每个 vue 的组件实例上，都包含一个 $refs 对象，里面存储着对应的 DOM 元素或组件的引用。默认情况下， 组件的 $refs 指向一个空对象2.使用ref引用页面上的DOM元素，则可以按照如下的方式进行操作：//使用ref属性，为对应的DOM添加引用名称<h3 ref="myh3">MyRef 组件</h3><button @click="getRef">获取

组件间的数据共享方式较为常用的有父子关系，以及兄弟关系①父组件向子组件传输数据：需要属于自定义属性首先在子组件中通过props定义一个自定义的属性，然后在父组件中引用，如下面代码：//父组件<Son :msg="message" :user="userinfo"></Son>data(){ return { message: 'hello vue.js', userinfo:{ name:'zs',age:20} }

在运行vue项目中，其生命周期可分为三个阶段，具体如下图所示：其生命周期图示为，具体每个函数已给出注释：当然也可以通过官网进行查看，官方网址：https://cn.vuejs.org/v2/guide/instance.html#...

1.样式冲突问题：默认情况下，写在vue组件中的样式会全局生效，因此很容易造成多个组件之间样式冲突问题2.造成的原因：①单页面应用程序中，所有组件的DOM结构都是基于唯一的index.html页面进行呈现的②每个组件中的样式都会影响整个index.html页面中的DOM元素3.解决办法：在style标签中加上一个scoped属性，它可以自动给样式标签生成自定义属性用法：<style lang="less" scoped></style>4.deep属性：

1.这是一个自定义属性，在封装通用组件的时候，合理地使用props可以极大的提高组件的复用性2.语法：可以定义为数组类型的：export default { props:['init']}也可以定义为对象类型：export default { // props 是"自定义属性"，允许使用者通过自定义属性，为当前组件指定初始值 // 自定义属性的名字，是封装者自定义的（只要名称合法即可） // props 中的数据，可以直接在模板结构中被使用 // 注意：pro

1.项目中包含node_modules文件：这是系统配置好的文件、public文件：包含一个html页面，用于接收渲染、以及最重要的src文件：该文件中包含main.js、components、App.vue等文件2.vue项目运行流程：在项目中，vue要做的事是通过main.js把App.vue渲染到index.html的指定区域，其中App.vue用来编写待渲染的模板结构、index.html中需要预留一个el区域、main.js把App.vue渲染到了index.html所预留的区域中3.Vu

1.概念：cli是Vue.js开发的标准工具，简化了程序员基于webpack创建工程化的vue项目的过程2.安装：在终端中运行：npm install -g @vue/cli安装成功后可以在终端中通过：vue -V查看，若如下图一样可以显示版本号，则说明安装成功3.项目创建①在C盘或者D盘中创建一个文件夹，（最好用全英文），然后在该文件下打开终端(注：一定要保证创建的项目是在你创建的文件夹里面)，运行以下指令：vue create "你要创建项目的名字（最好用英文）".

axios:是一个专注于网络请求的库1.有“GET”方式和“POST”方式①发送“GET”请求axios({ // 请求方式 method: 'GET', // 请求的地址 url: 'http://www.liulongbin.top:3006/api/getbooks', // URL 中的查询参数 params: { id: 1 }}).then(function (result) { console.log(result)})②发送“PO

一、侦听器1.watch侦听器允许开发者监视数据的变化，从而针对数据的变化做特定的操作2.语法：方法格式侦听器定义： const vm = new Vue({ el: '#app', data: { username: 'admin' }, // 所有的侦听器，都应该被定义到 watch 节点下 watch: { // 侦听器本质上是一个函数，要监视哪个数据的变化，就把数据名作为方法名即可

1.过滤器是vue为开发者提供的功能，常用于文本的格式化，过滤器可以用在两个地方：插值表达式和v-bind属性绑定2.过滤器只适用于vue2.0,在3.0中不适用3.过滤器应该被添加在JavaScript表达式的尾部，由管道符“|”进行调用4.过滤器的声明:const vm = new Vue({ el: '#app', filters: { // 注意：过滤器函数形参中的 val，永远都是“管道符”前面的那个值 capi(val)

vue的基础语法中有六大类指令，分别为：内容渲染指令、属性绑定指令、事件绑定指令、双向绑定指令、条件渲染指令、列表渲染指令1.内容渲染指令：常用的有三个v-text:直接跟在元素后面，例如<p v-text="username"></p>,username是指参数，需要在vue实例中data中定义。这个指令有一个缺点，如果p标签中有内容，但在vue实例中又定义了，就会将原来的内容覆盖{{ }}: 插值表达式，在实际开发中运用最多，它是一个内容占位符，不会覆盖原有拥有的内容

1.概念：vue是一套用于构建用户界面的前端框架2.vue两个特征：①数据驱动视图 ②双向数据绑定3.MVVM原理：①M：Model ; V: View ; VM:ViewModel②它是vue实现数据驱动视图和双向数据绑定的核心原理③Model:表示当前页面渲染时所依赖的数据源；View:表示当前页面所渲染的DOM结构；ViewModel:表示vue的实例，它是MVVM的核心4.vue基础用法：①首先导入vue文件②创建vue的实例对象如下图：<div

引子：当我们在终端中运行npm run dev时，如果代码出现问题报错时， 我们通过控制台看到的错误是在代码压缩后的，而不是源代码的错误，具体如下图：可以看出， 我们在源代码中故意写错console，然后运行后报错，但是这个报错行数显示的是13行，而我们源代码确是在第八行，所以就会出现错误行数不匹配的结果，所以我们引出Source Map概念。概念：Source Map就是一个信息文件，里面存储着位置信息，也就是说Source Map文件中存储着压缩、混淆后的代码，所对应的转换前的位置，

当我们项目开发完成后，需要发布上线，而我们通过webpack-dev-server的插件打包的文件是存在于内存上的，物理磁盘上并不存在，所以我们需要将内存中的项目复制一份到物理磁盘上。方法：在package.json文件中的scripts中添加以下代码："bulid":"webpack --mode production"然后在终端中运行：npm run build注意：我们在项目开发阶段运行的是：npm run dev,这个只能将项目打包在内存中;当项目完成时，需要发布时，我们就运

webpack在对项目进行打包时，默认是只能识别后缀名为.js的文件，而且对于js中的一些高级语法也无法进行打包和处理，要想处理如css,less等后缀名文件，我们就要用到loader（加载器）了，目前使用较多的loader有以下几种：1.打包处理.css文件① 首先在终端中运行:npm i style-loader@3.0.0 css-loader@5.2.6 -D安装处理.css文件的loader②在webpack.config,js的module->rules数组中，添

loader（加载器）的调用过程如下（以处理.css文件为例）：1.webpack 默认只能打包处理.js文件，处理不了其它后缀的文件2.由于前端项目中包含了其它后缀文件，当处理不了这些文件时，会查找webpack.config.js这个配置文件，看module.rules数组中，是否配置了对应的loader加载器3.webpack把.css文件先转交给最后一个loader进行处理（转交给css-loader）4.当css-loader处理完毕后，会把处理结果转交下一个loader(转交给s

webpack实现自动打包，实时更新插件

一、webpack介绍1.概念：webpack是前端项目工程化的具体解决方案2.功能：提供友好的前端模块化开发的支持，以及代码压缩混淆、处理浏览器JavaScript的兼容性，性能优化等强大功能3.好处：让程序员把工作的重心放到具体功能的实现上，提高了前端开发效率和项目的可维护性二、webpack使用1.安装：在要运行的根目录下打开终端，然后输入以下命令：npm install webpack@5.42.1 webpack-cli@4.7.2 -D2.项目中配置：主要分为三步

margin是指盒子之间的距离，而padding是指盒子内的距离，通常有left、right、top、bottom属性二者的使用：margin可以分别单独与left、right、top、bottom使用，如margin-left,margin-right，margin-top，margin-bottom；其后面可以跟具体的值，单位为px,也可以跟百分比。当然也有简单的写法：margin后面可以跟一个值，两个值，三个值，以及四个值，当跟四个值时：例如margin : 0px 10px 20px

css中对盒子的定位四种，分别是默认定位（static），相对定位（relative），固定定位（fixed），以及绝对定位（absolute）。static是元素的默认定位，当position属性的取值为static时，可以将元素定位于静态位置。所谓的静态位置就是各个元素在HTML文档流中默认的位置relative是将元素相对于它在标准文档流中的位置进行定位，当设置为相对定位后，可以通过边偏移属性来改变元素的位置，但它在文档流中的位置仍然保留absolute是将元素依据最近的已经定位的父元素进