分类 front-end 下的文章

ESLint配置清单

ESLint官方提供的一份标准配置
阿里eslint-config-ali
腾讯AlloyTeamAlloyTeam ESLint 配置指南
Airbnb JavaScript Style Guide

手摸手教你定制ESLint rule以及了解ESLint的运行原理

凹凸实验室前端代码规范
风格指南

"no-alert": 0,//禁⽌使⽤alert confirm prompt
"no-array-constructor": 2,//禁⽌使⽤数组构造器
"no-bitwise": 0,//禁⽌使⽤按位运算符
"no-caller": 1,//禁⽌使⽤arguments.caller或arguments.callee
"no-catch-shadow": 2,//禁⽌catch⼦句参数与外部作⽤域变量同名
"no-class-assign": 2,//禁⽌给类赋值
"no-cond-assign": 2,//禁⽌在条件表达式中使⽤赋值语句
"no-console": 2,//禁⽌使⽤console
"no-const-assign": 2,//禁⽌修改const声明的变量
"no-constant-condition": 2,//禁⽌在条件中使⽤常量表达式 if(true) if(1)
"no-continue": 0,//禁⽌使⽤continue
"no-control-regex": 2,//禁⽌在正则表达式中使⽤控制字符
"no-debugger": 2,//禁⽌使⽤debugger
"no-delete-var": 2,//不能对var声明的变量使⽤delete操作符
"no-div-regex": 1,//不能使⽤看起来像除法的正则表达式/=foo/
"no-dupe-keys": 2,//在创建对象字⾯量时不允许键重复 {a:1,a:1}
"no-dupe-args": 2,//函数参数不能重复
"no-duplicate-case": 2,//switch中的case标签不能重复
"no-else-return": 2,//如果if语句⾥⾯有return,后⾯不能跟else语句
"no-empty": 2,//块语句中的内容不能为空
"no-empty-character-class": 2,//正则表达式中的[]内容不能为空
"no-empty-label": 2,//禁⽌使⽤空label
"no-eq-null": 2,//禁⽌对null使⽤==或!=运算符
"no-eval": 1,//禁⽌使⽤eval
"no-ex-assign": 2,//禁⽌给catch语句中的异常参数赋值
"no-extend-native": 2,//禁⽌扩展native对象
"no-extra-bind": 2,//禁⽌不必要的函数绑定
"no-extra-boolean-cast": 2,//禁⽌不必要的bool转换
"no-extra-parens": 2,//禁⽌⾮必要的括号
"no-extra-semi": 2,//禁⽌多余的冒号
"no-fallthrough": 1,//禁⽌switch穿透
"no-floating-decimal": 2,//禁⽌省略浮点数中的0 .5 3.
"no-func-assign": 2,//禁⽌重复的函数声明
"no-implicit-coercion": 1,//禁⽌隐式转换
"no-implied-eval": 2,//禁⽌使⽤隐式eval
"no-inline-comments": 0,//禁⽌⾏内备注
"no-inner-declarations": [2, "functions"],//禁⽌在块语句中使⽤声明(变量或函数)
"no-invalid-regexp": 2,//禁⽌⽆效的正则表达式
"no-invalid-this": 2,//禁⽌⽆效的this,只能⽤在构造器,类,对象字⾯量
"no-irregular-whitespace": 2,//不能有不规则的空格
"no-iterator": 2,//禁⽌使⽤__iterator__ 属性
"no-label-var": 2,//label名不能与var声明的变量名相同
"no-labels": 2,//禁⽌标签声明
"no-lone-blocks": 2,//禁⽌不必要的嵌套块
"no-lonely-if": 2,//禁⽌else语句内只有if语句
"no-loop-func": 1,//禁⽌在循环中使⽤函数(如果没有引⽤外部变量不形成闭包就可以)
"no-mixed-requires": [0, false],//声明时不能混⽤声明类型
"no-mixed-spaces-and-tabs": [2, false],//禁⽌混⽤tab和空格
"linebreak-style": [0, "windows"],//换⾏⻛格
"no-multi-spaces": 1,//不能⽤多余的空格
"no-multi-str": 2,//字符串不能⽤\换⾏
"no-multiple-empty-lines": [1, {"max": 2}],//空⾏最多不能超过2⾏
"no-native-reassign": 2,//不能重写native对象
"no-negated-in-lhs": 2,//in 操作符的左边不能有!
"no-nested-ternary": 0,//禁⽌使⽤嵌套的三⽬运算
"no-new": 1,//禁⽌在使⽤new构造⼀个实例后不赋值
"no-new-func": 1,//禁⽌使⽤new Function
"no-new-object": 2,//禁⽌使⽤new Object()
"no-new-require": 2,//禁⽌使⽤new require
"no-new-wrappers": 2,//禁⽌使⽤new创建包装实例,new String new Boolean new Number
"no-obj-calls": 2,//不能调⽤内置的全局对象,⽐如Math() JSON()
"no-octal": 2,//禁⽌使⽤⼋进制数字
"no-octal-escape": 2,//禁⽌使⽤⼋进制转义序列
"no-param-reassign": 2,//禁⽌给参数重新赋值
"no-path-concat": 0,//node中不能使⽤__dirname或__filename做路径拼接
"no-plusplus": 0,//禁⽌使⽤++,--
"no-process-env": 0,//禁⽌使⽤process.env
"no-process-exit": 0,//禁⽌使⽤process.exit()
"no-proto": 2,//禁⽌使⽤__proto__属性
"no-redeclare": 2,//禁⽌重复声明变量
"no-regex-spaces": 2,//禁⽌在正则表达式字⾯量中使⽤多个空格 /foo bar/
"no-restricted-modules": 0,//如果禁⽤了指定模块,使⽤就会报错
"no-return-assign": 1,//return 语句中不能有赋值表达式
"no-script-url": 0,//禁⽌使⽤javascript:void(0)
"no-self-compare": 2,//不能⽐较⾃身
"no-sequences": 0,//禁⽌使⽤逗号运算符
"no-shadow": 2,//外部作⽤域中的变量不能与它所包含的作⽤域中的变量或参数同名
"no-shadow-restricted-names": 2,//严格模式中规定的限制标识符不能作为声明时的变量名使⽤
"no-spaced-func": 2,//函数调⽤时 函数名与()之间不能有空格
"no-sparse-arrays": 2,//禁⽌稀疏数组, [1,,2]
"no-sync": 0,//nodejs 禁⽌同步⽅法
"no-ternary": 0,//禁⽌使⽤三⽬运算符
"no-trailing-spaces": 1,//⼀⾏结束后⾯不要有空格
"no-this-before-super": 0,//在调⽤super()之前不能使⽤this或super
"no-throw-literal": 2,//禁⽌抛出字⾯量错误 throw "error";
"no-undef": 1,//不能有未定义的变量
"no-undef-init": 2,//变量初始化时不能直接给它赋值为undefined
"no-undefined": 2,//不能使⽤undefined
"no-unexpected-multiline": 2,//避免多⾏表达式
"no-underscore-dangle": 1,//标识符不能以_开头或结尾
"no-unneeded-ternary": 2,//禁⽌不必要的嵌套 var isYes = answer === 1 ? true : false;
"no-unreachable": 2,//不能有⽆法执⾏的代码
"no-unused-expressions": 2,//禁⽌⽆⽤的表达式
"no-unused-vars": [2, {"vars": "all", "args": "after-used"}],//不能有声明后未被使⽤的变量或参数
"no-use-before-define": 2,//未定义前不能使⽤
"no-useless-call": 2,//禁⽌不必要的call和apply
"no-void": 2,//禁⽤void操作符
"no-var": 0,//禁⽤var,⽤let和const代替
"no-warning-comments": [1, { "terms": ["todo", "fixme", "xxx"], "location": "start" }],//不能有警告备
"no-with": 2,//禁⽤with
"array-bracket-spacing": [2, "never"],//是否允许⾮空数组⾥⾯有多余的空格
"arrow-parens": 0,//箭头函数⽤⼩括号括起来
"arrow-spacing": 0,//=>的前/后括号
"accessor-pairs": 0,//在对象中使⽤getter/setter
"block-scoped-var": 0,//块语句中使⽤var
"brace-style": [1, "1tbs"],//⼤括号⻛格
"callback-return": 1,//避免多次调⽤回调什么的
"camelcase": 2,//强制驼峰法命名
"comma-dangle": [2, "never"],//对象字⾯量项尾不能有逗号
"comma-spacing": 0,//逗号前后的空格
"comma-style": [2, "last"],//逗号⻛格,换⾏时在⾏⾸还是⾏尾
"complexity": [0, 11],//循环复杂度
"computed-property-spacing": [0, "never"],//是否允许计算后的键名什么的
"consistent-return": 0,//return 后⾯是否允许省略
"consistent-this": [2, "that"],//this别名
"constructor-super": 0,//⾮派⽣类不能调⽤super,派⽣类必须调⽤super
"curly": [2, "all"],//必须使⽤ if(){} 中的{}
"default-case": 2,//switch语句最后必须有default
"dot-location": 0,//对象访问符的位置,换⾏的时候在⾏⾸还是⾏尾
"dot-notation": [0, { "allowKeywords": true }],//避免不必要的⽅括号
"eol-last": 0,//⽂件以单⼀的换⾏符结束
"eqeqeq": 2,//必须使⽤全等
"func-names": 0,//函数表达式必须有名字
"func-style": [0, "declaration"],//函数⻛格,规定只能使⽤函数声明/函数表达式
"generator-star-spacing": 0,//⽣成器函数*的前后空格
"guard-for-in": 0,//for in循环要⽤if语句过滤
"handle-callback-err": 0,//nodejs 处理错误
"id-length": 0,//变量名⻓度
"indent": [2, 4],//缩进⻛格
"init-declarations": 0,//声明时必须赋初值
"key-spacing": [0, { "beforeColon": false, "afterColon": true }],//对象字⾯量中冒号的前后空格
"lines-around-comment": 0,//⾏前/⾏后备注
"max-depth": [0, 4],//嵌套块深度
"max-len": [0, 80, 4],//字符串最⼤⻓度
"max-nested-callbacks": [0, 2],//回调嵌套深度
"max-params": [0, 3],//函数最多只能有3个参数
"max-statements": [0, 10],//函数内最多有⼏个声明
"new-cap": 2,//函数名⾸⾏⼤写必须使⽤new⽅式调⽤,⾸⾏⼩写必须⽤不带new⽅式调⽤
"new-parens": 2,//new时必须加⼩括号
"newline-after-var": 2,//变量声明后是否需要空⼀⾏
"object-curly-spacing": [0, "never"],//⼤括号内是否允许不必要的空格
"object-shorthand": 0,//强制对象字⾯量缩写语法
"one-var": 1,//连续声明
"operator-assignment": [0, "always"],//赋值运算符 += -=什么的
"operator-linebreak": [2, "after"],//换⾏时运算符在⾏尾还是⾏⾸
"padded-blocks": 0,//块语句内⾏⾸⾏尾是否要空⾏
"prefer-const": 0,//⾸选const
"prefer-spread": 0,//⾸选展开运算
"prefer-reflect": 0,//⾸选Reflect的⽅法
"quotes": [1, "single"],//引号类型 `` "" ''
"quote-props":[2, "always"],//对象字⾯量中的属性名是否强制双引号
"radix": 2,//parseInt必须指定第⼆个参数
"id-match": 0,//命名检测
"require-yield": 0,//⽣成器函数必须有yield
"semi": [2, "always"],//语句强制分号结尾
"semi-spacing": [0, {"before": false, "after": true}],//分号前后空格
"sort-vars": 0,//变量声明时排序
"space-after-keywords": [0, "always"],//关键字后⾯是否要空⼀格
"space-before-blocks": [0, "always"],//不以新⾏开始的块{前⾯要不要有空格
"space-before-function-paren": [0, "always"],//函数定义时括号前⾯要不要有空格
"space-in-parens": [0, "never"],//⼩括号⾥⾯要不要有空格
"space-infix-ops": 0,//中缀操作符周围要不要有空格
"space-return-throw-case": 2,//return throw case后⾯要不要加空格
"space-unary-ops": [0, { "words": true, "nonwords": false }],//⼀元运算符的前/后要不要加空格
"spaced-comment": 0,//注释⻛格要不要有空格什么的
"strict": 2,//使⽤严格模式
"use-isnan": 2,//禁⽌⽐较时使⽤NaN,只能⽤isNaN()
"valid-jsdoc": 0,//jsdoc规则
"valid-typeof": 2,//必须使⽤合法的typeof的值
"vars-on-top": 2,//var必须放在作⽤域顶部
"wrap-iife": [2, "inside"],//⽴即执⾏函数表达式的⼩括号⻛格
"wrap-regex": 0,//正则表达式字⾯量⽤⼩括号包起来
"yoda": [2, "never"]//禁⽌尤达条件

