PART 1.搭建WEB前端开发环境
之前一直没有正式的用通用的环境开发过前端,在慕课网看前端视频时讲师提到了开发环境如何搭建,所以这次自己在网上找的一些博客摸索着安装了一下,所以一下就是我实践的结果以及一些资源信息的整合。
1.1安装GIT
git是多人合作开发,进行代码版本管理的一个工具。
下载地址:https://git-scm.com/downloads
相关博客资源:https://www.cnblogs.com/smuxiaolei/p/7484678.html
1.2安装node.js
安装node.js是因为很多的前端框架基于node.js。需要配一下环境变量。安装完后可以点击开始--运行--cmd--打开命令行窗口后,输入node -v,此时如果安装成功会显示版本。在比较新的版本里,已经集成了npm,不需要额外安装。
下载地址:https://nodejs.org/en/download/(根据自己操作系统选择相对应的)
相关博客资源:
http://xiaoyaojones.blog.163.com/blog/static/28370125201351501113581/
http://www.cnblogs.com/haogj/p/4780982.html
1.3安装开发工具,这里用的是sublime text3
sublime text3是一个小巧的开发工具,它需要安装多个插件来实现更方便,高效的开发。
下载地址:http://www.sublimetext.com/3
安装插件可以直接在sublime text中进行,package control--输入install package,回车--在输入框里面输入要安装的插件名,之后会自动后台安装。
PART 2. Sublime Text 的常用插件
2.1 插件Docblockr
作用:快速作注释。插件有原快捷键,也可以自己设置快捷键。可以在https://packagecontrol.io/packages/DocBlockr查看详情。即,在https://packagecontrol.io/网页里输入插件的名字,就可以下载,查看功能,使用规则等,以下同。
2.2 插件bracketHighlighter
作用是标签框架的高亮显示,选中都高亮。可以自己修改配色。
2.3 插件jsformat
作用是js的格式化。默认格式js,也可选中部分用ctrl+alt+f格式化局部。
2.4 插件Autoprefixer
自动填充css的不同浏览器前缀,按快捷点添加和删除不必要的前缀。可以自己设置需要针对的浏览器版本(具体情况请自行搜索)另,可设置用户的快捷键,我设置的快捷键是ctrl+alt+p。
2.5 插件emmet
作用是提高编程的效率。以下是一些简单基础的使用语法。想看更多详细内容可以查看网页:https://packagecontrol.io/packages/Emmet#how-to-expand-abbreviations-with-tab-in-other-syntaxes
以下是语法:
- 标签扩展,按Tab键或者Ctrl+E。例如:div后按下Tab,等于<div></div>。
- 标签的包裹关系:>。li>a,按tab,等于<li><a href=""></a></li>
- 一次多个标签:*。div*5,按下tab,得到5个div。
- 给标签添加css选择器:li.item或者li#nav,添加类选择器或者id选择器。
- $,自动排序。li.item$*4,则4个li添加的类选择器为item1,item2..item4。
- {},编写标签内的内容。
以上是基本快速编码法则。另外需要记住的快捷键:
7.快速跳到内容编写点,ctrl+alt+->(指方向右键),表示下一个。同理,...+<-(方向左键),上一个。
8.ctrl+D,选中所有与光标处相同的内容。如果要同时修改多行,可多按几次Ctrl+D,逐行。
2.6 插件Colorpicker
颜色选取器。快捷键:ctrl+shift+c。
2.7 插件ConvertToUTF8
解决文字显示的编码问题。
附件
其他相关博客资源
node前端开发环境:http://www.imooc.com/article/17101
web+webpack前端开发:https://www.cnblogs.com/wuac/p/6406843.html