标签 JS 下的文章

泛型，很多人因它放弃学习 TypeScript？
https://segmentfault.com/a/1190000021219586

https://github.com/joye61/typescript-tutorial
TypeScript 速成教程
https://github.com/semlinker/awesome-typescript

http://www.typescriptlang.org/
typescript文档
TypeScript中文
使用Visual Studio Code + Node.js搭建TypeScript开发环境
https://segmentfault.com/a/1190000006124164

https://segmentfault.com/a/1190000010130073
TypeScript 资源集

我写的第一本书《TypeScript 入门教程》
https://segmentfault.com/a/1190000008150016

https://segmentfault.com/a/1190000013949409
认识 TypeScript https://segmentfault.com/blog/ts-handbook

TypeScript学习
https://www.jianshu.com/p/e9757f1e9236

https://www.typescriptlang.org/docs/home.html
TypeScript 教程

零碎

understanding-any-and-unknown-in-typescript-difference-between-never-and-void
TypeScript 中 any 和 unknown 的区别

typescript ?: !:
可选？

完全理解jQuery源代码，在前端行业算什么水平？
如何学习jQuery？
逐行分析 jQuery 源码的奥秘
逐行分析jQuery源码
jQuery源码解析（架构与依赖模块）
jQuery源码分析系列
jQuery1.6.1源码分析系列（停止更新）

https://github.com/mumuy/widget
A set of widgets based on jQuery&&javascript.
一套基于jquery或javascript的插件库 ：

轮播、标签页、滚动条、下拉框、对话框、搜索提示、城市选择(城市三级联动)、日历等

https://jquerywidget.com/

妙味课堂 jQuery集训营课程大纲

插件

jQuery插件开发模式
http://www.cnblogs.com/Wayou/p/jquery_plugin_tutorial.html
https://segmentfault.com/a/1190000007076651
jQuery One Page Nav

Owl Carousel 2 -支持触摸屏的响应式jQuery旋转木马插件
http://www.htmleaf.com/jQuery/Slideshow-Scroller/201502161387.html

动态加载无法绑定事件处理

$('body').on("input",'tags',function(e){});

动态添加事件后绑定此事件

让jquery:contains选择器 忽略大小写

使用前重写覆盖一下contains方法即可：

此处优化：contains不再区分大小写

jQuery.expr[':'].Contains = function(a, i, m) {
    return jQuery(a).text().toUpperCase()
    .indexOf(m[3].toUpperCase()) >= 0;
};
 
jQuery.expr[':'].contains = function(a, i, m) {
  return jQuery(a).text().toUpperCase()
  .indexOf(m[3].toUpperCase()) >= 0;
};

$("#statisticsViewList li").hide().find(".name").filter(":contains('"+name+"')").parents("li").show();

让jquery:contains选择器 忽略大小写
使用前重写覆盖一下contains方法即可：

<%--此处优化：contains不再区分大小写--%>

jQuery.expr[':'].Contains = function(a, i, m) { return jQuery(a).text().toUpperCase() .indexOf(m[3].toUpperCase()) >= 0; }; jQuery.expr[':'].contains = function(a, i, m) { return jQuery(a).text().toUpperCase() .indexOf(m[3].toUpperCase()) >= 0; };
$("#statisticsViewList li").hide().find(".name").filter(":contains('"+name+"')").parents("li").show();

防重复提交

怎样防止重复发送 Ajax 请求？

jQuery的 $.ajax防止重复提交的两种方法(推荐)
依赖jQ

$.ajax({
    type: 'POST',
    url: 'url',
    cache:false,
    dataType: 'json',
    data: {},
    async: false,
    beforeSend:function(){ 
        //触发ajax请求开始时执行
        //改变提交按钮上的文字并将按钮设置为不可点击
        //加判断条件，使得不能提交
    }, 
    success: function (msg, textStatus) 
    {
        //对上面的判断条件处理，使得能提交
    },
    error: function (textStatus) 
    {
        
    },
    complete: function(msg, textStatus)
    { 
    
    } 
});

Prefilters是一个预过滤器，在每个请求之前被发送和$.ajax()处理它们前处理。
options 是请求的选项
originalOptions 值作为提供给Ajax方法未经修改的选项，因此，没有ajaxSettings设置中的默认值
jqXHR 是请求的jqXHR对象
以上内容的核心思想是维护一个队列，发送请求时，将请求加入队列，请求响应后，从队列中清除，这就保证了在任一时刻只能有一个同样的请求发送.
局限性：仅仅是前台防止jQuery的ajax请求。对于非jquery的ajax请求，不起作用。因为使用的是jquery的ajaxPreFilter函数，仅仅对jquery的ajax请求有作用。
2）按钮每次点击都会向后端发送请求，下面的demo实现了多次点击按钮之后，只保证最后一次点击的请求能够成功。