例子

module.exports = {
     // 解析语法
     "parser": "@typescript-eslint/parser",
     // 指定脚本运⾏环境
     "env": {
         "browser": true,
         "es6": true,
         "node": true,
         "commonjs": true,
         "jsx-control-statements/jsx-control-statements": true
     },
     "extends": [
         "plugin:@typescript-eslint/recommended",
         "plugin:react/recommended",
         "plugin:jsx-control-statements/recommended",
     ],
     "root": true,
     // 脚本在执⾏期间访问的额外的全局变量
     // 当访问当前源⽂件内未定义的变量时,no-undef规则将发出警告
     // 所以需要定义这些额外的全局变量
     "globals": {
         "Atomics": "readonly",
         "SharedArrayBuffer": "readonly",
         "OnlySVG": true,
         "monitor": true,
         "CanvasRender": true,
     },
     // 指定解析器选项
     "parserOptions": {
         // 使⽤额外的语⾔特性
         "ecmaFeatures": {
         "expperimentalObjectRestSpread": true,
         "jsx": true,
         "modules": true
     },
     // 启⽤ES2018语法⽀持
     "ecmaVersion": 2018,
     // module表示ECMAScript模块
     "sourceType": "module"
     },
     // 指定需要的插件
     "plugins": [
         "@typescript-eslint",
         "jsx-control-statements",
         "react"
     ],
     // 启⽤的规则及其各⾃的错误级别
     "rules": {
         "@typescript-eslint/no-explicit-any": "off",
         "@typescript-eslint/explicit-member-accessibility": "off",
         "@typescript-eslint/no-var-requires": "off",
         "@typescript-eslint/explicit-function-return-type": "off",
         "@typescript-eslint/indent": [
             "error",
             4,
             { VariableDeclarator: 4, SwitchCase: 1 }
         ],
         "@typescript-eslint/no-unused-vars": 0,
         "@typescript-eslint/interface-name-prefix": 0,
         // React相关校验规则
         "react/jsx-indent": [2, 4],
         "react/jsx-no-undef": [2, { allowGlobals: true }],
         "jsx-control-statements/jsx-use-if-tag": 0,
         // 设置了 setter ,必须相应设置 getter ,反之不必须
         "accessor-pairs": 2,
         // 数组⽅括号前后的换⾏符使⽤规则
         // @off 不关⼼
         "array-bracket-newline": 0,
         // 数组⽅括号前后的空格使⽤规则
         // @off 不关⼼
         "array-bracket-spacing": 0,
         // 数组的 map、filter、sort 等⽅法,回调函数必须有返回值
         "array-callback-return": 2,
         // 每个数组项是否独占⼀⾏
         // @off 不关⼼
         "array-element-newline": 0,
         // 箭头函数的书写规则
         // @off 不限制
         "arrow-body-style": 0,
         // 箭头函数的圆括号使⽤规则
         // @off 不限制
         "arrow-parens": 0,
         // 箭头函数的空格使⽤规则
         // @off 不限制
         "arrow-spacing": 0,
         // 不能在块外使⽤块作⽤域内 var 定义的变量
         "block-scoped-var": 2,
         // 代码块花括号前后的空格规则
         // @off 不关⼼
         "block-spacing": 0,
         // if else 的花括号换⾏规则
         // @off 不关⼼
         "brace-style": 0,
         // callback 之后必须⽴即 return
         // @off 没必要
         "callback-return": 0,
         // 变量名必须使⽤驼峰式
         // @off 暂不限制
         "camelcase": 0,
         // 注释的⾸字⺟应该⼤写
         // @off 没必要
         "capitalized-comments": 0,
         // 对象的最后⼀项后⾯是否写逗号
         // @off 此项⽬不关⼼
         // @fixable 对于 PC 项⽬考虑兼容性时需要设置
         "comma-dangle": 0,
         // 逗号前后是否有空格
         // @off 不关⼼
         "comma-spacing": 0,
         // 逗号写在⾏⾸还是⾏尾
         // @off 不关⼼
         "comma-style": 0,
         // 禁⽌函数 if ... else if ... else 的复杂度超过 20
         "complexity": 2,
         // 使⽤⽅括号访问对象属性时,⽅括号前后的空格规则
         // @off 不关⼼
         "computed-property-spacing": 0,
         // 禁⽌函数在不同条件下返回不同类型的值
         // @off 有时候会希望通过参数获取不同类型的返回值
         "consistent-return": 0,
         // this 的别名规则,只允许 self 或 that
         "consistent-this": [2, "self", "that"],
         // 构造函数中必须调⽤ super
         // @off 没必要
         "constructor-super": 0,
         // if 后必须包含 { ,单⾏ if 除外
         "curly": [2, "multi-line", "consistent"],
         // switch 语句必须包含 default
         "default-case": 2,
         // 链式操作时,点的位置,是在上⼀⾏结尾还是下⼀⾏开头
         // @off 不关⼼
         "dot-location": 0,
         // ⽂件最后必须有空⾏
         // @off 不限制
         "eol-last": 0,
         // 必须使⽤ === 和 !== ,和 null 对⽐时除外
         "eqeqeq": [2, "always", { "null": "ignore" }],
         // for 循环不得因⽅向错误造成死循环
         "for-direction": 2,
         // 执⾏函数的圆括号前后的空格规则
         // @off 不关⼼
         "func-call-spacing": 0,
         // 把函数赋给变量或对象属性时,函数名和变量名或对象属性名必须⼀致
         // @off 不限制
         "func-name-matching": 0,
         // 不允许匿名函数
         // @off 不限制
         "func-names": 0,
         // 必须只使⽤函数申明或只使⽤函数表达式
         // @off 不限制
         "func-style": 0,
         // generator 的 * 前后空格使⽤规则
         // @off 不限制
         "generator-star-spacing": 0,
         // getter 必须有返回值,允许返回 undefined
         "getter-return": [2, { allowImplicit: true }],
         // require 必须在全局作⽤域下
         // @off 条件加载很常⻅
         "global-require": 0,
         // for in 时需检测 hasOwnProperty
         "guard-for-in": 2,
         // callback 中的 err、error 参数和变量必须被处理
         "handle-callback-err": 2,
         // id ⿊名单
         // @off 暂时没有
         "id-blacklist": 0,
         // 变量名⻓度限制
         // @off ⻓度不是重点,清晰易读才是关键
         "id-length": 0,
         // 限制变量名必须匹配指定的正则表达式
         // @off 没必要限制变量名
         "id-match": 0,
         // 缩进使⽤ tab 还是空格
         // @off 不关⼼
         "indent": 0,
         // 变量必须在定义的时候赋值
         // @off 先定义后赋值很常⻅
         "init-declarations": 0,
         // jsx 语法中,属性的值必须使⽤双引号
         "jsx-quotes": [1, "prefer-single"],
         // 对象字⾯量冒号前后的空格使⽤规则
         // @off 不关⼼
         "key-spacing": 0,
         // 关键字前后必须有空格
         "keyword-spacing": 2,
         // 换⾏符使⽤规则
         // @off 不关⼼
         "linebreak-style": 0,
         // 单⾏注释必须写在前⼀⾏还是⾏尾
         // @off 不限制
         "line-comment-position": 0,
         // 注释前后是否要空⼀⾏
         // @off 不限制
         "lines-around-comment": 0,
         // 最⼤块嵌套深度为 5 层
         "max-depth": [2, 5],
         // 限制单⾏代码的⻓度
         // @off 不限制
         "max-len": 0,
         // 限制单个⽂件最⼤⾏数
         // @off 不限制
         "max-lines": 0,
         // 最⼤回调深度为 3 层
         "max-nested-callbacks": [2, 3],
         // 函数的形参不能多于8个
         "max-params": [2, 8],
         // 限制⼀⾏中的语句数量
         // @off 没必要限制
         "max-statements-per-line": 0,
         // 限制函数块中的语句数量
         // @off 没必要限制
         "max-statements": 0,
         // 三元表达式的换⾏规则
         // @off 不限制
         "multiline-ternary": 0,
         // new关键字后类名应⾸字⺟⼤写
         "new-cap": [2, {
         "capIsNew": false, // 允许⼤写开头的函数直接执⾏
         }],
         // new 关键字后类应包含圆括号
         "new-parens": 2,
         // 链式调⽤是否要换⾏
         // @off 不限制
         "newline-per-chained-call": 0,
         // 禁⽌ alert,提醒开发者,上线时要去掉
         "no-alert": 1,
         // 禁⽌使⽤ Array 构造函数,使⽤ Array(num) 直接创建⻓度为 num 的数组时可以
         "no-array-constructor": 2,
         // 禁⽌将 await 写在循环⾥
         "no-await-in-loop": 2,
         // 禁⽌位运算
         // @off 不限制
         "no-bitwise": 0,
         // 禁⽌在 Node.js 中直接调⽤ Buffer 构造函数
         "no-buffer-constructor": 2,
         // 禁⽌使⽤ arguments.caller 和 arguments.callee
         "no-caller": 2,
         // switch的条件中出现 var、let、const、function、class 等关键字,必须使⽤花括号把内容括起来
         "no-case-declarations": 2,
         // catch中不得使⽤已定义的变量名
         "no-catch-shadow": 2,
         // class定义的类名不得与其它变量重名
         "no-class-assign": 2,
         // 禁⽌与 -0 做⽐较
         "no-compare-neg-zero": 2,
         // 禁⽌在 if、for、while 中出现赋值语句,除⾮⽤圆括号括起来
         "no-cond-assign": [2, "except-parens"],
         // 禁⽌出现难以理解的箭头函数,除⾮⽤圆括号括起来
         "no-confusing-arrow": [2, { "allowParens": true }],
         // 禁⽌使⽤ console,提醒开发者,上线时要去掉
         "no-console": 1,
         // 禁⽌使⽤常量作为判断条件
         "no-constant-condition": [2, { "checkLoops": false }],
         // 禁⽌对 const 定义重新赋值
         "no-const-assign": 2,
         // 禁⽌ continue
         // @off 很常⽤
         "no-continue": 0,
         // 禁⽌正则表达式中出现 Ctrl 键的 ASCII 表示,即/\x1f/
         "no-control-regex": 2,
         // 禁⽌ debugger 语句,提醒开发者,上线时要去掉
         "no-debugger": 1,
         // 禁⽌对变量使⽤ delete 关键字,删除对象的属性不受限制
         "no-delete-var": 2,
         // 禁⽌在正则表达式中出现形似除法操作符的开头,如 let a = /=foo/
         // @off 有代码⾼亮的话,在阅读这种代码时,也完全不会产⽣歧义或理解上的困难
         "no-div-regex": 0,
         // 函数参数禁⽌重名
         "no-dupe-args": 2,
         // 禁⽌对象出现重名键值
         "no-dupe-keys": 2,
         // 类⽅法禁⽌重名
         "no-dupe-class-members": 2,
         // 禁⽌ switch 中出现相同的 case
         "no-duplicate-case": 2,
         // 禁⽌重复 import
         "no-duplicate-imports": 2,
         // 禁⽌出现 if (cond) { return a } else { return b },应该写为 if (cond) { return a } return b
         // @off 有时前⼀种写法更清晰易懂
         "no-else-return": 0,
         // 正则表达式中禁⽌出现空的字符集[]
         "no-empty-character-class": 2,
         // 禁⽌空的 function
         // 包含注释的情况下允许
         "no-empty-function": 2,
         // 禁⽌解构中出现空 {} 或 []
         "no-empty-pattern": 2,
         // 禁⽌出现空代码块
         "no-empty": [2, { "allowEmptyCatch": true }],
         // 禁⽌ == 和 != 与 null 做⽐较,必须⽤ === 或 !==
         // @off ⾮严格相等可以同时判断 null 和 undefined
         "no-eq-null": 0,
         // 禁⽌使⽤ eval
         "no-eval": 2,
         // catch 定义的参数禁⽌赋值
         "no-ex-assign": 2,
         // 禁⽌扩展原⽣对象
         "no-extend-native": [2, { "exceptions": ["Array", "Object"] }],
         // 禁⽌额外的 bind
         "no-extra-bind": 2,
         // 禁⽌额外的布尔值转换
         "no-extra-boolean-cast": 2,
         // 禁⽌额外的 label
         "no-extra-label": 2,
         // 禁⽌额外的括号,仅针对函数体
         "no-extra-parens": [2, "functions"],
         // 禁⽌额外的分号
         "no-extra-semi": 2,
         // 每⼀个 switch 的 case 都需要有 break, return 或 throw
         // 包含注释的情况下允许
         "no-fallthrough": [2, { "commentPattern": "." }],
         // 不允许使⽤ 2. 或 .5 来表示数字,需要⽤ 2、2.0、0.5 的格式
         "no-floating-decimal": 2,
         // 禁⽌对函数声明重新赋值
         "no-func-assign": 2,
         // 禁⽌对全局变量赋值
         "no-global-assign": 2,
         // 禁⽌使⽤隐式类型转换
         "no-implicit-coercion": [2, {
         "allow": ["+", "!!"] // 允许 + 转数值 "" + 转字符串和 !! 转布尔值
         }],
         // 禁⽌在 setTimeout 和 setInterval 中传⼊字符串,因会触发隐式 eval
         "no-implied-eval": 2,
         // 禁⽌隐式定义全局变量
         "no-implicit-globals": 2,
         // 禁⽌⾏内注释
         // @off 很常⽤
         "no-inline-comments": 0,
         // 禁⽌在块作⽤域内使⽤ var 或函数声明
         "no-inner-declarations": [2, "both"],
         // 禁⽌使⽤⾮法的正则表达式
         "no-invalid-regexp": 2,
         // 禁⽌在类之外的地⽅使⽤ this
         // @off this 的使⽤很灵活,事件回调中可以表示当前元素,函数也可以先⽤ this,等以后被调⽤的时候再 call
         "no-invalid-this": 0,
         // 禁⽌使⽤不规范空格
         "no-irregular-whitespace": [2, {
         "skipStrings": true, // 允许在字符串中使⽤
         "skipComments": true, // 允许在注释中使⽤
         "skipRegExps": true, // 允许在正则表达式中使⽤
         "skipTemplates": true, // 允许在模板字符串中使⽤
         }],
         // 禁⽌使⽤ __iterator__
         "no-iterator": 2,
         // label 不得与已定义的变量重名
         "no-label-var": 2,
         // 禁⽌使⽤ label
         // @off 禁⽌了将很难 break 多重循环和多重 switch
         "no-labels": 0,
         // 禁⽌使⽤⽆效的块作⽤域
         "no-lone-blocks": 2,
         // 禁⽌ else 中只有⼀个单独的 if
         // @off 单独的 if 可以把逻辑表达的更清楚
         "no-lonely-if": 0,
         // 禁⽌ for (var i) { function() { use i } },使⽤ let 则可以
         "no-loop-func": 2,
         // 禁⽌魔法数字
         "no-magic-numbers": 0,
         // 禁⽌使⽤混合的逻辑判断,必须把不同的逻辑⽤圆括号括起来
         "no-mixed-operators": [2, {
             "groups": [
                 ["&&", "||"]
             ]
         }],
         // 相同类型的 require 必须放在⼀起
         // @off 不限制
         "no-mixed-requires": 0,
         // 禁⽌混⽤空格和 tab 来做缩进,必须统⼀
         "no-mixed-spaces-and-tabs": 2,
         // 禁⽌连等赋值
         "no-multi-assign": 2,
         // 禁⽌使⽤连续的空格
         "no-multi-spaces": 2,
         // 禁⽌使⽤ \ 来定义多⾏字符串,统⼀使⽤模板字符串来做
         "no-multi-str": 2,
         // 连续空⾏的数量限制
         "no-multiple-empty-lines": [2, {
             max: 3, // ⽂件内最多连续 3 个
             maxEOF: 1, // ⽂件末尾最多连续 1 个
             maxBOF: 1 // ⽂件头最多连续 1 个
         }],
         // 禁⽌ if 中出现否定表达式 !==
         // @off 否定的表达式可以把逻辑表达的更清楚
         "no-negated-condition": 0,
         // 禁⽌嵌套的三元表达式
         // @off 没有必要限制
         "no-nested-ternary": 0,
         // 禁⽌ new Function
         // @off 有时会⽤它来解析⾮标准格式的 JSON 数据
         "no-new-func": 0,
         // 禁⽌使⽤ new Object
         "no-new-object": 2,
         // 禁⽌使⽤ new require
         "no-new-require": 2,
         // 禁⽌使⽤ new Symbol
         "no-new-symbol": 2,
         // 禁⽌ new Boolean、Number 或 String
         "no-new-wrappers": 2,
         // 禁⽌ new ⼀个类⽽不存储该实例
         "no-new": 2,
         // 禁⽌把原⽣对象 Math、JSON、Reflect 当函数使⽤
         "no-obj-calls": 2,
         // 禁⽌使⽤⼋进制转义符
         "no-octal-escape": 2,
         // 禁⽌使⽤0开头的数字表示⼋进制
         "no-octal": 2,
         // 禁⽌使⽤ __dirname + "file" 的形式拼接路径,应该使⽤ path.join 或 path.resolve 来代替
         "no-path-concat": 2,
         // 禁⽌对函数的参数重新赋值
         "no-param-reassign": 2,
         // 禁⽌ ++ 和 --
         // @off 很常⽤
         "no-plusplus": 0,
         // 禁⽌使⽤ process.env.NODE_ENV
         // @off 使⽤很常⻅
         "no-process-env": 0,
         // 禁⽌使⽤ process.exit(0)
         // @off 使⽤很常⻅
         "no-process-exit": 0,
         // 禁⽌使⽤ hasOwnProperty, isPrototypeOf 或 propertyIsEnumerable
         // @off 与 guard-for-in 规则冲突,且没有必要
         "no-prototype-builtins": 0,
         // 禁⽌使⽤ __proto__
         "no-proto": 2,
         // 禁⽌重复声明
         "no-redeclare": 2,
         // 禁⽌在正则表达式中出现连续空格
         "no-regex-spaces": 2,
         // 禁⽌特定的全局变量
         // @off 暂时没有
         "no-restricted-globals": 0,
         // 禁⽌ import 特定的模块
         // @off 暂时没有
         "no-restricted-imports": 0,
         // 禁⽌使⽤特定的模块
         // @off 暂时没有
         "no-restricted-modules": "off",
         // 禁⽌特定的对象属性
         // @off 暂时没有
         "no-restricted-properties": 0,
         // 禁⽌使⽤特定的语法
         // @off 暂时没有
         "no-restricted-syntax": 0,
         // 禁⽌在return中赋值
         "no-return-assign": 2,
         // 禁⽌在 return 中使⽤ await
         "no-return-await": 2,
         // 禁⽌ location.href = "javascript:void"
         "no-script-url": 2,
         // 禁⽌将⾃⼰赋值给⾃⼰
         "no-self-assign": 2,
         // 禁⽌⾃⼰与⾃⼰作⽐较
         "no-self-compare": 2,
         // 禁⽌逗号操作符
         "no-sequences": 2,
         // 禁⽌使⽤保留字作为变量名
         "no-shadow-restricted-names": 2,
         // 禁⽌在嵌套作⽤域中出现重名的定义,如 let a; function b() { let a }
         "no-shadow": 2,
         // 禁⽌数组中出现连续逗号
         "no-sparse-arrays": 2,
         // 禁⽌使⽤ node 中的同步的⽅法,⽐如 fs.readFileSync
         // @off 使⽤很常⻅
         "no-sync": 0,
         // 禁⽌使⽤ tabs
         // @off 不限制
         "no-tabs": 0,
         // 禁⽌普通字符串中出现模板字符串语法
         "no-template-curly-in-string": 2,
         // 禁⽌三元表达式
         // @off 很常⽤
         "no-ternary": 0,
         // 禁⽌在构造函数的 super 之前使⽤ this
         "no-this-before-super": 2,
         // 禁⽌ throw 字⾯量,必须 throw ⼀个 Error 对象
         "no-throw-literal": 2,
         // 禁⽌⾏尾空格
         "no-trailing-spaces": [2, {
             "skipBlankLines": true, // 不检查空⾏
             "ignoreComments": true // 不检查注释
         }],
         // 禁⽌将 undefined 赋值给变量
         "no-undef-init": 2,
         // 禁⽌访问未定义的变量或⽅法
         "no-undef": 2,
         // 禁⽌使⽤ undefined,如需判断⼀个变量是否为 undefined,请使⽤ typeof a === "undefined"
         "no-undefined": 2,
         // 禁⽌变量名中使⽤下划线
         // @off 暂不限制
         "no-underscore-dangle": 0,
         // 禁⽌出现难以理解的多⾏代码
         "no-unexpected-multiline": 2,
         // 循环体内必须对循环条件进⾏修改
         "no-unmodified-loop-condition": 2,
         // 禁⽌不必要的三元表达式
         "no-unneeded-ternary": [2, { "defaultAssignment": false }],
         // 禁⽌出现不可到达的代码,如在 return、throw 之后的代码
         "no-unreachable": 2,
         // 禁⽌在finally块中出现 return、throw、break、continue
         "no-unsafe-finally": 2,
         // 禁⽌出现不安全的否定,如 for (!key in obj} {},应该写为 for (!(key in obj)} {}
         "no-unsafe-negation": 2,
         // 禁⽌出现⽆⽤的表达式
         "no-unused-expressions": [2,
             {
                 "allowShortCircuit": true, // 允许使⽤ a() || b 或 a && b()
                 "allowTernary": true, // 允许在表达式中使⽤三元运算符
                 "allowTaggedTemplates": true, // 允许标记模板字符串
             }
         ],
         // 禁⽌定义不使⽤的 label
         "no-unused-labels": 2,
         // 禁⽌定义不使⽤的变量
         "no-unused-vars": [2,
             {
                 "vars": "all", // 变量定义必须被使⽤
                 "args": "none", // 对于函数形参不检测
                 "ignoreRestSiblings": true, // 忽略剩余⼦项 fn(...args),{a, b, ...coords}
                 "caughtErrors": "none", // 忽略 catch 语句的参数使⽤
             }
         ],
         // 禁⽌在变量被定义之前使⽤它
         "no-use-before-define": [2,
             {
                 "functions": false, // 允许函数在定义之前被调⽤
                 "classes": false, // 允许类在定义之前被引⽤
             }
         ],
         // 禁⽌不必要的 call 和 apply
         "no-useless-call": 2,
         // 禁⽌使⽤不必要计算的key,如 var a = { ["0"]: 0 }
         "no-useless-computed-key": 2,
         // 禁⽌不必要的字符串拼接
         "no-useless-concat": 2,
         // 禁⽌⽆⽤的构造函数
         "no-useless-constructor": 2,
         // 禁⽌⽆⽤的转义
         "no-useless-escape": 2,
         // 禁⽌⽆效的重命名,如 import {a as a} from xxx
         "no-useless-rename": 2,
         // 禁⽌没有必要的 return
         // @off 没有必要限制
         "no-useless-return": 0,
         // 禁⽌使⽤ var,必须⽤ let 或 const
         "no-var": 2,
         // 禁⽌使⽤void
         "no-void": 2,
         // 禁⽌注释中出现 TODO 或 FIXME,⽤这个来提醒开发者,写了 TODO 就⼀定要做完
         "no-warning-comments": 1,
         // 禁⽌属性前出现空格,如 foo. bar()
         "no-whitespace-before-property": 2,
         // 禁⽌ with
         "no-with": 2,
         // 禁⽌ if 语句在没有花括号的情况下换⾏
         "nonblock-statement-body-position": 2,
         // 定义对象的花括号前后是否要加空⾏
         // @off 不关⼼
         "object-curly-newline": 0,
         // 定义对象的花括号前后是否要加空格
         // @off 不关⼼
         "object-curly-spacing": 0,
         // 对象每个属性必须独占⼀⾏
         // @off 不限制
         "object-property-newline": 0,
         // obj = { a: a } 必须转换成 obj = { a }
         // @off 没必要
         "object-shorthand": 0,
         // 每个变量声明必须独占⼀⾏
         // @off 有 one-var 就不需要此规则了
         "one-var-declaration-per-line": 0,
         // 是否允许使⽤逗号⼀次声明多个变量
         "one-var": [2, {
         "const": "never" // 所有 const 声明必须独占⼀⾏,不允许⽤逗号定义多个
         }],
         // 必须使⽤ x = x + y ⽽不是 x += y
         // @off 没必要限制
         "operator-assignment": 0,
         // 断⾏时操作符位于⾏⾸还是⾏尾
         // @off 不关⼼
         "operator-linebreak": 0,
         // 代码块⾸尾必须要空⾏
         // @off 没必要限制
         "padded-blocks": 0,
         // 限制语句之间的空⾏规则,⽐如变量定义完之后必须要空⾏
         // @off 没必要限制
         "padding-line-between-statements": 0,
         // 必须使⽤箭头函数作为回调
         // @off 没必要
         "prefer-arrow-callback": 0,
         // 声明后不再修改的变量必须使⽤ const
         // @off 没必要
         "prefer-const": 0,
         // 必须使⽤解构
         // @off 没必要
         "prefer-destructuring": 0,
         // 必须使⽤ 0b11111011 ⽽不是 parseInt("111110111", 2)
         // @off 没必要
         "prefer-numeric-literals": 0,
         // promise 的 reject 中必须传⼊ Error 对象,⽽不允许使⽤字⾯量
         "prefer-promise-reject-errors": 2,
         // 必须使⽤解构 ...args 来代替 arguments
         "prefer-rest-params": 2,
         // 必须使⽤ func(...args) 来代替 func.apply(args)
         // @off 没必要
         "prefer-spread": 0,
         // 必须使⽤模板字符串来代替字符串拼接
         // @off 不限制
         "prefer-template": 0,
         // 字符串必须使⽤单引号
         "quotes": [2, "single", {
             "avoidEscape": true, // 允许包含单引号的字符串使⽤双引号
             "allowTemplateLiterals": true, // 允许使⽤模板字符串
         }],
         // 对象字⾯量的键名禁⽌⽤引号括起来
         // @off 没必要限制
         "quote-props": 0,
         // parseInt⽅法必须传进制参数
         "radix": 2,
         // async 函数中必须存在 await 语句
         // @off async function 中没有 await 的写法很常⻅,⽐如 koa 的示例中就有这种⽤法
         "require-await": 0,
         // 必须使⽤ jsdoc ⻛格的注释
         // @off 暂不考虑开启
         "require-jsdoc": 0,
         // generator 函数内必须有 yield
         "require-yield": 2,
         // ...后⾯不允许有空格
         "rest-spread-spacing": [2, "never"],
         // 分号前后的空格规则
         // @off 不限制
         "semi-spacing": 0,
         // 禁⽌⾏⾸出现分号
         "semi-style": [2, "last"],
         // ⾏尾必须使⽤分号结束
         "semi": 2,
         // imports 必须排好序
         // @off 没必要限制
         "sort-imports": 0,
         // 对象字⾯量的键名必须排好序
         // @off 没必要限制
         "sort-keys": 0,
         // 变量声明必须排好序
         // @off 没必要限制
         "sort-vars": 0,
         // function 等的花括号之前是否使⽤空格
         // @off 不关⼼
         "space-before-blocks": 0,
         // function 的圆括号之前是否使⽤空格
         // @off 不关⼼
         "space-before-function-paren": 0,
         // 圆括号内的空格使⽤规则
         // @off 不关⼼
         "space-in-parens": 0,
         // 操作符前后要加空格
         "space-infix-ops": 2,
         // new, delete, typeof, void, yield 等表达式前后必须有空格,-, +, --, ++, !, !! 等表达式前后不许有
         "space-unary-ops": [2, {
             "words": true,
             "nonwords": false,
         }],
         // 注释的斜线和星号后要加空格
         "spaced-comment": [2, "always", {
             "block": {
                 exceptions: ["*"],
                 balanced: true
             }
         }],
         // 禁⽤严格模式,禁⽌在任何地⽅出现 "use strict"
         "strict": [2, "never"],
         // switch 中冒号前后的空格规则
         // @off 不关⼼
         "switch-colon-spacing": 0,
         // 创建 Symbol 的时候必须传⼊描述
         "symbol-description": 2,
         // 模板字符串 ${} 前后的空格规则
         // @off 不限制
         "template-curly-spacing": 0,
         // 模板字符串前后的空格规则
         // @off 不限制
         "template-tag-spacing": 0,
         // 所有⽂件头禁⽌出现 BOM
         "unicode-bom": 2,
         // 禁⽌直接对 NaN 进⾏判断,必须使⽤ isNaN
         "use-isnan": 2,
         // 注释必须符合 jsdoc 的规范
         // @off 暂不考虑开启
         "valid-jsdoc": 0,
         // typeof 判断条件只能是 "undefined", "object", "boolean", "number", "string", "function" 或 "
         "valid-typeof": 2,
         // var 必须在作⽤域的最前⾯
         // @off var 不在最前⾯也是很常⻅的⽤法
         "vars-on-top": 0,
         // ⾃执⾏函数必须使⽤圆括号括起来,如 (function(){do something...})()
         "wrap-iife": [2, "inside"],
         // 正则表达式必须⽤圆括号括起来
         // @off 不限制
         "wrap-regex": 0,
         // yield 的 * 前后空格规则
         // @off 不限制
         "yield-star-spacing": 0,
         // 禁⽌Yoda格式的判断条件,如 if (true === a),应使⽤ if (a === true)
         "yoda": 2,
         }
};

