中软Day01——前端安装环境

中软Day01

安装软件教程

1. MySQL

   • 卸载步骤

     • 在控制面板中卸载mysql软件
     • 卸载过后删除C:\Program Files (x86)\MySQL该目录下剩余了所有文件，把mysql文件夹也删了
     • windows+R运行“regedit”文件，打开注册表
     • 删除注册表：HKEY_LOCAL_MACHINE\SYSTEM\ControlSet001\Services\Eventlog\Application\MySQL文件夹
     • 删除HKEY_LOCAL_MACHINE\SYSTEM\ControlSet002\Services\Eventlog\Application\MySQL文件夹，如果没有可以不用删除了。我的没有就没删
     • 删除C盘下的C:\ProgramData\MySQL 所有文件，如果删除不了则用360粉碎掉即可，该programData文件是隐藏的默认，设置显示后即可见
     • 关键！！！！删除C:\Documents and Settings\All Users\Application Data\MySQL下的文件夹，一定要删
     • 查看服务内是否还有MySQL服务，没有在cmd中用命令行删除
     • 最好重启下电脑，重新安装就可以了

   • 安装步骤

     • 打开下载的mysql安装文件mysql-5.0.27-win32.zip，双击解压缩，运行“setup.exe”
       

     • 选择安装类型，有“Typical（默认）”、“Complete（完全）”、“Custom（用户自定义）”三个选项，选择“Custom”，按“next”键继续
       

     • 在“Developer Components（开发者部分）”上左键单击，选择“This feature,

       and all subfeatures, will be installed on local hard drive.”，即“此部分，及下属子部分内容，全部安装在本地硬盘上”。在上面的“MySQL Server（mysql服务器）”、“Client Programs（mysql客户端程序）”、“Documentation（文档）”也如此操作，以保证安装所有文件。点选“Change…”，手动指定安装目录
       

     • 填上安装目录，我的是“F:\Server\MySQL\MySQL Server 5.0”，也建议不要放在与操作系统同一分区，这样可以防止系统备份还原的时候，数据被清空。按“OK”继续
       

       确认一下先前的设置，如果有误，按“Back”返回重做。按“Install”开始安装
       
       

     • 正在安装中，请稍候，直到出现下面的界面
       
       这里是询问你是否要注册一个mysql.com的账号，或是使用已有的账号登陆mysql.com，一般不需要了，点选“Skip Sign-Up”，按“Next”略过此步骤。继续则完成MYSQL的安装。

   • MySQL的配置

     • 安装完成了，出现如下界面将进入mysql配置向导
       
       

     • 选择配置方式，“Detailed Configuration（手动精确配置）”、“Standard Configuration（标准配置）”，我们选择“Detailed Configuration”，方便熟悉配置过程
       

     • 选择服务器类型，“Developer Machine（开发测试类，mysql占用很少资源）”、“Server Machine（服务器类型，mysql占用较多资源）”、“Dedicated MySQL Server Machine（专门的数据库服务器，mysql占用所有可用资源）”
       

     • 选择mysql数据库的大致用途，“Multifunctional Database（通用多功能型，好）”、“Transactional Database Only（服务器类型，专注于事务处理，一般）”、“Non-Transactional Database Only（非事务处理型，较简单，主要做一些监控、记数用，对MyISAM数据类型的支持仅限于non-transactional），按“Next”继续

     • 选择网站并发连接数，同时连接的数目，“Decision Support(DSS)/OLAP（20个左右）”、“Online Transaction Processing(OLTP)（500个左右）”、“Manual Setting（手动设置，自己输一个数）”

     • 是否启用TCP/IP连接，设定端口，如果不启用，就只能在自己的机器上访问mysql数据库了，在这个页面上，您还可以选择“启用标准模式”（Enable Strict Mode），这样MySQL就不会允许细小的语法错误。如果是新手，建议您取消标准模式以减少麻烦。但熟悉MySQL以后，尽量使用标准模式，因为它可以降低有害数据进入数据库的可能性。按“Next”继续
       

     • 就是对mysql默认数据库语言编码进行设置（重要），一般选UTF-8，按 “Next”继续

     • 选择是否将mysql安装为windows服务，还可以指定Service Name（服务标识名称），是否将mysql的bin目录加入到Windows PATH（加入后，就可以直接使用bin下的文件，而不用指出目录名，比如连接，“mysql.exe -uusername -ppassword;”就可以了，不用指出mysql.exe的完整地址，很方便），我这里全部打上了勾，Service Name不变。按“Next”继续

     • 询问是否要修改默认root用户（超级管理）的密码。“Enable root access from remote machines（是否允许root用户在其它的机器上登陆，如果要安全，就不要勾上，如果要方便，就勾上它）”。最后“Create An Anonymous Account（新建一个匿名用户，匿名用户可以连接数据库，不能操作数据，包括查询）”，一般就不用勾了，设置完毕，按“Next”继续

     • 确认设置无误，按“Execute”使设置生效，即完成MYSQL的安装和配置
       注意：设置完毕，按“Finish”后有一个比较常见的错误，就是不能“Start service”，一般出现在以前有安装mysql的服务器上，解决的办法，先保证以前安装的mysql服务器彻底卸载掉了；不行的话，检查是否按上面一步所说，之前的密码是否有修改，照上面的操作；如果依然不行，将mysql安装目录下的data文件夹备份，然后删除，在安装完成后，将安装生成的 data文件夹删除，备份的data文件夹移回来，再重启mysql服务就可以了，这种情况下，可能需要将数据库检查一下，然后修复一次，防止数据出错。

     ​

