qq_38888512的博客

编写vue组件的时候莫名报了下面的警告:[Vue warn]: Extraneous non-props attributes (border, style) were passed to component but could not be automatically inherited because component renders fragment or text root nodes.at xxxx(发生问题的组件位置)at ...解决：在自定义组件上添加了border、style属性

提升webpack性能优化无非从两个方面入手：1.如何构建速度2.如何优化打包后的文件如何构建速度webpack构建的过程，其实是把，从入口开始，通过AST语法树分析，把所有依赖的模块，结合loader和plugin，都进行内容转换，合并在一起，最终输出打包文件的过程。所以，要提高构建速度，就要减少不必要的模块依赖，和loader、plugin的使用...

ES6的模块化使用import导入模块，使用webpack打包的时候，webpack会把所有通过import导入的模块，代码打包到bundle里面。示例：import _ from 'lodash-es'var arr = [1,2,3,4]console.log('webpackJsonp',webpackJsonp)setTimeout(()=>{ console.log("_",_.chunk(arr,2))},5000)//输出结果//webpackJsonp [Ar

postcss是一个依赖postcss插件处理css工程化问题如:编译未来css语法和css预编译语法为浏览器能兼容和识别的css语法的工具。安装postcss和其命令行工具、预设：npm i -D postcss postcss-cli postcss-preset-envpostcss-cli是专门调用postcss库api的工具，postcss-preset-env是集成了postcss大部分常用插件，安装此预设等于安装了precss、autoprefixer等一系列插件。构建语法：..

介绍LESS以类似编程语言形式去书写CSS代码，可以解决下列的问题：重复的样式值：例如基本的颜色、常用长度宽度大小等重复的CSS代码段：例如浮动和清除浮动代码大多数地方是一致的重复的嵌套书写：利用各种选择器选择元素的重复难以阅读的嵌套书写原理LESS本身是一个预编译器，使用LESS语法的代码，浏览器是不能识别的，需要通过LESS预编译器编译成.css文件才能正常使用。安装这里我选择开发环境安装。npm i less --save-dev编译命令npx lessc 【需要编译的