https://github.com/axios/axios
axios中文网
axios, ajax和fetch的比较
axios 源码分析

在vuejs 中的简单用法:

npm install axios
npm install vue-axios

npm install --save axios vue-axios

在main.js中引用:
axios 改写为 Vue 的原型属性(不推荐这样用)
即:

import axios from 'axios'
Vue.prototype.$ajax= axios

推荐:看了vue-axios的源码,它是按照vue插件的方式去写的。那么结合vue-axios,就可以去使用vue.use方法了

import axios from 'axios'
import VueAxios from 'vue-axios'
# 通过 use 方法加载 axios 插件
Vue.use(VueAxios, axios)

在组件中使用: 注意:可以用 $http 也可以用 axios (this.axios.get) 可以看这里

this.$http.post(Url, {
         page: p
     }).then((res) => {
          console.log(res);
     }).catch((err) => {
         console.log(err);
     });

结合 Vuex的action

在vuex的仓库文件store.js中引用,使用action添加方法

import Vue from 'Vue'
import Vuex from 'vuex'

import axios from 'axios'

Vue.use(Vuex)
const store = new Vuex.Store({
  // 定义状态
  state: {
    user: {
      name: 'xxx'
    }
  },
  actions: {
    // 封装一个 ajax 方法
    login (context) {
      axios({
        method: 'post',
        url: '/user',
        data: context.state.user
      })
    }
  }
})

