Webpack

loader承担的是翻译官的职责，利用其弥补了让webpack只能理解JavaScript和JSON文件的问题，从而可以处理其它类型的文件，所以loader对webpack的重要性不言而喻，所以学习构建一个loader是学习webpack的必经之路。在学习编写一个loader之前，要明确一下loader的职责： 其职责是单一的，只需要完成一种转换 。下面将逐步阐述选择loader开发中的几个关键点并实现一个loader。 一、Loader分类 loader是一个CommonJs风格的函数，接收输入的source后可通过同步或异步的方式进行处理，然后将内容进行输出。 1.1 同步Loader 同步loader指的是同步的返回转换后的内容。由于是在Node.js这样的单线程环境，所以转换过程会阻塞整个构建，构建缓慢，不适用于耗时较长的环境中。对于同步loader，主要有两种方法返回转换后的内容：return和this.callback. return 利用return可直接返回转换后结果。 module.exports = function ( source , map, meta){ // ... // output为处理后结果 return output； } this.callback 该方法相比于return更加灵活，其参数主要有四个： this.callback( err:

#vue-cli介绍 vue-cli是一个基于nodeJs、用于快速搭建vue项目的 脚手架。 #vue-cli安装、更新 安装过nodeJs 、cnpm 后，全局安装vue-cli（以后其他项目可直接使用）： npm install -g vue-cli 查看安装成功否 vue -V #vue-cli 使用 安装过webpack 、vue-cli后，可以开始搭建vue项目： vue init webpack <Project Name> # vue init webpack demo #一直回车直到 #是否要安装 vue-router 项目中肯定要使用到 所以 y 回车 #是否需要 js 语法检测 目前我们不需要 所以 n 回车 #是否安装 单元测试工具 目前我们不需要 所以 n 回车 #是否需要 端到端测试工具 目前我们不需要 所以 n 回车 #等待完成 或者 接下来 ctr+c 结束 #进入 cd demo cd demo #执行 npm install npm install #接下来执行 npm run dev npm run dev #默认浏览器会自动打开 #注意：如果您的浏览器是ie9以下的版本，请升级浏览器到最新版本或者下载谷歌浏览器或者火狐浏览器进行预览。在地址栏输入 http://localhost:8080/#/进行访问 来源： oschina 链接：

lodash提供了很多可用的方法供我们使用，绝对是一个很好用且用起来得心应手的工具库。但是同时，lodash的体积也不小，我们项目中使用的大概522K，可能只是使用了几个方法，但是却把整个lodash库引入了。为了吃几条鱼，就承包了整个鱼塘，代价有点大呀！ 对于这个问题，有几种方案可供选择。 一.引入单个函数 　lodash整个安装完之后，引用方式： lodash/function 格式，单独引入某个函数，如 let _trim= require('lodash/trim') 或者 import trim from 'lodash/trim' 　或者 lodash 中的每个函数在 NPM 都有一个单独的发布模块，单独安装并引用部分模块，然后按以下方式引用 let _trim= require('lodash.trim') 或者 import trim from 'lodash.trim' trim(' 123123 ') 二.借助 lodash-webpack-plugin，babel-plugin-lodash插件优化 　 　使用上述两种方式，在使用较多个lodash中方法的情况下，不太美观，且并不方便。那么我们可以借助于lodash-webpack-plugin，去除未引入的模块，需要和babel-plugin-lodash插件配合使用。类似于webpack的tree

Vue.js环境搭建-Windows版 步骤一：安装node.js 在搭建vue的开发环境之前，需要先下载node.js，vue的运行是要依赖于node的npm的管理工具来实现，node可以在官网或者中文网里面下载，根据自己的电脑选择是32还是64 ， 网址1： http://nodejs.cn/download/ 网址2： https://nodejs.org/dist/ 为了成员之间统一版本，我们使用的 node-v8.9.1 版本：（安装到自己的自定义目录） 链接：https://pan.baidu.com/s/18N4k1Dxdl2TGbWs9Ayn2yw 提取码：n431 步骤二：安装镜像 由于 npm install安装速度慢，所以本文使用阿里淘宝镜像及其命令 cnpm进行安装，cmd黑窗口输入命令： npm install -g cnpm --registry=https: // registry.npm.taobao.org 步骤三：安装Vue 输入：cnpm install vue ，回车等待终端给出响应。 步骤四：安装全局vue-cli脚手架 输入： cnpm install --global vue-cli,安装全局vue-cli脚手架，用于快速搭建大型单页应用。 步骤五：检查Vue是否安装成功 输入： vue -V检查是否安装成功

1.vue模板加载顺序 computed：例如分页的配置； created：dom加载前一般用来生成dom mounted：dom加载后用来覆盖渲染或者基于dom的操作 2.关于this指向的问题 通常的做法是在方法内部定义一个变量： let _this = this 也可以按照es6的写法： iter(){ this .list.map((v, k) => { if (k === this .idx) { this .current = v console.log( this .current) } }) } 3.资源引入 多种方式方法：可以通过标签直接引入，也可以import引入； 此处多出现的问题是静态资源的加载会影响打包后的效果，导致加载失败： 改变本地配置路径： 在 config文件夹下的index.js中修改 assetsPublicPath: './' 打开 webpack.prod.conf.js 找到 output ： 增加 publicPath: './' , 即可， 还有可能是在css中的背景 静态背景图片加载失败处理： 只需要在 build/utils.js 文件中添加如下一行代码即可。 今天就先分享这些，有疑问的伙伴可以留言 来源： oschina 链接： https://my.oschina.net/u/4312488/blog/3297972

前提工作-安装并配置好以下环境： 1、安装node 　　2、安装git 1、初始化项目 vue init webpack vue- elementui npm run dev 2、安装element npm i element-ui -S 3、引入element 　　 3.1：在main.js中引入elementUI import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI) 4、测试 　　4.1：新建xxx.vue文件，复制一段elementUI的代码(你也可以去element网站里复制一份代码) <el- menu : default -active="activeIndex2" class ="el-menu-demo" mode ="horizontal" @select ="handleSelect" background -color="#545c64" text -color="#fff" active -text-color="#ffd04b"> <el-menu-item index="1">处理中心</el-menu-item> <el-submenu index="2"> <template slot="title"