webpack-dev-server的作用webpack-dev-server为你提供了一个简单的 web 服务器，并且能够实时重新加载修改的内容。安装：npm install --save-dev webpack-dev-serverwebpack.config.jsmodule.exports = {+ devServer: {+ contentBase: './dist'+ },};package.json"scripts": {+ ...

html-webpack-plugin的作用html-webpack-plugin的主要作用就是在webpack构建后生成html文件，同时把构建好入口js文件引入到生成的html文件中。安装html-webpack-pluginWebpack 5 npm i --save-dev html-webpack-plugin yarn add --dev html-webpack-pluginWebpack 4 npm i --save-dev html-webp

CSS存在的问题一、类名冲突当一个项目的模块和界面变动越来越丰富的时候，命名一个css类名难度越来越大，因为新的类名很可能会在其他模块存在，但是我们并没发现，这样的情况下，会导致类名冲突，从而所写的样式会影响到其他模块。一般这样的情况下我们都会选择通过css选择器或者层级来选择样式，保证不会影响到其他模块，但是这样依然会有影响其他模块的风险，同时通过选择器和层级来选择的元素往往要写很长一段css选择的代码，这样很不容易阅读，并且难以维护和修改。二、样式或属性值重复在一个网站里面，相同的样式和

目录Babel 是什么？Babel安装命令行工具和核心库安装安装和配置预设构建配置兼容的浏览器在webpack中使用babelBabel 是什么？babel可以认为是一个javascript的翻译工具。ECMAScript迄今为止，已经更新很多个版本了。而旧浏览器并不一定支持新版本的ECMAScript的标准。例如ES6的许多语法和API在旧版本的ie中就不支持，因此为了所写代码的兼容性，Babel就可以把新版本的代码翻译成旧浏览器也能识别的语法。Babel安装.

目录浏览器的组成预编译事件循环JS的事件循环（eventloop）是怎么运作的?尾调用尾递归尾递归(尾调用)优化浏览器的组成1.User Interface（用户界面）－包括地址栏、后退/前进按钮、书签目录等，也就是你-所看到的除了页面显示窗口之外的其他部分2.Browser engine（浏览器引擎）－可以在用户界面和渲染引擎之间传送指令或在客户端本地缓存中读写数据等，是浏览器中各个部分之间相互通信的核心3.Rendering engine（渲染引擎）－解析DO

现在有一个大概需要6分钟才返回结果的接口，查看axios官方文档默认是1000毫秒，于是我改成了30分钟：const http = axios.create({ timeout: 30 * 60 * 1000, headers: { 'Content-Type': 'application/json', 'X-Requested-With': 'XMLHttpRequest' }})但是在请求接口的时候，2分钟或者4分钟就断开了：通过查资料

描述字符描述字符分为普通字符和元字符。用于描述正则匹配规则的内容。普通字符即是数字字母和常用符号，用以描述自身。元字符具有代表一类字符的特殊字符。普通字符 var str = 'ac10_' var r = /ac/g console.log(str.match(r)) //["ac"] //在r表示的正则表达式中ac为特殊字符，只能匹配str字符串中的ac字符。元字符 // . ：查找单个字符，除了换行和行结束符 var str = 'aZ1_?#

webpack loader的作用为：在webpack读取文件之后，loader会对匹配到的文件内容进行处理加工，最后给webpack进行下一步编译和构建。当然也可以在loader函数内部做一切node环境支持的事情，例如文件操作，业务逻辑处理等webpack的loader使用在编译之前，读取文件之后。上图：以项目为案例：目录结构如下：// 构建前的项目目录loader-test|-loaders |-a.js |-b.js |-c.js|-src |-index.js|-n

在webpack的配置文件中，有两个关于入口和出口的配置分别问entry和output。entry的值是代表生成chunk的入口地址，而output的值是把chunk输出成文件的路径。entry//webpack.config.js//写法1：module.exports = { entry:'./src/index.js'}//写法2：module.exports = { entry:{ mychunk:'./src/index.js', .

初始化根目录：npm init然后一路按回车，为了方便生成packge.json的文件，为后续方便配置使用的webpack命令。安装：npm i -D webpack webpack-cliwebpack仅在开发阶段使用，所以安装的时候加上-D参数，只作为开发阶段的依赖。打包构建：npx webpackwebpack的默认入口文件为根目录的./src/index.js文件，出口文件为根目录的./dist/,打包好的文件都会放着这个目录下边。如果要修改入口和出口的目录可以在根目录新建一

javascript在浏览器端步入模块化时代以后，产生了下列的问题：性能和效率的问题。由于模块化的出现，致使需要功能模块被细分，从而导致js文件变多(依赖变多)。进而，当引入一个完整的功能模块的时候，浏览器会加载更多的js文件。浏览器加载js文件是通过网络请求的方式的获取的，如果一个模块的依赖很多的话，就会发生很多的网络请求去获取js文件，导致了多余的网络开销，间接的影响了性能。 兼容性问题。浏览器目前的模块化标准只支持ES6，AMD,CMD，并不支持commonJS的模块化标准，进而导致使用comm

javascript模块技术是让javascript这门语言通往工程化和编写大型应用的一块敲门砖，因为它彻底解决了js文件依赖混乱和全局变量污染的问题。什么是依赖混乱？ 现在2个js文件：// a.jsvar a1 = function(){ // active code }var a2 = function(){ // active code }// b.jsvar b1 = function(){ // active code }v..

vue的logo就可以看作是一个有边框的三角形。以画一个vue的logo为例子: <div> <div id="vue-logo"> <div class="green"> <div class="gray"> <div class="white"></div> </div>

以简单的树形组件为案例，实现在组件中递归组件。App.vue组件:<template> <div class="main"> <tree :list = "list" /> </div></template><script>import tree from "./tree";export default { components: { tree }, data() { return

图解先上一副官网的生命周期图，稍微补充了点说明。在不同的生命周期函数中执行代码：const vm = new Vue({ el:"#app", methods:{ myfn:function(){ this.a = this.val } }, data:{ a:'a', b:'b', val:"" }, wat