export default store

在组件中发送请求的时候,需要使用 this.$store.dispatch

methods: {
  submitForm () {
    this.$store.dispatch('login')
  }
}

收集的一些资料:
http://echarts.baidu.com/
echarts2 官方实例
echarts3(4)官方实例 && 个人实例
123.207.117.45/demo20180919.7z

https://www.npmjs.com/package/globe.gl
https://github.com/vasturiano/three-globe
Globe.GL
地球

https://visibleearth.nasa.gov/collection/1484/blue-marble
地球

https://github.com/Gladysgong/3D_earth_all
echarts echarts-x echarts-gl 制作3D地球

https://www.makeapie.com/editor.html?c=xnyknPF1R
区贡献者维护的Apache ECharts (incubating)相关作品,与官方的 Apache ECharts (incubating) 项目无关。

http://www.popodv.com/
PoPo 数据可视化

https://echarts.apache.org/zh/option-gl.html
https://github.com/ecomfe/echarts-gl
GL配置

https://echarts.apache.org/zh/index.html
ECharts( Apache ECharts)
https://github.com/apache/incubator-echarts
Apache ECharts

https://github.com/ecomfe/echarts-for-weixin
在微信小程序中使用 Apache ECharts (incubating)

https://github.com/xlsdg/vue-echarts-v3
第三方封装

