软件 | 网站 (echarts、base64图片、图片压缩、face++、swiper、snipate截图、vue.js和axios.js......)

一、软件

# 开发工具

1.Visual Studio Code：【Tools】——VS Code 插件推荐合集 (vue高亮插件(Vetur))

插件

①.Trailing Spaces:高亮那些冗余的空格，可以快速删掉
②.Vetur:vuejs
③.Awesome Flutter snippets插件（用于flutter的代码片段）----  stlss
④.open in browser 右键打开默认浏览器，alt+b
⑤.vscode-icons 左边栏文件图标
⑥.code runner 在vscode里执行js
⑦.background/window opacity（https://www.cnblogs.com/chinabin1993/p/7151361.html）

快捷键

ctrl + shift + `     开启cmd （cls 清屏）
ctrl + shifr + k      删除一行
Alt+Shift+F          进行格式化
ctrl + k + 0          折叠代码
ctrl + k + j           展开代码
Ctrl  +  [      和   Ctrl  +  ]     实现文本的向左移动或者向右移动（光标在文本右边table不起作用）
ctrl + H　　　　　　替换
ctrl + shift + alt + t    大小写转换

　　设置缩进2个空格

文件不能直接拖进vscode的问题: 设置 -> 兼容性 -> 去除“已管理员身份运行此程序”

2.HBuilder X
(alt + w 文档结构图; alt + F3 匹配文档选中的全部字符； ctrl + g 搜索第几行代码)

（https://blog.csdn.net/qq_36595013/article/details/80916629）

初始化：1. 插件：工具- 插件安装； 2. 代码片段：工具 - 代码块设置 - javascript代码块（文件在当前文件）

3.sublime text（让sublime text3支持Vue语法高亮显示） (ctrl + f3匹配文档选中的全部字符; ctrl+shift+p 搜索本地插件 )

[下载地址](https://www.sublimetext.com/)

中文：ctrl+shift+p -> install(回车) -> install选择Package Control: Install Package -> chinese选择ChineseLocalizations -> 重启

~~~~

4.wamp/phpstudy

5.teamviewer 远程工具

6.夜神模拟器

7.Navicat for MySQL

ctrl+q 打开查询窗口
ctrl+r 运行查询窗口的sql语句
ctrl+shift+r 只运行选中的sql语句

8.sourceTree

SSH绑定：工具 -> 选项 -> 一般里面的ssh客户端选OpenSSH,密钥在C盘

#辅助软件

1.Snipaste(截图,可固定截图)

2.迅捷画图

3.Faststone

4.tyeora

5.sourcetree

6.teamviewer

9.free vpn

二、网站

#插件

1.BootCDN

2.Swiper常用于移动端网站的内容触摸滑动

3.WOW.js 博主教程

4.fullPage.js 一个基于 jQuery 的插件，它能够很方便、很轻松的制作出全屏网站。

5.flexSlider FlexSlider插件的详细设置参数

<!DOCTYPE html><html>
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Home</title>
</head>
<style type="text/css">
    ul {

    }
    ul > li {
        display: block;
    }
    ul > li img {
        width: 100%;
    }
    .flex-control-nav {
        text-align: center;
    }
    .flex-control-nav li {
        display: inline-block;
        list-style: none;
    }
    .flex-control-nav li a {
        display: inline-block;
        color: #fff;
        margin: 0 2px;
        width: 0px;
        height: 0px;
        border: 4px solid orange;
        border-radius: 50%;
    }
</style>


<body>
<div class="flexslider">
    <ul class="slides">
        <!-- one -->
        <li>
            <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3593556755,1784883770&fm=15&gp=0.jpg">
        </li>
        <!-- two -->
        <li>
            <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3593556755,1784883770&fm=15&gp=0.jpg">
        </li>
        <!-- three -->
        <li>
            <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3593556755,1784883770&fm=15&gp=0.jpg">
        </li>
        <!-- four -->
        <li>
            <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3593556755,1784883770&fm=15&gp=0.jpg">
        </li>
    </ul>
</div><!-- .flexslider -->

<script src="https://cdn.bootcss.com/jquery/2.1.4/jquery.js"></script>
<script src="https://cdn.bootcss.com/flexslider/2.1/jquery.flexslider.js"></script>
<script type="text/javascript">
    $(window).load(function(){
        $('.flexslider').flexslider({
            animation: "slide",
            prevText: "",               //String:  上一项的文字
              nextText: "",               //String:  下一项的文字
        });
    });
</script>
</body>
</html>

View Code

6.Zepto.js 一个针对移动设备优化过的轻量 jQuery

7.mock.js 脱离后端独立开发，实现增删改查功能教程

8. Emmet(zencoding): 通过'tab'按钮快速生成h5和css3代码，hbuider和vscode都有内嵌；例子

9. https://ftp.mozilla.org/pub/firefox/releases/ 火狐各版本

设计： 200种渐变背景

#工具

 ①.字符串 escape 和 unescape

小程序测试 (只有登录和验证短信后台接口)　
'%E5%B0%8F%E7%A8%8B%E5%BA%8F%E6%B5%8B%E8%AF%95%20(%E5%8F%AA%E6%9C%89%E7%99%BB%E5%BD%95%E5%92%8C%E9%AA%8C%E8%AF%81%E7%9F%AD%E4%BF%A1%E5%90%8E%E5%8F%B0%E6%8E%A5%E5%8F%A3)'

不会被编码字符：  ASCII字母、数字、@*/+
作用：是让它们在所有电脑上可读
  ②.url 

    编码：encodeURI、encodeURIComponent

    解码：decodeURI、decodeURIComponent

encodeURI 和 encodeURIComponent方法：都不会对下列字符编码  ASCII字母、数字、~!*()             // shift + `/1/8/9/0
encodeURI 还包括不会对下列字符编码：@#$&=:/,;?+''　　　　　　　　　　　　　　　　　　　　　　　　　 
encodeURIComponent 比较适合编码url参数
encodeURI 比较适合编码完整的url,一般转空格(%20)

6. 文字转语音

7.在线文字转换语音软件

8.Flutter

#工具

0.caniuse

1.MDN CSDN

2.亿方云（云存储）

3.翼狐网

模板之家

①、海底潜水服务公司网站模板

②、极简艺术生活design设计师作品官网模板

4.懒设计