var pendingRequests = {};
jQuery.ajaxPrefilter(function( options, originalOptions, jqXHR ) {
    var key = options.url;
    console.log(key);
    if (!pendingRequests[key]) {
    pendingRequests[key] = jqXHR;
    }else{
    //jqXHR.abort(); //放弃后触发的提交
    pendingRequests[key].abort(); // 放弃先触发的提交
    }
    var complete = options.complete;
    options.complete = function(jqXHR, textStatus) {
    pendingRequests[key] = null;
    if (jQuery.isFunction(complete)) {
    complete.apply(this, arguments);
    }
    };
});

https://nodejs.org/dist/

《Node.js 调试指南》

@ruanyf
Chrome 浏览器允许将任意 HTTP 请求，转成 curl 命令的形式，从而在命令行发出这个请求。
这里还有一个小工具，可以将 curl 请求转成 Node 脚本。https://curl.trillworks.com/#node

版本号

使用NPM下载和发布代码时都会接触到版本号。NPM使用语义版本号来管理代码，这里简单介绍一下。

语义版本号分为X.Y.Z三位，分别代表主版本号、次版本号和补丁版本号。当代码变更时，版本号按以下原则更新。

如果只是修复bug，需要更新Z位。
如果是新增了功能，但是向下兼容，需要更新Y位。
如果有大变动，向下不兼容，需要更新X位。
版本号有了这个保证后，在申明第三方包依赖时，除了可依赖于一个固定版本号外，还可依赖于某个范围的版本号。例如"argv": "0.0.x"表示依赖于0.0.x系列的最新版argv。

NPM支持的所有版本号范围指定方式可以查看官方文档。
Node 调试工具入门教程

node的http服务器

var http = require('http');
var fs = require('fs');
var documentRoot = 'D:/20180626/code'; //设置文件的根目录，可以修改为个人的自定义目录。
var server = http.createServer(function(req,res) {
    var url = req.url;
    var file = documentRoot + url;
    console.log(url);
    fs.readFile(file,function(err,data) {
        if(err){
            res.writeHeader(404,{
                'content-type':'text/html;charset="utf-8"'
            });
            res.write('<h1>404错误</h1><p>你要找的页面不存在</p>');
            res.end();
        }else{
            res.writeHeader(200,{
                'content-type':'text/html;charset=utf-8"'
            });
            res.write(data);
            res.end();
        }
    });
}).listen(8888);//设置的端口号，建议为6000以上。
console.log('服务器开启成功');

请输入图片描述
以上图来自这里
各位程序猿们，如果你觉得老板 10 天要你们上线一个 App 是一个丧心病狂的事情，
那么可以多想想这位哥。
Youtube 上有位哥的采访，你可以听听大神当年的故事。
https://www.youtube.com/watch?v=IPxQ9kEaF8c
当然，码农和大神的区别在于：遇到这种事情，10 天以后码农死掉了，而大神成功了。
只是但凡这种极速上线的事情，都会留下一堆的坑，大神和码农的的区别，也就是水洼和天坑的区别。

作者：罗志宇
链接：https://www.zhihu.com/question/31415286/answer/58022648
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

js混淆

https://javascriptobfuscator.herokuapp.com/
http://www.jsfuck.com/
移动时代的前端加密
从零开始的webpack生活-0x004：js压缩混淆
https://www.v2ex.com/t/381946
https://www.v2ex.com/t/392624
https://www.v2ex.com/t/363167

JavaScript

前端程序员经常忽视的一个JavaScript的面试试题
妙味课堂 JS 实战开发课程大纲
JavaScript (脚本之家)
JavaScript教程 (廖雪峰)
React.js-demo (阮一峰)(GitHub)
webpack-demos (阮一峰)
react-babel-webpack-boilerplate (阮一峰)
ECMAScript的兼容 && 兼容包
ECMAScript5.1中文版 + ECMAScript3 + ECMAScript（合集） && 英文版
30分钟掌握ES6/ES2015核心内容（上）
30分钟掌握ES6/ES2015核心内容（下）
ECMAScript 6 入门 (阮一峰)(GitHub)
ES6 全套教程 ECMAScript6 (原著:阮一峰)
JavaScript 标准参考教程（alpha） (阮一峰)(GitHub) 新地址 https://wangdoc.com/
悟透JavaScript
原生态纯JavaScript 100大技巧大收集
前端日常：JavaScript验证
JS实战实例教程
前端代码异常日志收集与监控
stylus中文版参考文档之综述
JavaScript深入系列(15篇)、JavaScript专题系列、ES6系列、React系列
Awesome JavaScript