https://mapv.baidu.com/
https://mapv.baidu.com/examples/
Forked from huiyan-fe/mapv
a library of geography visualization-地理信息可视化库
https://github.com/baidu/mapv

http://www.echartsjs.com/gallery/editor.html?c=doc-example/getting-started
数据可视化概览
大数据可视化大屏设计经验分享
公司大屏开发心得
制作公司数据大屏的几点技术总结 && 时钟demo
超大7k高清显示器显示网页解决方案
中国国家应急广播大屏幕UI设计
使用百度echarts制作可视化大屏——最终效果和动态数据刷新
使用百度echarts制作可视化大屏
大屏设计系列之七:大屏幕界面设计应用案例欣赏
大屏数据可视化示例 && demo
基于ECharts实现的可视化大屏展示
数据可视化,个人经验总结(Echarts相关)
一个炫酷大屏展示页的打造过程
大屏数据展示
一个炫酷大屏展示页的打造过程

航班实时追踪
http://flightadsb.variflight.com/

数字滚动

http://inorganik.github.io/countUp.js/
https://blog.csdn.net/itheima_Wujie/article/details/78765467
https://segmentfault.com/q/1010000003768836
https://www.helloweba.net/demo/totalnum/
https://github.com/kele527/digitRoll
https://github.com/zoeblow/numberAnimate
https://github.com/gitWhatever/vue-digitroll
https://github.com/leeenx/numberscroller
https://github.com/wqzwh/odometer
https://github.com/postbird/jquery.number-run.js
https://github.com/confidence68/numberAnimateOperate
https://github.com/cgygd/scrollnumbers
https://github.com/Takeos/Odometer
https://github.com/HouLijun/rollNumber
https://github.com/jixiaoxin666/digital_scroll
https://github.com/huangjihua/Ernie
https://github.com/kumaw/scrollNum
https://github.com/kolou/number_slide
https://github.com/lbshub/JS-mDigital
https://github.com/chaorenzeng/jquery.numscroll.js
https://github.com/chanble/rollingNumber
https://github.com/YuxinChou/DemoRotateNum
https://github.com/GYFlash/gScrollNumber.js
https://github.com/wsb260/jQuery-slimScrol
http://inorganik.github.io/countUp.js/

