npm

初学者学习vue开发，想把前端项目中导出Excel表格，查了众多帖子，踩了很多坑，拿出来与大家分享一下经验。 安装依赖 1 // npm 2 npm install file-saver - S 3 npm install xlsx - S 4 npm install -D script-loader 导入两个JS文件 Blob.js和Export2Excel.js 在src目录下新建vendor文件夹 （文件名最好别改，否则你会有无穷无尽的麻烦，大神除外！） ，里面放入Blob.js和Export2Excel.js两个JS文件。目录大概是这样的： 案说法 在main.js中引入两个包 import Blob from './vendor/Blob' import Export2Excel from './vendor/Export2Excel.js' 修改Export2Excel.js 不好说，上图： 主要把路径修改到你自己文件的位置 在你要导出文件的这个vue页面中写2个方法 export2Excel(){ require.ensure([], () => { const { export_json_to_excel } = require('./vendor/Export2Excel' ); // 头 const tHeader = [ '时间', '地址', '姓名' ];

深入学习rollup来进行打包 阅读目录 一：什么是Rollup? 二：如何使用Rollup来处理并打包JS文件？ 三：设置Babel来使旧浏览器也支持ES6的代码 四：添加一个debug包来记录日志 五：添加插件来替代环境变量 六：添加 UglifyJS来压缩我们js的代码 七：监听文件变化的插件 --- rollup-watch 八：开启本地服务的插件 --- rollup-plugin-serve 九：实时刷新页面 --- rollup-plugin-livereload 十. 安装同时运行watcher 和 Livereload的工具 十一. rollup+PostCSS打包样式文件并添加 LiveReload 回到顶部 一：什么是Rollup? rollup是一款用来es6模块打包代码的构建工具(支持css和js打包)。当我们使用ES6模块编写应用或者库时，它可以打包成一个单独文件提供浏览器和Node.js来使用。 它的优点有如下 ： 1. 能组合我们的脚本文件。 2. 移除未使用的代码(仅仅使用ES6语法中)。 3. 在浏览器中支持使用 Node modules。 4. 压缩文件代码使文件大小尽可能最小化。 Rollup最主要的优点是 它是基于ES2015模块的，相比于webpack或Browserify所使用的CommonJS模块更加有效率

rollup是什么 Rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码，例如 library 或应用程序，对代码模块采用es6格式 特性 tree shaking Rollup静态分析代码中的import，并将排除任何未实际使用的代码，使得不会增加额外的依赖或使项目的大小膨胀。 并且，这种基于显式的 import 和 export 语句的方式，它远比「在编译后的输出代码中，简单地运行自动 minifier 检测未使用的变量」更有效 导入 CommonJS(Importing CommonJS) 通过插件导入已存在的commonJS模块 发布 ES6 模块(Publishing ES6 Modules) 为了确保你的 ES6 模块可以直接与「运行在 CommonJS（例如 Node.js 和 webpack）中的工具(tool)」使用，你可以使用 Rollup 编译为 UMD 或 CommonJS 格式，然后在 package.json 文件的 main 属性中指向当前编译的版本。如果你的 package.json 也具有 module 字段，像 Rollup 和 webpack 2 这样的 ES6 感知工具(ES6-aware tools)将会直接导入 ES6 模块版本。 安装rollup 全局 npm install -g rollup

前言 这篇文章是【前端词典】系列文章的第 13 篇文章，接下的 9 篇我会围绕着 Vue 展开，希望这 9 篇文章可以使大家加深对 Vue 的了解。当然这些文章的前提是默认你对 Vue 有一定的基础。如果一点基础都没有，建议先看官方文档。 第一篇文章我会结合 Vue 和 Vuex 的部分源码，来说明 Vuex 注入 Vue 生命周期的过程。 说到源码，其实没有想象的那么难。也和我们平时写业务代码差不多，都是方法的调用。但是源码的调用树会复杂很多。 为何使用 Vuex 使用 Vue 我们就不可避免的会遇到组件间共享的数据或状态。应用的业务代码逐渐复杂，props、事件、事件总线等通信的方式的弊端就会愈发明显。这个时候我们就需要 Vuex 。Vuex 是一个专门为 Vue 设计的状态管理工具。 状态管理是 Vue 组件解耦的重要手段。 它借鉴了 Flux、redux 的基本思想，将状态抽离到全局，形成一个 Store。 Vuex 不限制你的代码结构，但需要遵守一些规则： 应用层级的状态应该集中到单个 store 对象中 提交 mutation 是更改状态的唯一方法，并且这个过程是同步的 异步逻辑都应该封装到 action 里面 Vuex 注入 Vue 生命周期的过程 我们在安装插件的时候，总会像下面一样用 Vue.use() 来载入插件，可是 Vue.use() 做了什么呢？