阿乐のBlog - aqingya.cn

阮一峰es6 export指令export基本使用export指令用于导出变量，比如下面的代码：上面的代码还有另外一种写法：导出函数或类上面我们主要是输出变量，也可以输出函数或者输出类上面的代码也可以写成这种形式： export default某些情况下，一个模块中包含某个的功能，我们并不希望给这个功能命名，而且让导入者可以自己来命名这个时候就可以使用export default 我们来到main.js中，这样使用就可以了这里的myFunc是我自己命名的，你可以根据需要命名它对应的名字另外，需要注意： export default在同一个模块中，不允许同时存在多个。 import使用我们使用export指令导出了模块对外提供的接口，下面我们就可以通过import命令来加载对应的这个模块了首先，我们需要在HTML代码中引入两个js文件，并且类型需要设置为module import指令用于导入模块中的内容，比如main.js的代码如果我们希望某个模块中所有的信息都导入，一个个导入显然有些麻烦：通过*可以导入模块中所有的export变量但 ...

ES6之Module语法的简单使用

发表于2020-07-26|ES6|ES6•Module语法| 条评论

一定要使用分号的情况分号不只是语句结尾使用，在某些语法中，具有分隔表达式或语句的作用： for 中的表达式之间： 1for(var i=0;i<10;i++) 同一行使用多个表达式： 12345// example 1var i=0; i++// example 2case 'foo': dosomething(); break 以 [ ( 开头的行，这是一种特殊的风格，用来防止解析器或者压缩工具误认为某行和上面几行在一起解析，造成代码执行结果错误，还有 IIFE（立即执行函数表达式）这种情况： 1234567// example 1;(x||y).doSomething();[a,b,c].forEach(doSomething)// example 2var x = 2;(function(){})()

javascript 分号结尾的问题

发表于2020-07-26|JavaScript|JavaScript•js语法规范| 条评论

认识组件化什么是组件化？如果我们将一个页面中所有的处理逻辑全部放在一起，处理起来就会变得非常复杂，而且不利于后续的管理以及扩展。但如果，我们讲一个页面拆分成一个个小的功能块，每个功能块完成属于自己这部分独立的功能，那么之后整个页面的管理和维护就变得非常容易了。我们将一个完整的页面分成很多个组件。每个组件都用于实现页面的一个功能块。而每一个组件又可以进行细分。 Vue 组件化思想组件化是Vue.js中的重要思想它提供了一种抽象，让我们可以开发出一个个独立可复用的小组件来构造我们的应用。任何的应用都会被抽象成一颗组件树。组件化思想的应用：有了组件化的思想，我们在之后的开发中就要充分的利用它。尽可能的将页面拆分成一个个小的、可复用的组件。这样让我们的代码更加方便组织和管理，并且扩展性也更强注册组件注册组件的基本步骤组件的使用分成三个步骤：创建组件构造器注册组件使用组件。我们来看一个例子：注册组件步骤解析1、Vue.extend()：调用Vue.extend()创建的是一个组件构造器。 &em ...

Vue 组件化开发

发表于2020-07-25|Vue|Vue•Vue组件化开发| 条评论

vue 模板语法官方文档插值操作Mustache语法（常用，牢记）Mustache语法又叫胡子语法，或者双大括号数据都是响应式的。 123456789101112131415161718192021<div id="app"> <h2>{{message}}</h2> <h2>{{message+message}}</h2> <h2>{{m*2}}</h2> <h2>{{firstName+" "+lastName}}</h2> <h2>{{firstName}}{{lastName}}</h2></div><s ...

vue 模板语法

发表于2020-07-20|Vue|Vue•Vue语法| 条评论

目录 VR相关个人站点人工智能优秀网站创意十足图标库在线工具在线简历官方网站数据分析工具炫酷特效社区素材下载视频学习配色方案静态资源库音效素材库 Hove特效 Wordpress 值得收藏电子书网站导航资源下载边学边玩 VR相关站点名称描述标签 VR网站仓库汇集了国外涉及到VR的大部分知名网站 VR、网站导航个人站点站点名称描述标签 10081677wc 字节跳动公司某前端员工的博客博客、字节跳动、前端 @bosslogic 这是一位大神，你在网上看到的 90% 的漫威非官方海报都可能出自他手漫威、海报、instagram Aanad Sharma 用各种wearable记录自己的数据，特效特别酷炫可视化、酷炫、创意 AllenChou博客这位前端开发者的博客都比较基础，而且很多都是总结性质的，很适合给初学者开扩视野博客、前端基础 anjia blog 主要是CSS相关文章，还有JS以及Vue。博客、CSS、JS、Vue Auăleu 风格诡谲暗黑手绘草稿儿一样的网站 ...