Echarts 系列
数据可视化

demo
http://wx.ioneup.com/index.php?s=/screen/index/signin/target_id/1.html
http://wx.ioneup.com/index.php?s=/screen/index/signin/pid/5/target_id/1.html

https://blog.csdn.net/qq_42213965/article/details/80323147

百分比例子
http://gallery.echartsjs.com/editor.html?c=xr1XxW-i7M

再谈Retina下1px的解决方案
移动端 Retina 屏幕 1px 边框问题

这里使用postcss-write-svg举例

需要依赖

npm install postcss-write-svg --save-dev
npm install postcss-write-svg --save

vue页面

<style scoped>
  @svg 1px-border {
    height: 2px;
  @rect {
    fill: var(--color, black);
    width: 100%;
    height: 50%;
  }
  }
  .ex-font{
    font-size:18px;
  }
  .ex-border{
    border-bottom: 1px solid #ccc;
    border-image: svg(1px-border param(--color black)) 2 2 stretch;
  }
</style>

配置文件

xx\build\webpack.base.conf.js

module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
      {
        test    : /\.(css|scss)$/,
        use     : ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use     : [
            {
              loader: 'css-loader',
              options: {
                minimize: 'production' !== process.env.NODE_ENV ? false : true,
              }
            },
            {
              loader: 'postcss-loader',
              options: {
                plugins: function () {
                  return [
                    require('postcss-write-svg')
                  ];
                }
              }
            },
            {
              loader: 'sass-loader',
              options: {
                outputStyle: 'expanded',
                includePaths: [
                  ROOT_PATH,
                ]
              }
            },
          ],
        }),
        include   : ROOT_PATH,
      },
      {
        test: /\.js$/,
        loader: ['babel-loader'],
        exclude : /node_modules/,
        include : ROOT_PATH,
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: `url-loader?limit=10000&name=${ASSETS_DIR}/images/[name].[hash:8].[ext]`,
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: `url-loader?limit=10000&name=${ASSETS_DIR}/fonts/[name].[hash:8].[ext]`,
      }
    ]
  },



xx\.postcssrc.js

module.exports = {
  "plugins": {
    // to edit target browsers: use "browserlist" field in package.json
    "autoprefixer": {},
    "postcss-write-svg": {
      utf8: false
    },
  }
}

875571
https://www.w3cplus.com/javascript/webpack-config-part1.html

Webpack 打包优化之体积篇
Webpack 打包优化之速度篇
(webpack系列二)webpack打包优化探索

Webpack按需打包Lodash的几种方式

webpack 打包JS 的运行原理

优化

使用可视化图表对 Webpack 2 的编译与打包进行统计分析

全局引入lodash,报错

index.js(main.js)

import _                from 'lodash';

// 设置lodash 全局

window._ = _;


warning  '_' is not defined  no-undef

https://stackoverflow.com/questions/45317154/error-is-not-defined-no-undef

.eslintrc

"globals" : {
    "$axios": false,
    "$store": false,
    "APIs": false,
    "__PROJECTDIR__": false,
    "_": true
  },


ESLint配置清单

ESLint官方提供的一份标准配置
阿里eslint-config-ali
腾讯AlloyTeamAlloyTeam ESLint 配置指南
Airbnb JavaScript Style Guide

Vue数据绑定原理

官网:https://vuejs.org 要是网络差可以打开中文
V3
GitHub:https://github.com/vuejs/vue
http://weibo.com/arttechdesign 尤雨溪
比较详细的采访 Vue 作者尤雨溪
Vue 2.0——渐进式前端解决方案
Vue CLI Vue.js 开发的标准
Vue的 Object.defineProperty和未来3.0的proxy观察者机制
集 Vue3+ & Vue-CLI3+ 开发生态圈和填坑姿态

Vue3.0中文文档(Vue3 + TS学习资源路线)

vue3

第三届VueConf
关于 Vue3 的文章,我不明白为啥用 TS

使用 React Hooks 重构你的小程序
https://aotu.io/notes/2019/07/10/taro-hooks/

Vue Function API
https://github.com/vuejs/vue-function-api/blob/master/README.zh-CN.md

来自 Vue 3.0 的 Composition API 尝鲜
vue3 源码的利器 - mini-vue & B站

教程

Vue作者:新手向:Vue 2.0 的建议学习顺序
从0到1手写一个vuejs
Vue.js 2.3 知识清单
2018 我所了解的 Vue 知识大全(一)
2018 我所了解的 Vue 知识大全 (二)
Vue2.0 新手入门 — 从环境搭建到发布
Vue.js学习教程_专题
JTaro-Tutorial
Vuex 是什么
技术胖-胜洪宇
easy-mock
蓝狐博客

入门看看

1.Vue.js——60分钟快速入门
2.Vue.js——60分钟组件快速入门(上篇)
3.Vue.js——60分钟组件快速入门(下篇)
4.Vue.js——基于$.ajax实现数据的跨域增删查改
5.Vue.js——vue-resource全攻略
6.Vue.js——使用$.ajax和vue-resource实现OAuth的注册、登录、注销和API调用
7.Vue.js——60分钟browserify项目模板快速入门
8.Vue.js——60分钟webpack项目模板快速入门
9.Vue.js——vue-router 60分钟快速入门
上面源码https://github.com/keepfool/vue-tutorials
在Vue中有条件地使用CSS类

搭建过vue开发环境

vue学习
Vue 源码解析:深入响应式原理
剖析Vue原理&实现双向绑定MVVM
Vue技术内幕
VUE.JS组件化开发实践
vue开发看这篇文章就够了
vue.js关于Object.defineProperty的利用原理

