TOMMYHU

前端开发人员也要会的切图技巧(一)
前端开发人员也要会的切图技巧(二)
前端开发人员也要会的切图技巧(三)

Web前端—前端高效开发之“一键切图”教程

录制动作或使用cutterman插件http://www.cutterman.cn/zh/cutterman

安装

1.github下载地址：https://github.com/vuejs/vue-devtools

2.下载好后进入vue-devtools-master工程  执行npm install ----->npm run build
npm最好换淘宝源

3.修改mainifest.json 中的persistent为true

步骤3没有设置会，，安装报错
ERROR in F:/java_workspace/vue-devtools-master/node_modules/_vue-loader@15.0.5@v ue-loader/lib/loaders/stylePostLoader.js 一直报这个错误

1、vuex
2、vue-bus: 一个 Vue.js 事件中心插件https://github.com/yangmingshan/vue-bus
3、$emit()
4、$dispatch()和$broadcast()（vue2.x废弃）
5、父链this.$parent.message = '来自组件component-a的信息'
6、子组件索引
<component-a ref="comA"></component-a> this.$ref.commA.message
7、props
8、$attrs
9、others

ui框架
webpack按需打包
webpack axios跨域代理
i18n多语言支持
vuex组件通信（vue bus）
动态router加载
await async异步流控制（step.js）
项目目录最佳实践（config，services（http inteceptor），utils，docs，data（mock），filters，directives，components，views）
测试
代码检查

1、全局注册(这种方式注册组件必须在vue实例化之前声明)
Vue.component('tag-name',{})
2、局部注册
var Child = {   template: '<div>A custom component!</div>' } new Vue({   // ...   components: {     // <my-component> 将只在父模板可用     'my-component': Child   } })
3、扩展实例
// 定义一个混合对象 var myMixin = {   created: function () {     this.hello()   },   methods: {     hello: function () {       console.log('hello from mixin!')     }   } } // 定义一个使用混合对象的组件 var Component = Vue.extend({   mixins: [myMixin] }) var component = new Component() // -> "hello from mixin!"

vuejs大型spa的webpack打包文件太大，如何破
1、按需引入组件，例如使用了button则引入button，而不是全局引入ui库（此需要配置打包文件）

例如：vantui
全局的这么玩,但这样全部打包了
import Vue from 'vue'; import Vant from 'vant'; import 'vant/lib/vant-css/index.css'; Vue.use(Vant);

按需的这么玩
//Use babel-plugin-import (Recommended) npm i babel-plugin-import -D // set babel config in .babelrc or babel-loader // Note: Don't set libraryDirectory if you are using webpack 1. {   "plugins": [     ["import", {       "libraryName": "vant",       "libraryDirectory": "es",       "style": true     }]   ] } Then you can import components from vant, equivalent to import manually below. import { Button } from 'vant';


1、Webpack打包后体积过大的优化思路

1、weinre
weinre
安装nodejs
安装工具包
npm g-g intall weinre

开启工具终端
weinre -httpPort 8008 -boundHost -all-

打开http终端http://你的ip:8008/
在h5中签入
<script src="http://你的ip:8008/target/target-script-min.js#anonymous"></script>  
打开http终端http://你的ip:8008/可以查看日志，例如console，network等



2、鹅厂出品的vconsole
<script src="./resources/js/lib/vconsole.min.js"></script> <script>     // init vConsole     var vConsole = new VConsole();     console.log('Hello world'); </script>



3、基于 WebSocket 的前端远程实时 LOG 工具
例如：https://github.com/bigggge/AirLog

先看下这段流氓代码
!function test() {     // 捕获异常，递归次数过多调试工具会抛出异常。     try{         !function cir(i)         {             // 当打开调试工具后，抛出异常，setTimeout执行test无参数，此时i == NaN，("" + i / i).length == 3             // debugger设置断点             ( 1 !== ( "" + i / i).length || 0===a ) && function(){}.constructor("debugger")(),cir(++i);         } (0)     } catch(e) {         setTimeout(test,500)     } }();

问题复现
一次扒某网站的前端代码，打开控制台要看Network，结果发现他们页面一打开控制台就不断的debugger，100ms一次，很影响看页面内容。就像下面这样的



问题分析
每次在断点处停下来的时候页面都会跳到source这个tab页面，也能够看到他的debugger的代码，其实他的实现很简单，只有这一行代码

(function() {var a = new Date(); debugger; return new Date() - a > 100;}())
虽然简单，但是却很有效。

不停地打断你，页面跳到source页面，阻止你看他代码不
断的产生不可回收的对象，占据你的内存，造成内存泄漏，没过多久浏览器就会卡顿
所以他带来的影响还是挺大的，我们需要解决这个问题。

问题解决
这个问题解决起来还是蛮简单的，问题解决只需要一句话：禁止断点。
而对应的操作是在Chrome控制台的Source Tab页点击Deactivate breakpoints按钮或者按下Ctrl + f8(下图)。


这样就能禁用断点了，问题就得到了解决，但是当你需要调试的时候记得要起他哦。很简单的操作，但是你如果对Chrome控制台调试不熟悉的话还是比较头疼的。在这里记录一下，分享给更多的人。