2. sublime

   • 直接下载安装包解压缩到Packages目录（菜单=>preferences=>Browse Packages显示已安装的插件）

   • 备份插件方法

     • 插件的备份就显得非常的重要（譬如：各平台同步；更换系统/电脑，迅速使用已安装的插件）。只需将Packages（Preferences > Browse Packages）中内容拷贝一份，同步云盘、Github等即可，每有所需只要 Down 下来，替换掉原 Packages 下内容就好

   • 命令面板安装

     • ctrl+shift+p 输入 install package 回车
       ​ Package Control 安装成功！

   • 用Package Control安装插件

     • 按下Ctrl+Shift+P 调出命令面板，在搜索框输入pc,可以看到并没有出现package：…

     • 按Ctrl+ ~(此符号为tab按键上面的按键) 调出console（注：避免热键冲突）

     • 搜索packagecontrol，登录https://packagecontrol.io/网站，点击右上Install Now

     • 复制SUBLIME TEXT 3代码，将粘贴以下代码到命令行并回车，如果看到底部有[ !]来回晃动，则表示正在下载
       如图，上面的代码复制到红线地方，按回车键，会看到下面出现东西在左右摆动，说明正在下载。

     • 在调出搜索框，输入pc,下拉框出现Package Control：…的一系列选项，表示安装成功

     • 重启Sublime Text 3
       
       ​ 如果在Perferences->package settings中看到package control这一项，则安装成功

     • 输入install 调出 Install Package 选项并回车，然后在列表中选中要安装的插件

   • 前端安装插件

     安装方法：Ctrl+Shift+P → Package Control: Install Package → CSS3（对应的插件名称）
     查看安装情况：头部菜单中的View → Show Console

     • emmet

       • 前端神器。一个可以极大提高web开发者HTML和CSS工作效率的工具箱组件。
       • 代码编辑利器，只需按约定的缩写形式书写而不用写整个代码，然后按“tab”键，这些缩写就会自动扩展为对应的代码内容。

     • CSS3

       • CSS3语法高亮、CSS语法提示，美中不足的是缺少游览器私有属性高亮。

     • CSS Extended Completions

       • 关联CSS文件，智能提示css文件中的类名，非常好用。

     • JavaScript Completions

       • 支持javascript原生语法提示，妈妈再也不用担心我输入document.getElementById(id)。

     • jQuery

       • 为jQuery的大部分方法提供了示例代码段，让jQuery的API更加容易使用。

     • ColorHighlighter

       • 它可以展示你所选择的颜色代码（像“#FFFFFF”, “rgb(255,255,255)”, “white”）的真正颜色。同时它还包含一个颜色选择器让你可以方便地更改颜色。

     • BracketHighlighter

       • 括号以及标签层级显示，不用担心选中的代码属于哪个代码块，一目了然。
       • 高亮显示[], (), {}, “”, ”, 符号，便于查看起始和结束标记

     • HTML-CSS-JS Prettify

       • THML、CSS、JS代码格式化，压缩过后的代码可以通过该工具复原，快捷键是ctrl+shift+h。

     • Alignment

       • 对定义的变量进行智能对齐,一般是“=”号对齐，默认的快捷键是Ctrl+Alt+A，但这个热键和QQ截屏的热键冲突不能使用，需要自己重新设置，可以设置成Ctr+Alt+Shift+A，以下粘贴到Key-Bindings-User里面：{ “keys”: [“ctrl+alt+shift+a”], “command”: “alignment” },

     • AndyJS2

       • JS代码自动提示

     • AlignTab

       • 使用正则表达式来帮助代码对齐，比如几行代码以=号对齐。

     • AutoFileName

       • 快速列出想要引用的文件夹里所有文件的名字。

     • ColorPicker

       • 如果你经常要查看或设置颜色值，这个插件可以很方便地调用你本机的调色板应用。（译者扩充：）这是一个双向的功能，你既可以在调色板中选择一个颜色，然后按“确定”按钮把该值填写到 SublimeText 中活动文档的当前位置，也可以在活动文档中选择一个颜色的值，按此插件的快捷键就会在显示的调色板中定位到该值所对应的颜色。

     • JsFormat

       • 可以自动帮助你格式化JavaScript代码，形成一种通用的格式，比如对压缩、空格、换行的js代码进行整理，使得js代码结构清晰，易于观看。在已压缩的JS文件中，右键选择jsFormat或者使用默认快捷键（Ctrl+Alt+F）

     • DocBlockr

       • 可以快速生成各种注释格式，当需要生成注释符号时，输入/*、/然后回车系统即帮你自动生成，如果/后面刚好是一个函数的定义，注释格式会根据函数的参数生成。

     • Sidebar Enhancements

       • 增强侧栏文件右键功能。

     • sublimeCodeIntel

       • JS代码自动补全，支持多种语言的自动补全。

     • SideBarEnhancements

       • 一款很实用的右键菜单增强插件

     • TrailingSpaces

       • 能高亮显示多余的空格和Tab

     • Terminal

       • 可以允许在Sublime Text 3中打开cmd命令窗口
         安装好该插件后即可使用快捷键Ctrl+Shift+T呼出命令行窗口

     • TypeScript Syntax

       • TypeScript语法高亮

     • Autoprefixer

       • CSS3私有前缀自动补全
         在输入CSS3属性后（冒号前）按Tab键即可

     • vue syntax hightlight

       • .vue语法高亮

   • 快捷键

     • 操作
       Ctrl + `： 打开Sublime Text控制台（Esc退出）
       Ctrl+Shift+P：打开命令面板（Esc退出）
       Ctrl + K, Ctrl + B： 组合键，显示或隐藏侧栏
       Alt ：光标调到菜单栏，↑↓←→ 移动光标
     • 编辑
       Ctr+Shift+D：复制粘贴光标所在行
       Alt+.：关闭标签
       Ctrl+/：用//注释当前行。
       Ctrl+Shift+/：用/**/注释。
       Ctrl + Enter： 在当前行下面新增一行然后跳至该行
       Ctrl + Shift + Enter： 在当前行上面增加一行并跳至该行
       Ctrl + ←/→： 进行逐词移动，
       Ctrl + Shift + ←/→： 进行逐词选择
       Ctrl + Shift + ↑/↓： 移动当前行（文件会被修改）
       Ctrl+KK ：从光标处删除至行尾
       Ctrl+K Backspace ：从光标处删除至行首
       Ctrl+Z：撤销
       Ctrl+Y：恢复撤销
       Ctrl+J：合并行（已选择需要合并的多行时）
       Ctrl + [： 选中内容向左缩进
       Ctrl + ]： 选中内容向右缩进
     • 选择
       Alt+F3：选中关键词后，选中所有相同的词。可以配合Ctrl+D使用。
       Ctrl + D Ctrl + K Ctrl + U：Ctrl + D选择当前光标所在的词并高亮该词所有出现的位置，再次Ctrl + D，会选择该词出现的下一个位置。在多重选词的过程中，Ctrl + K会将当前选中的词进行跳过在多重选词的过程中，Ctrl + U进行回退
       Ctrl+L ：选择光标所在整行
       Ctrl+X：删除光标所在行
       Ctrl + J： 把当前选中区域合并为一行
       Ctrl+Shift+M：选中当前括号内容，重复可选着括号本身
     • 查找
       （如果有窗口弹出都是Esc退出弹出窗口）
       Ctr+p：输入@显示容器（css或者js里面）
       Ctrl + F： 调出搜索框
       Ctrl + H： 调出替换框进行替换
       Ctrl + Shift + H： 输入替换内容后，替换当前关键字
       Ctrl + Alt + Enter： 输入替换内容后，替换所有匹配关键字。(NOTE: 注意此时如果鼠标焦点在编辑窗口中，则替换失败，将鼠标焦点调到替换框中，Ctrl + Alt + Enter才会起作用)
       Ctrl + Shift + F： 开启多文件搜索&替换
       Alt + C： 切换大小写敏感（Case-sensitive）模式
       Alt + W： 切换整字匹配（Whole matching）模式
       Alt + R： 切换正则匹配模式的开启/关闭
     • 跳转
       Ctrl + P：列出当前打开的文件（或者是当前文件夹的文件），输入文件名然后 Enter 跳转至该文件，输入@symbol跳转到symbol符号所在的位置，输入#keyword跳转到keyword所在的位置，输入:n跳转到文件的第n行
       Ctrl + R：列出当前文件中的符号（例如类名和函数名，但无法深入到变量名），输入符号名称 Enter 即可以跳转到该处。
       会列出Markdown文件的大纲
       F12： 快速跳转到当前光标所在符号的定义处（Jump to Definition）。比如当前光标所在为一个函数调用，F12会跳转至该函数的定义处。
       Ctrl + G： 输入行号以跳转到指定行
       Ctrl+M：跳转到括号另一半。
     • 窗口和Tab页
       Ctrl + N： 在当前窗口创建一个新标签
       Ctrl + Shift + N： 创建一个新窗口（该快捷键 和搜狗输入法快捷键冲突）
       Ctrl + W： 关闭标签页，如果没有标签页了，则关闭该窗口
       Ctrl+Shift+W：关闭所有打开文件
       Ctrl + Shift + T： 恢复刚刚关闭的标签。
       Ctrl +Tag：移动标签。
     • 屏幕
       F11： 切换普通全屏
       Shift + F11： 切换无干扰全屏
       Alt + Shift + 2： 进行左右分屏
       Alt + Shift + 8进行上下分屏
       Alt + Shift + 5进行上下左右分屏（即分为四屏）
       Ctrl + 数字键： 跳转到指定屏
       Ctrl + Shift + 数字键： 将当前屏移动到指定屏