vue 248个知识点(面试题)为你保驾护航
https://alligator.io/vuejs/
https://vuedose.tips/tips/

Vuex

vuex的demo实现
到底vuex是什么?
使用Vue.js和Vuex实现购物车场景
正确理解Vuex: 懂人生,就懂了Vuex
Vuex 的简单使用

state的,store还有getter、Mutations、Actions以及Modules。
在vuex文档中都有非常详细的说明:http://vuex.vuejs.org/zh-cn/state.html
笼统的说:

组件获取 state 用 vuex 的 getter
组件触发动作用 vuex 的 action
修改 state 用 vuex 的 mutation

SSR

追求极致的用户体验ssr(基于vue的服务端渲染)
实现基于 Nuxt.js 的 SSR 应用

项目

Element 2.0
vux github 移动框架
饿了么前端
Vue相关开源项目库汇总
Let you insight into the Vue.js

https://github.com/yaoyao1987/vue-cli-multipage

Vue组件库

https://nutui.jd.com/demo.html#/index

多页面

https://github.com/luchanan/vue2.0-multi-page
基于 Vue-cli 构建多页面应用(Multi-pages Application)脚手架
基于vue-cli搭建一个多页面应用(六)--移动端适配方案

基于 vue2 + vuex 构建一个具有 45 个页面的大型单页面应用
改用nodejs构建的后台系统接口
对应的后台管理系统
Vue 全家桶 + Electron 开发的一个跨三端的应用
vue.js - 收藏集
vue相关收集
https://github.com/lichenbuliren/vuex-notes-app
微豆 - Vue 2.0 实现豆瓣 Web App 教程
Awesome douban DEMO created with Vue2.x + Vuex + Vue-router + Superagent
vue-element-admin && 文档 && 手摸手,带你用vue撸后台
Vue.js实践:一个Node.js+mongoDB+Vue.js的博客内容管理系统
开源中国微信版 vue+vux的2.x版本 github
使用vue.js + laravel开发单页面应用
利用WordPress REST API 开发微信小程序从入门到放弃

vue2.0 admin / a management system templateelement-ui
Vue Admin Panel Framework, Powered by Vue 2.0 and Bulma 0.3 https://admin.vuebulma.com
vue2 + vue-router + vuex 入门项目

框架

vonic && vonic-documents
iview
基于 vue.js 和 ionic 样式的 UI 框架,用于快速构建移动端单页应用。

插件(库)

Nicescroll滚动条插件
bcrypt.js && npm && 使用
手摸手,带你封装一个vue component
[译]如何在 Vue.js 中使用第三方库

https://zhuanlan.zhihu.com/p/25042521
详解 Vue & Vuex 实践

插件

Vue 插件编写与实战

Vue生命周

http://www.cnblogs.com/gagag/p/6246493.html
生命周期

vue 钩子函数

Vue2.0 探索之路——生命周期和钩子函数的一些理解
https://segmentfault.com/a/1190000008010666\

https://crazy0x.github.io/frontend/2017/01/23/vue-nga.html
使用Vue框架实现NGA客户端

Vue.js:a (re)introduction(作者中文)
https://zhuanlan.zhihu.com/p/20302927
http://blog.evanyou.me/2015/10/25/vuejs-re-introduction/ (作者英文原文)
https://github.com/vuejs/awesome-vue

sublime中有没有*.vue文件格式化插件?
https://segmentfault.com/q/1010000004221470

HTML/CSS/JS Prettify 这个插件就行, 安装后 tools->HTML/CSS/JS Prettify->set prettify preference 在"allowed_file_extensions": ["htm", "html", "xhtml", "shtml", "xml", "svg","vue"] 加上vue就好了

PostCSS(px2rem)
除了Sass这样的CSS处理器这外,我们团队的@颂奇同学还开发了一款npm的工具px2rem 。安装好px2rem之后,可以在项目中直接使用。也可以使用PostCSS 。使用PostCSS插件postcss-px2rem

wordpress with vue

https://deliciousbrains.com/creating-a-wordpress-theme-using-the-rest-api-and-vue-js/
https://github.com/bstavroulakis/vue-wordpress-pwa
https://www.npmjs.com/package/vue-wordpress
https://segmentfault.com/a/1190000008715104

优化

关于 webpack 打包后文件过大的那些事……
基于 Webpack 的应用包体尺寸优化
Vue路由开启keep-alive时的注意点
vue-cli 构建的项目 webpack 如何配置不 build 出 .map 文件?
如何降低Vue.js项目中Webpack打包文件的大小?
路由懒加载 Webpack 的代码分割功能
vue 组件按需引用,vue-router懒加载,vue打包优化,加载动画
在vue 中使用 Clipboard.js复制粘贴 官网
Clipboard is not a function?
使用clipboard.js实现页面内容复制到剪贴板

组件通信

vue中8种组件通信方式
vue-router 项目中$route.params和$route.query的区别是什么,踩坑事件进行总结

?id=123456&uid=1 这样传参的方式,获取值为this.$route.query.id(uid) ,这样的不用改路由
/create/12345/1  这样的传参获取值为this.$route.params.id,需要改路由path: '/create/:id/:uid

部署

node-vue前后端分离记录
利用scp2部署Vue项目到测试环境
vue.js(SCP2)打包后自动上传到服务器
vue2 前后端分离项目ajax跨域session问题解决
vuejs怎么在服务器部署?

总结

大型Vuex应用程序的目录结构
你不知道的Vuejs
curated list(awesome-vue)
从1万篇文章中挑出的40篇最棒的 Vue 学习指南(2018版)
如何在Vue项目中使用vw实现移动端适配
Vue折腾记
Vuejs的一些总结
Vue2技术栈归纳与精粹
Vue-Layout : vue可视化布局、自动生成代码
Vue 脱坑记 - 查漏补缺(汇总下群里高频询问的xxx及给出不靠谱的解决方案)
Vue-Layout : vue可视化布局、自动生成代码
基于 Vue.js 的 PWA 解决方案帮助开发者快速搭建 PWA 应用,解决接入 PWA 的各种问题

其他

npm uninstall xxx --save
为什么 npm 要为每个项目单独安装一遍 node_modules?
关于Webstorm webpack经常不能自动热更新问题
webstrom settings的system settings默认勾选safewrite,勾选去掉就可以了
SCSS 与 Sass 异同

在线编辑器

https://codesandbox.io/s/

挖坑

https://www.jianshu.com/p/31ad32e7ec13

vue-scroller的详细用法,上拉加载下拉刷新,vue-axios获取数据的详细过程
done()方法的解释

引用本地数据

因为不能直接引用或以请求的方式获取项目本地.json后缀的json文件,
可以把json数据转换js文件格式在index.html中引入

<!DOCTYPE html>
<html lang="en">
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
    ...
    <script src="./datas.js"></script>
    ...
  </body>
</html>

datas.js

// 在本地开发时 ESLint 报错,添加下面代码即可,build 时打包不受影响
// eslint-disable-next-line no-undef
datas = {
  'identifier': '20190714',
  'name': '我的好友',
  'version': '0.0.1',
  'build': 0,
  'releaseNote': '我的好友',
  'hidden': true,
  'dependencies': {
    'piece': '0.0.1',
    'com.csair.base': '0.0.1',
    'butterfly': '0.0.1',
    'ratchet': '0.0.1'
  },
  'code': 200
}

在 页面上 xx.vue 中调用

created: function () {
  ...
  // 下面是打包时的引用;
  // 本地开发时这样写会报错,datas为未定义,开发时正常用请求的方式(axios,get)获取本地json即可
  this.data = datas  
  ...
},

或者看这个
vue项目怎么在打包后再引入一些数据文件?

在Vue-cli3.0项目的vue.config.js或vue-cli3.0之前版本的build/dev-server.js中配置:


const express = require('express')
const app = express()
var singer = require('./src/db/data/singer.json')  //本地 json文件数据,打包会打包到 js 文件中

