QuantumYou的博客

永远相信美好的事即将发生 !文章目录Webpackwebpack 基本使用创建项目目录并初始化创建首页及js文件安装jQuery导入jQuery安装配置webpack配置打包的入口与出口默认打包方式配置打包方式配置自动打包功能配置html-webpack-plugin配置自动打开浏览器页面Webpack 加载器css 打包器less 打包器配置 postCSS 自动添加 css 的兼容前缀打包样式表中的图片和字体文件打包处理JS中高级语法Webpackwebpack 打包示意图往期参.

模块化的分类浏览器端的模块化1.AMD(Asynchronous Module Definition,异步模块定义)代表产品为：Require.js2.CMD(Common Module Definition,通用模块定义)代表产品为：Sea.js服务器端的模块化服务器端的模块化规范是使用CommonJS规范：1、使用require引入其他模块或者包2、使用exports或者module.exports导出模块成员3、一个文件就是一个模块，都拥有独立的作用域ES6模块化ES6模块化规

路由概念基知介绍1、路由的本质就是一种对应关系，url地址和真实的资源之间就有一种对应的关系，就是路由。2、路由分为前端路由与后端路由3、Ajax前端渲染（前端渲染提高性能，但是不支持浏览器的前进后退操作）4、SPA（ Single Page Application）单页面应用程序：整个网站只有一个页面，内容的变化通过Ajax局部更新实现、同时支持浏览器地址栏的前进和后退操作。5、SPA实现原理之一：基于URL地址的hash（hash的变化会导致浏览器记录访问历史的变化、但是hash的变化不会触

axios 介绍Github跳转地址基于promise用于浏览器和node.js的http客户端支持浏览器和node.js支持promise能拦截请求和响应自动转换JSON数据能转换请求和响应数据注意：拿到 ret 是一个对象 所有的对象都存在 ret 的data 属性里面 axios.get('http://localhost:3000/adata').then(function(ret){ // 注意data属性是固定的用法，用于获取后台的实际数据

FetchFetch API是新的ajax解决方案 Fetch会返回Promisefetch不是ajax的进一步封装，而是原生js，没有使用XMLHttpRequest对象。fetch(url, options).then(）, 第一个参数请求的路径 Fetch会返回Promise ,使用then 拿到请求成功的结果text() 方法使用text() 方法属于fetchAPI的一部分，它返回一个Promise实例对象，用于获取后台返回的数据 <script type="t

URL 地址格式传统形式schema:// host:port / path ? query # fragment schema : 协议 http ftphost : 域名或 IP 地址port : 端口 默认为 80path ： 路径 abc/lzh/ (虚拟 用于区分资源)query : 查询参数 uname=list&age = 12fragment : 锚点 （哈希 Hash） 用于定位页面位置Restful 形式Http 请求方式GET

Vue routerVue router是Vue.js官方的路由管理器。它和Vue.js的核心深度集成,使构建单页面应用简化。包含的功能：（1）嵌套的路由/视图表（2）模块化的、基于组件的路由配置（3）路由参数、查询、通配符（4）基于Vues过渡系统的视图过渡效果（5）细粒度的导航控制（6）带有自动激活的 CSS class的链接（7）HTML5历史模式或hash模式，在IE9中自动降级（8）自定义的滚动条行为安装cnpm install vue-router --save-dev

Vue-clivue-cli官方提供脚手架，用于快速生成一个vue的项目模板，预先定义好的目录结构及基础代码。类比创建 Maven项目时可以选择创建一个骨架项目（脚手架）主要的功能（1）统一的目录结构（2）本地调试（3）热部署（4）单元测试（5）集成打包上线安装环境优化安装 Node. js淘宝镜像加速器（cnpm）全局安装npm install cnpm或使用如下语句解决npm速度慢的问题npm install --registry=https//registry.np

网络通信Axios是一个开源的可以用在浏览器端和Node.js的异步通信框架，主要作用就是实现AJAⅩ异步通信。功能特点：（1）从浏览器中创建 XmlHttpRequests（2）从node.js创建http请求（3）支持 Promise API (JS中链式编程)（4）拦截请求和响应（5）转换请求数据和响应数据（6）取消请求（7）自动转换JSON数据（8）客户端支持防御XSRF（跨站请求伪造）Github：https：//github.com/axios/axios中文文档：htt

Vue 引入Soc (Separation of concerns): 关注点分离原则HTML + CSS + JS 视图：呈现给用户，刷新后台数据参考链接网络通信： axios页面跳转： vue-router状态管理： vuexVue-UI : ICE跳转链接CSS预处理拓展基本思想用一种专门的编程语言，为CSS增加编程的特性，将CSS作为目标生成文件，然后开发者就只要使用这种语言进行CSS的编码工作。用一种专门的编程语言，进行Web页面样式设计，再通过编译器转化为正常