3. 一款小众但很实用的Markdown编辑器 ——Typora

   • Window快捷键

     • 无序列表：输入-之后输入空格

     • 有序列表：输入数字+“.”之后输入空格

     • 任务列表：-[空格]空格 文字

     • 创建新主题：Enter

     • 向左提升一级：Ctrl+[ 或 Shift+Tab

     • 向右缩进一级：Ctrl+] 或 Tab

     • 切换完成状态：Ctrl+Enter

     • 切换主题与描述：Shift+Enter

     • 快速删除：Ctrl+Shift+Backspace

     • 创建副本：Ctrl+D

     • 生成目录：[TOC]按回车

     • 选中一整行：Ctrl+L

     • 选中单词：Ctrl+D

     • 选中相同格式的文字：Ctrl+E

     • 搜索：Ctrl+F

     • 替换：Ctrl+H

     • 引用：输入>之后输入空格

     • 代码块：Ctrl+Alt+F

     • 表格：Ctrl+T

     • 标题：Ctrl+数字

     • 字体加粗：ctrl+B

     • 倾斜：Ctrl+I

     • 下划线：Ctrl+U

     • 删除线：Alt+Shift+5

     • 跳转到文章开头：Ctrl+Home

     • 跳转到文章结尾：Ctrl+End

     • 插入图片：直接拖动到指定位置即可或者Ctrl+Shift+I

     • 插入链接：Ctrl + K

   • 添加主题

     • 通过浏览器登录Typora官网，然后点击themes标签，进入主题库，然后选择一个中意的主题，然后点击该主题的名称

     • 打开http://theme.typora.io/主题页面，点击对应主题后进入主题介绍和下载界面，我们然后点击download下载该主题，下载好的主题存放在本地磁盘

     • 下载完成后，打开Typora偏好设置

     • 进入设置界面，然后再点击打开主题文件夹，进入到主题所在的文件夹

     • 将下载的主题压缩包解压，将其中的主题文件拷贝到指定位置比如桌面，等待后面操作再使用

     • 在主题所在的文件夹，我们可以看到本身存在的五个主题文件，我们将下载好的文件拷贝到这个目录里面

     • 拷贝完成后，重新打开Typora软件，这时我们在打开主题选择界面就可以看到我们安装的主题了

4. 适合测试的浏览器 ——Chrome

5. 思维导图 ——X-mind