总结了一些很实用值得收藏的站点

发表于2020-07-19|稽古振今|工具网站•实用值得收藏的站点| 条评论

webpack 五个核心概念Entry入口(Entry)指示 webpack 以哪个文件为入口起点开始打包，分析构建内部依赖图。 Output输出(Output)指示 webpack 打包后的资源 bundles 输出到哪里去，以及如何命名。 LoaderLoader 让 webpack 能够去处理那些非 JavaScript 文件(webpack 自身只理解JavaScript) Plugins插件(Plugins)可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量等。 Mode模式(Mode)指示 webpack 使用相应模式的配置。选项描述特点 development 会将 DefinePlugin 中 process.env.NODE_ENV 的值设置为 development。启用 NamedChunksPlugin 和NamedModulesPlugin。能让代码本地调试运行的环境 production 会将 DefinePlugin 中 process.env.NODE_ENV 的值设置为 product ...

webpack 五个核心概念

发表于2020-07-17|WebPack|WebPack| 条评论

webpack5此版本重点关注以下内容: 通过持久缓存提高构建性能. 使用更好的算法和默认值来改善长期缓存. 通过更好的树摇和代码生成来改善捆绑包大小. 清除处于怪异状态的内部结构，同时在 v4 中实现功能而不引入任何重大更改. 通过引入重大更改来为将来的功能做准备，以使我们能够尽可能长时间地使用 v5. 下载 npm i webpack@next webpack-cli -D 自动删除 Node.js Polyfills早期，webpack 的目标是允许在浏览器中运行大多数 node.js 模块，但是模块格局发生了变化，许多模块用途现在主要是为前端目的而编写的。webpack <= 4 附带了许多 node.js 核心模块的 polyfill，一旦模块使用任何核心模块（即 crypto 模块），这些模块就会自动应用。尽管这使使用为 node.js 编写的模块变得容易，但它会将这些巨大的 polyfill 添加到包中。在许多情况下，这些 polyfill 是不必要的。 webpack 5 会自动停止填充这些核心模块，并专注于与前端兼容的模块。迁移：尽可能尝试使 ...

webpack5简单介绍

发表于2020-07-17|WebPack|WebPack5| 条评论

webpack详细配置:smile:webpack详细配置之entry123456789101112131415161718192021entry: 入口起点 1. string --> './src/index.js' 单入口打包形成一个chunk。输出一个bundle文件。此时chunk的名称默认是 main 2. array --> ['./src/index.js', './src/add.js'] 多入口所有入口文件最终只会形成一个chunk, 输出出去只有一个bundle文件。 --> 只有在HMR功能中让html热更新生效~ 3. object 多入口有几个入口文件就形成几个chunk，输出几个bundle文件此时chunk的名称是 key --> 特殊用法 { // 所有入口文件最终只会形成一个chunk, ...

webpack详细配置

发表于2020-07-17|WebPack|WebPack| 条评论

Module not found: Error: Can’t resolve ‘XXX’ in ‘XXXX’故障控制台运行webpack/npm时出现 1Module not found: Error: Can't resolve 'XXX' in 'XXXX' 解决方案1npm i XXX --save 重新运行即可如果提示ERROR尝试执行 12npm uninstall XXXnpm i XXX --save

Module not found

发表于2020-07-16|nodeJs|nodeJs•WebPack| 条评论

webpack 性能优化HMR （热模块替换）HMR: hot module replacement 热模块替换 / 模块热替换作用：一个模块发生变化，只会重新打包这一个模块（而不是打包所有模块）极大提升构建速度 1、样式文件：可以使用HMR功能：因为style-loader内部实现了~ 2、js文件：默认不能使用HMR功能 –> 需要修改js代码，添加支持HMR功能的代码 12345678if (module.hot) { // 一旦 module.hot 为true，说明开启了HMR功能。 --> 让HMR功能代码生效 module.hot.accept('./print.js', function() { // 方法会监听 print.js 文件的变化，一旦发生变化，其他模块不会重新打包构建。 // 会执行后面的回调函数 //print(); });} 注意：HMR功能对js的处理，只能处理非入口js文件的其他文件。 3、html文件: ...

webpack 性能优化

发表于2020-07-16|WebPack|WebPack| 条评论

数据库加载中