递归

js 递归、非递归生成树
https://www.cnblogs.com/ygunoil/p/12524806.html

浮点型数据使用注意事项
JavaScript 中的所有数据都是以 64 位浮点型数据(float) 来存储。

所有的编程语言，包括 JavaScript，对浮点型数据的精确度都很难确定：
var x = 0.1;
var y = 0.2;
var z = x + y // z 的结果为 0.3
if (z == 0.3) // 返回 false
为解决以上问题，可以用整数的乘除法来解决：
var z = (x 10 + y 10) / 10; // z 的结果为 0.3

不推荐使用 TAB 键来缩进，因为不同编辑器 TAB 键的解析不一样。

关于js三元表达式，多个判断条件的写法
以两个判断条件为例，直接上代码：

var a = 3;
var b = a === 1 ? '是1' : (a === 2 ? '是2' : '不是1也不是2')
console.log(b); //不是1也不是2

Bridge

https://github.com/wendux/DSBridge-Android
https://github.com/wendux/DSBridge-IOS
原生与 JS 交互，里面有demo 例子

模块化规范

js模块化编程之彻底弄懂CommonJS和AMD/CMD！
CommonJS、requirejs、ES6的对比
Js apply call方法 详解
javascript 六种数据类型（一）
10 个技巧，让你更专业地使用 console 进行 JS 调试
High performance JavaScript templating engine

零碎

从谷歌的JavaScript编写风格中，13 点值得我们注意的！ && google jsguide
不会Object.defineProperty你就out了 && MDN

聊聊函数节流（throttle）和函数去抖（debounce）

库

https://unpkg.com/browse/vue@2.6.10/
https://cdn.jsdelivr.net/npm/vue/
在 unpkg 和 cdnjs 上获取

https://github.com/lodash/lodash/ && 中文文档地址 && 中文文档2
https://www.npmjs.com/package/ramda && 中文
Lodash，你正在使用的JavaScript库
轻量高效的开源JavaScript插件和库

http://www.freejs.net/

节流 (throttle) 让一个函数不要执行的太频繁，减少执行过快的调用，叫节流
去抖 (debounce) 去抖就是对于一定时间段的连续的函数调用，只让其执行一次
https://segmentfault.com/a/1190000025137536
防抖与节流 ，优化

屏蔽F12

<script type="text/javascript">
window.onload = function() {
    document.onkeydown = function() {
       var e = window.event || arguments[0];
       //屏蔽F12
       if(e.keyCode == 123) {
           return false;
           //屏蔽Ctrl+Shift+I
       } else if((e.ctrlKey) && (e.shiftKey) && (e.keyCode == 73)) {
           return false;
         //屏蔽Ctrl+Shift+J
       } else if((e.ctrlKey) && (e.shiftKey) && (e.keyCode == 74)) {
           return false;
           //屏蔽Shift+F10
       } else if((e.shiftKey) && (e.keyCode == 121)){
           return false;
       } else if(event.ctrlKey  &&  window.event.keyCode==83 ){
           return false;
       }
   };
   //屏蔽右键单击
   document.oncontextmenu = function() {
       return false;
   }

   //debugger
   var hasDebugger = false;
    var start = new Date();
    try {
    // 新建一个匿名函数，这样 debugger 得不到任何信息
        (function() {}).constructor('debugger')()
        if (new Date() - start > 200) {
            hasDebugger = true;
            window.close(); //关闭当前窗口(防抽)
            window.location="about:blank"; //将当前窗口跳转置空白页
        }
    } catch(e) {
        //alert(hasDebugger)
        window.close(); //关闭当前窗口(防抽)
        window.location="about:blank"; //将当前窗口跳转置空白页
    }
}
</script>

语言排名

排名

总结

EventUtil——跨浏览器的事件对象
JavaScript 的 this 原理
JS前端开发联盟群
javascript学习思维导图（收藏）
[转] js async await 终极异步解决方案

显示多少帧
https://www.testufo.com/

