06 2019 档案
摘要：html-webpack-plugin clean-webpack-plugin 一、html-webpack-plugin 由于打包时生成的css样式文件和js脚本文件会采用hash值作为文件命名的一部分，每一次调试打包结果都需要手动修改名称，这种做法就违背了webpack的自动化打包的初衷，而且
阅读全文
摘要：PostCss是什么？ PostCSS在webpack中的基本应用 一、PostCss是什么？ 如果有深入学习PostCss需求的话可以参考大漠的资料：https://www.w3cplus.com/blog/tags/516.html 大概来说postcss是一个用来处理css的系统程序，它不是c
阅读全文
摘要：webpack抽取CSS文件 CSSTreeShaking 一、webpack抽取CSS文件 抽取CSS文件的插件：mini-css-extract-plugin 详细参考：https://www.npmjs.com/package/mini-css-extract-plugin 但是前提还是需要下
阅读全文
摘要：webpack自身实现词法分析的JSTreeShaking webpack-depp-scope-plugin插件实现作用域分析的JSTreeShaking 一、webpack词法分析的JSTreeShaking示例 示例测试的文件结构： 主入口文件index.js： 依赖文件demo.js:注意依
阅读全文
摘要：安装webpack webpack核心概念：入口、输出、加载器、插件、模块、模式 一、安装webpack 1.安装webpack之前需要安装nodejs环境，在使用nodejs环境自带的包管理工具npm进行下载，由于网络环境问题，建议安装先安装淘宝的镜像cnpm来实现下载。 由于webpack从3版
阅读全文
摘要：less的安装与基本使用 less的语法及特性 一、本地使用less的方法 Less （Leaner Style Sheets 的缩写） 是一门向后兼容的 CSS 扩展语言。是一种动态样式语言，属于css预处理语言的一种。 下载后找到less.js：less.js-2.5.3\dist\less.j
阅读全文
摘要：AMD CMD ES6模块化 各个模块化规范对比理解 一、AMD 在上一篇js模块化入门与commonjs解析与应用中详细的解析了关于commonjs模块化规范，commonjs采用的用同步加载方式，这导致它并不是浏览器理想的模块化规范。因为浏览器需要到服务器加载文件，请求事件远远大于本机读取的时间
阅读全文
摘要：JS模块化的基本原理 commonjs规范 commonjs在前端模块化中的基本使用 AMD与CMD规范剖析博客链接 一、JS模块化基本原理 在JS没有提出来模块化的时候，开发JS项目比较简单，同时也比较杂乱，第一个问题就是全局变量的管理，为了解决这个问题基本上都使用了命名空间和闭包两个主流的解决方
阅读全文
摘要：需求确认 本地开发 构建发布 代码上线 一、项目开发的整体流程 1.1项目经理（PM）提出需求； 1.2项目经理（PM/UI）构建原型与设计图； 1.3开发工程师（FE/BE）前后端分离开发； 1.4测试（QA）代码，通过发布上线； 1.5用户访问。 二、日常开发 2.1基于代码服务器code se
阅读全文
摘要：基本应用 修饰符 为什么要在HTML中使用事件监听 Demo 一、基本应用 1.通过v-on指令绑定事件，例如： <button v-on:click="">提交</button> ； 在vue官方教程上第一个示例是直接在表达式中写入一个可执行计算代码： 2.通过methods实现事件函数绑定，例如
阅读全文
摘要：v-for渲染列表 维护状态 数组变异方法与替换数组 $set、$remove 对象属性实现列表渲染 一、v-for渲染列表 语法：v-for="item in items" 先来看示例： 1 <style> 2 *{ 3 margin: 0; 4 padding: 0; 5 list-style:
阅读全文
摘要：v-if v-show v-else 一、v-if:生成或者移出一个元素 v-if表达式采用boolean值切换元素生成与删除，由于节点生成和删除会有较高的性能消耗，如果需要一次生成和删除多个元素时，可以采用<template>元素作为包装元素，在包装元素上使用v-if指令，最终的渲染结果不会包含包
阅读全文
摘要：对象语法 数组语法 一、对象语法 1.1对象语法绑定HTML Class 语法：v-bind:class="{'className1':boolean1,'className2':boolean2}" 1 <style> 2 div{ 3 width: 100px; 4 height: 100px;
阅读全文
摘要：methods watch computed 关于方法、监听器、计算属性的使用和适应场景 一、methods-方法 在数据渲染是需要基于多个数据时第一种方法，可以采用methods属性中的方法计算返回值来实现，先来看示例： 1 <div id="example">{{describe()}}</di
阅读全文
摘要：vuejs使用及HTML的模板语法，可以实现声明式将DOM绑定至底层VUE实例的数据。通过模板语法将数据渲染进DOM的系统，结合响应系统，在应用状态改变时，Vue能够计算出重新渲染组件的最小代价并应用到DOM操作上。 VUE的模板语法的内容包括：插值、指令。 插值包括：文本插值、原始HTML插值、特
阅读全文
