edit dev.proxyTable option in config/index.js. The dev server is using http-proxy-middleware for proxying 为了解决跨域问题， 通常会使用Jsonp，但是jsonp只能是get请求。或者使用CORS支持，设置Access-Control-Allow-Origin: *0 前置技能 熟悉vue-loader 和 webpack 1 基本配置 编辑confix/index.js文件 dev server使用的是http-proxy-middleware来代理 // config/index.js module.exports = {// ...dev: {proxyTable: {/...
对于Vue.js来说，如果你想要快速开始，那么只需要在你的html中引入一个<script>标签，加上CDN的地址即可。但是，这并不算是一个完整的vue实际应用。在实际应用中，我们必须要一系列的工具，包括：模块化，转译，预处理，热加载，静态检测和自动化测试等。对于一个需要长期维护和大型的项目而言，这些工具是必不可少的，但是尝试配置初始化这些很痛苦.这就是我们发布vue官方提供的脚手架工具的原因，一个简单的构建工具，通过几个默...
技术栈概述ES2015(ES6)大名ES2015，顾名思义是 ECMAScript 在2015年6月正式发布的一套标准。小名ES6，意为ECMAScript第六次变更。（JavaScript 是 ECMAScript 规范的一种实现）。如今已慢慢替代ES5，成为JS主流的开发规范，新增很多语法糖，大大提高开发效率。 webpack一款模块化的构建工具，对ES6的构建更加友好，不详细介绍了。 angular一款MV*框架，本次用的是angular的1.6.4版本，即angular1.x版本中的最高版，也可以看作是2的...
今天接触了webpack，第一次使用webpack进行转码，竟然稀里糊涂就成功了，哈哈。下面附上流程创建个文件夹，初始化一下，首先全局安装webpack npm install webpack --save-dev 然后安装babel npm install --save-dev babel-core babel-preset-es2015 npm install --save-dev babel-loader 在当前文件夹内执行安装，然后创建两个文件夹一个src作为源文件夹，一个bin，保存生成的文件夹的列表在src文件夹内创建一个文件app.js，里面写...
前言 在数据操作时，Lodash 就是我的弹药库，不管遇到多复杂的数据结构都能用一些函数轻松拆解。 ES6 中也新增了诸多新的对象函数，一些简单的项目中 ES6 就足够使用了，但还是会有例外的情况引用了少数的 Lodash 函数。一个完整的 Lodash 库，即使是压缩后，现最新版本也有 71k 的体积。不能为了吃一口饭而买下一个饭店啊。 针对这个问题，其实已经有很多可选方案了。 函数模块 Lodash 中的每个函数在 NPM 都有一个单独的发布模块...
1. 安装webpack npm install webpack --save-dev2. 安装babel 实现 ES6 到 ES5 npm install --save-dev babel-core babel-preset-es20153.安装 babel-loadernpm install --save-dev babel-loaderwebpack.config.js完整配置 module.exports = {entry: ./src/js/app.js,output: {path: ./dest,filename: app.bundle.js,},module: {loaders: [{test: /\.js$/,exclude: /node_modules/,loader: babel-loader,}]},babel: {presets: [es...
关于vue.js vue.js是一套构建用户界面的 轻型的渐进式前端框架。它的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。使用vue可以给你的开发带来极致的编程体验。 关于vue-cli Vue-cli是vue官方提供的一个命令行工具（vue-cli），可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置，带来现代化的前端开发流程。只需一分钟即可启动带热重载、保存时静态检查以及可用于生产环境的构建配置的项目。 疑问...
vue-cli 用vue-cli来搭建vue项目 第一步：全局安装vue-clisudo npm install vue-cli -g 第二步：初始化一个项目 vue init webpack-simple projectName 第三步：把文件切换到初始化的项目中 cd projectName 第四步：安装依赖 npm install 当然也可以用淘宝镜像cnpm来安装，这样快很多 cnpm install 第五步：运行 npm run dev 完成一个初始化vue项目 webpack 要开始一个vue项目， 那也必须要了解webpack webpack是一个前端资源模块化...
前言 在对着产品高举中指怒发心中之愤后，真正能够解决问题的是自身上的改变，有句话说的好：你虽然改变不了全世界，但是你有机会改变你自己。秉承着“不听老人言，吃亏在眼前”的优良作风，我还是决定玩火自焚。 问题所在 之前的项目总结为以下内容： 1、AMD模块规范开发，使用requirejs实现，使用rjs打包，最终导致的结果是，输出的项目臃肿，肿的就像一坨狗不理……不忍直视2、使用gulp进行打包，这一点貌似没有可吐槽的地方，毕...
一、什么是webpack: webpack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。 注意： 目前最新为webpack2.0版本，与1.0有一些出入二、初始化项目 npm initnpm install webpack --save-dev三、安装loader，stylus以及postCss npm install style-loader css-loader stylus-loader stylus --sav...
npm init -y 初始化项目 安装各种依赖项 npm install --save vue 安装vue2.0 npm install --save-dev webpack@^2.1.0-beta.25 webpack-dev-server@^2.1.0-beta.9 安装webpack以及webpack测试服务器，默认安装是1.0版本的，所以必须指定版本号 npm install --save-dev babel-core babel-loader babel-preset-es2015 安装babel，一般的浏览器是不认识es6语法的，babel的作用是将es6的语法编译成浏览器认识的语法 npm install --save-...
1. reduce 方法介绍 1.1 简单场景 reduce 函数的设计意图就是方便进行叠加运算： var arr = [0, 1, 2, 3];// reduce 实现累加 var total = arr.reduce(function (pre, cur){return pre + cur; }, 0);console.log(total); // 6 上述代码中，reduce 方法有两个参数，第一个参数是一个 callback，用于进行计算的函数；第二个参数则是累加计算的初始值: 0reduce 以 0 作为初始值，从数组第 0 项开始累加，上述代码的计算过程如下： to...
1、什么是Webpack WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。 2、为什要使用WebPack 今的很多网页其实可以看做是功能丰富的应用，它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度，前端社区涌现出了很多好的实践方法 a:模块化，让我们可以把复杂的程序细化...
简介 在vue中实现组件化用到了vue特有的文件格式.vue，在每一个.vue文件就是一个组件，在组件中我们将html，css，js全部写入，然后在webpack中配置vue-loader就可以了。 建立vue组件 在src目录下建立components文件夹，并在其中建立app.vue文件，这样我们项目的目录结构如下： |--dist //webpack打包后生成的文件夹 | |--build.js |--node_modules //项目的依赖所在的文件夹 |--src //文件入口 | |--components //组件存放文...
作用直接为项目生成一个或多个HTML文件（HTML文件个数由插件实例的个数决定），并将webpack打包后输出的所有脚本文件自动添加到插件生成的HTML文件中。通过配置，可以将根目录下用户自定义的HTML文件作为插件生成HTML文件的模板。另外，还可以通过向插件传递参数，控制HTML文件的输出。用法：第一步：在项目根目录下http://www.gxlcms.com/php/php-tp-inst安装插件：cnpm install html-webpack-plugin --save-dev第二步：在webpack...