const showFPS = (function () {

// noinspection JSUnresolvedVariable, SpellCheckingInspection
const requestAnimationFrame =

window.requestAnimationFrame || // Chromium window.webkitRequestAnimationFrame || // Webkit window.mozRequestAnimationFrame || // Mozilla Geko window.oRequestAnimationFrame || // Opera Presto window.msRequestAnimationFrame || // IE Trident? function (callback) { // Fallback function window.setTimeout(callback, 1000 / 60); };
let dialog;
let container;
let fps = 0;
let lastTime = Date.now();
function setStyle(el, styles) {

for (const key in styles) { el.style[key] = styles[key]; }
}

function init() {

dialog = document.createElement('dialog'); setStyle(dialog, { display: 'block', border: 'none', backgroundColor: 'rgba(0, 0, 0, 0.6)', margin: 0, padding: '4px', position: 'fixed', top: 0, right: 'auto,', bottom: 'auto', left: 0, color: '#fff', fontSize: '12px', textAlign: 'center', borderRadius: '0 0 4px 0' }); container.appendChild(dialog);
}

function calcFPS() {

let offset = Date.now() - lastTime; fps += 1; if (offset >= 1000) { lastTime += offset; displayFPS(fps); fps = 0; } requestAnimationFrame(calcFPS);
}

function displayFPS(fps) {

const fpsStr = `${fps} FPS`; if (!dialog) { init(); } if (fpsStr !== dialog.textContent) { dialog.textContent = fpsStr; }
}
return function (parent) {

container = parent; calcFPS();
};
}());
showFPS(document.body);

Regular Expression

马上收藏！史上最全正则表达式合集
密码强度的正则表达式（JavaScript）总结
身份证号码的正则表达式及验证详解(JavaScript，Regex)
https://m.w3cschool.cn/regex_rmjc/
https://www.w3cschool.cn/regex_rmjc/
正则表达式30分钟入门教程

过滤文章中多余的------
//正则 匹配多余的
var arr = ['----------------------------------------------------------------------------------------------------'];//100个
var arr1 = ['--------------------------------------------------'];//50个
var arr2 = ['-------------------------'];//25个-
var arr3 = ['-----','----------'];//5,10个-
//多次匹配和一次匹配的结果不同
//var arr3 = ['-----','------','-------','--------','---------','----------'];//5,6,7,8,9,10个
var res = it.internalNotic.replace(new RegExp(arr.join('|'),'img'),'-');
var res1 = res.replace(new RegExp(arr1.join('|'),'img'),'-');
var res2 = res1.replace(new RegExp(arr2.join('|'),'img'),'-');
var res3 = res2.replace(new RegExp(arr3.join('|'),'img'),'-');
console.log(res);
console.log(res1);
console.log(res2);
console.log(res3);

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title></title>
  <link rel="stylesheet" href="">
  <script src="jquery.js"></script>
</head>
<body>
  <table class="list" style="width:100%;">
        <tbody><tr>
          <th style="width: 20%; min-width: 168px; max-width: 192px;">审核用户</th>
          <th style="width: 20%; min-width: 120px; max-width: 144px;">审核结果</th>
          <th style="width: 20%; min-width: 120px; max-width: 144px;">审核日期</th>
          <th style="width:60%">相关说明</th>
        </tr>
        </tbody><tbody oddclass="list-odd" evenclass="list-even" hoverclass="list-hover" class="shsjvalidation">
          
            <tr>
              <td style="min-width: 168px; max-width: 192px;">
                葛大爷
              </td>
              <td style="min-width: 120px; max-width: 144px;">
                审核中
              </td>
              <td style="min-width: 120px; max-width: 144px;">2017-06-02</td>
              <td style="white-space: inherit; overflow: inherit; text-overflow: inherit;">
                
              </td>
            </tr>
          
            <tr>
              <td style="min-width: 168px; max-width: 192px;">
                a的上级
              </td>
              <td style="min-width: 120px; max-width: 144px;">
                同意
              </td>
              <td style="min-width: 120px; max-width: 144px;">2017-06-02</td>
              <td style="white-space: inherit; overflow: inherit; text-overflow: inherit;">
                
              </td>
            </tr>
          
        </tbody>
      </table>
<script>
    str="审核中";
    var reg = /审核中/ig;
    var shstr = $(".shsjvalidation tr td:nth-child(2)").text();
    console.log(shstr);
    var newshsjstr = $(".shsjvalidation tr td:nth-child(3)").text();
    console.log(newshsjstr);
    $('.shsjvalidation tr td:nth-child(2)').each(function(index){
    // console.log("这是第"+index+"个: "+$(this).html());
    console.log($(this).html());
    if($(this).html().match(str)){
      // alert("ok");
      $(this).next("td").css("background-color","yellow");
      // $('.shsjvalidation tr td:nth-child(2)').css("background-color","yellow");
    }
    })
    
  </script>
</body>
</html>

自行添加jq文件

var srcreg=/^.*\.(jpeg|jpg|gif|png|bmp)$/i;
var srcpic=data[i].gdtpwj.match(srcreg);//判断是否为图片后缀
console.log(srcpic);
if(srcpic){
$('#head-img').html('<img src="'+ data[i].gdtpwj +'" />');
}
else{
return false;
}

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