module.exports = {
   devServer:{      
     before(app) {
       app.get('/api/singer', (req, res) => {
            res.json({              
                errno: 0,   // 这里是你的json内容
                data: singer
            })
        })
        app.get('/api/recommend', (req, res) => {
            res.json({              
                errno: 0,   // 这里是你的json内容
                data: recommend
            })
        })
    },

再组件内使用axios调用本地json文件数据:


import axios from 'axios'
axios.get("/api/singer").then((data)=>{
    console.log(data)
})

vue.config.js 配置如下:

const goods = require('./mock/goods.json')
module.exports = {
  devServer: {
    before: (app) => {
      app.post('/goods', function (req, res, next) {
        res.json(goods)
      })
    }
  }
}
src/views/Home.vue
<script>
import axios from 'axios'

export default {
  name: 'home',
  components: {
    HelloWorld
  },
  created () {
    axios.post('/goods')
  }
}
</script>
 

注意:vue cli3.0 public 文件夹才是静态资源文件,修改了vue.config.js需要重启项目。

https://www.v2ex.com/t/619038#reply23

简单的WEB目录 前段基于bootstrap 与 Jquery && 源码&& 直接下载

webdir

index.php放在你的网站根目录并且设置好你的所在目录权限即可
只展示该目录以下的所有文件
通过添加禁止显示文件夹以及后缀文件来控制显示
例如:

$this->notex=array("php","js","tgz");//不允许显示的后缀名文件
$this->notdir=array("a","phpmyadmin");//不允许显示的文件夹

支持在线播放mp4视频和MP3音频以及PDF在线预览;

eg:104.223.12.18

请不要使用index.php 以外的其他文件
不支持IE

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>demo</title>
    <script type="text/javascript" src="jquery-1.12.4.js"></script>
</head>
<body>
    <ul>
        <li class='czbtn'>
            <input name="button" type="button" class="list-button" value="查看" />
            <input name="button" type="button" class="list-button" value="修改" />
            <input name="button" type="button" class="list-button" value="删除" />
            <input name="button" type="button" class="list-button" value="提交" />
            <input name="button" type="button" class="list-button" value="more" />
        </li>
        <li class='czbtn'>
            <input name="button" type="button" class="list-button" value="查看" />
        </li>
        <li class='czbtn'>
            <input name="button" type="button" class="list-button" value="查看" />
            <input name="button" type="button" class="list-button" value="修改" />
        </li>
        <li class='czbtn'>
            <input name="button" type="button" class="list-button" value="查看" />
            <input name="button" type="button" class="list-button" value="查看" />
            <input name="button" type="button" class="list-button" value="查看" />
        </li>
        <li class='czbtn'>
            <input name="button" type="button" class="list-button" value="查看" />
        </li>
        <li class='czbtn'>
            <input name="button" type="button" class="list-button" value="查看" />
            <input name="button" type="button" class="list-button" value="修改" />
            <input name="button" type="button" class="list-button" value="删除" />
        </li>
        <li class='czbtn'>
            <input name="button" type="button" class="list-button" value="查看" />
        </li>
        <li class='czbtn'>
            <input name="button" type="button" class="list-button" value="查看" />
            <input name="button" type="button" class="list-button" value="修改" />
            <input name="button" type="button" class="list-button" value="删除" />
        </li>
        <li class='czbtn'>
            <input name="button" type="button" class="list-button" value="查看" />
        </li>
        <li class='czbtn'>
            <input name="button" type="button" class="list-button" value="查看" />
            <input name="button" type="button" class="list-button" value="修改" />
            <input name="button" type="button" class="list-button" value="删除" />
        </li>
        <li class='czbtn'>
            <input name="button" type="button" class="list-button" value="查看" />
        </li>
        <li class='czbtn'>
            <input name="button" type="button" class="list-button" value="查看" />
            <input name="button" type="button" class="list-button" value="修改" />
            <input name="button" type="button" class="list-button" value="删除" />
            <input name="button" type="button" class="list-button" value="提交" />
        </li>
        <li class='czbtn'>
            <input name="button" type="button" class="list-button" value="查看" />
            <input name="button" type="button" class="list-button" value="修改" />
        </li>
        <li class='czbtn'>
            <input name="button" type="button" class="list-button" value="查看" />
        </li>
        <li class='czbtn'>
            <input name="button" type="button" class="list-button" value="查看" />
            <input name="button" type="button" class="list-button" value="修改" />
        </li>
    </ul>
</body>
<!-- 动态获取 -->
<script>
    var ww=[];
    console.log('wo');
    var showCZ=$('.czbtn');
    for (i=0;i<showCZ.length;i++) {
        console.log($('.czbtn').eq(i).children("input").length);
        var total=$('.czbtn').eq(i).children("input").length;
        ww.push(total);
    }
    console.log(ww);
    console.log("Max:"+Math.max.apply(null, ww));//最大值
    console.log("Min:"+Math.min.apply(null, ww));//最小值
    
</script>
</html

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<script>
    var arr   = ["a","x","b","d","m","a","k","m","p","j","a"];
    var count = {};
    var pos   = {};
    //遍历arr,统计每个字母出现次数且记录位置
    arr.forEach(function(value, index){
        if(count[value]){
            count[value] ++;
            pos[value] += ","+index; 
        } else {
            count[value] = 1;
            pos[value]   = ""+index;
        }
    });
    console.log(count);
    console.log(pos);
    
    //获取出现最多的字母
    var max = 0;
    var letter;
    for(i in count){
        if(count[i] > max ){
            max    = count[i];
            letter = i; 
        }
    }
    
    console.log("最多的是:" + letter);
    console.log("位置分布:" + pos[letter]);
</script>
</body>
</html>

setInterval(function() {
  if(Date.now() >= new Date("2016-09-12 15:59:00")) {
     $("#seckillQuantity").val(1);//1盒               
     $(".buyButtons.J_buyButtons").click();//抢购按钮
     var value = $(".answerList").children().eq(0).html(); //验证码取值  
     $('#randomAnswer').val(value);//验证码填值
     $('.answer-button').children().eq(0).click();//提交验证码
  }
}, 10)

作者:leon lee
链接:https://zhuanlan.zhihu.com/p/22644277
来源:知乎
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

from https://zhuanlan.zhihu.com/p/22644277

公鸡5/只,母鸡3/只,小鸡2/只,100可以买100只鸡
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>JS之for循环实现"百钱买百鸡"</title>
    <link rel="stylesheet" href="">
    <script>
        for(var i=0;i<=20;i++){
            for(var j=0;j<=33;j++){
                for(var z=0;z<=100;z++){
                    if((i+j+z==100)&&(5*i+3*j+z/3==100)){
                        document.write('公鸡有'+i+"只;"+"母鸡有"+j+"只;"+"小鸡有"+z+"只"+"<br>");
                    }
                }
            }
        }
    </script>
</head>
<body>
</body>
</html>

两个for

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>JS之for循环实现"百钱买百鸡"</title>
    <link rel="stylesheet" href="">
    <script>
        for(var i=0;i<=20;i++){
            for(var j=0;j<=33;j++){
                z=100-i-j;
                    if((z%3==0)&&(5*i+3*j+z/3==100)){
                        document.write('公鸡有'+i+"只;"+"母鸡有"+j+"只;"+"小鸡有"+z+"只"+"<br>");
                    }
            }
        }
    </script>
</head>
<body>
</body>
</html>

奇数

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>1-100之间的奇数和</title>
    <link rel="stylesheet" href="">
    <script>
        var sum=0;
        for(var i=1;i<=100;i++){
            if(i%2==1){
                sum+=i;//sum=sum+i;
            }
        }
        document.write('1-100之间的奇数和为:'+sum);
    </script>
</head>
<body>
</body>
</html>

偶数

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>1-100之间的偶数和</title>
    <link rel="stylesheet" href="">
    <script>
        var sum=0;
        for(var i=1;i<=100;i++){
            if(i%2==0){
                sum+=i;
            }
        }
        document.write('1-100之间的偶数和为:'+sum);
    </script>
</head>
<body>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>九九乘法表</title>
    <link rel="stylesheet" href="">
    <script>
        document.write('<table border="1" ccellpadding="0" ccellpadding="0" bgcolor="#ABCDEF" width="80%">');
            for(var i=1;i<=9;++i){
                document.write('<tr>');
                    for(var j=1;j<=i;j++){
                        document.write('<td>'+i+'x'+j+'='+(i*j)+'</td>');
                    }
                document.write('</tr>');
            }
        document.write('</table>');
    </script>
</head>
<body>
</body>
</html>

倒九九乘法表

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>1-100之间的奇数和</title>
    <link rel="stylesheet" href="">
    <script>
        document.write('<table border="1" ccellpadding="0" ccellpadding="0" bgcolor="#ABCDEF" width="80%">');
            for(var i=9;i>=1;i--){
                document.write('<tr>');
                    for(var j=1;j<=i;j++){
                        document.write('<td>'+i+'x'+j+'='+(i*j)+'</td>');
                    }
                document.write('</tr>');
            }
        document.write('</table>');
    </script>
</head>
<body>
</body>
</html>

思路:

1.创建一个新的数组存放结果
2.创建一个空对象
3.for循环时,每次取出一个元素与对象进行对比,如果这个元素不重复,则把它存放到结果数组中,同时把这个元素的内容作为对象的一个属性,并赋值为1,存入到第2步建立的对象中。
说明:至于如何对比,就是每次从原数组中取出一个元素,然后到对象中去访问这个属性,如果能访问到值,则说明重复。
Array.prototype.unique3 = function(){
 var res = [];
 var json = {};
 for(var i = 0; i < this.length; i++){
  if(!json[this[i]]){
   res.push(this[i]);
   json[this[i]] = 1;
  }
 }
 return res;
}
var arr = [112,112,34,'你好',112,112,34,'你好','str','str1'];
alert(arr.unique3());