楼主的程序运行在Mac OS上,Windows系统同理
目录
一、下载Node.js
打开Node.js官网,直接下载即可
安装完成后可以用如下方式进行查看
二、安装Browser-sync
刚刚安装的node.js其实是为这一步做铺垫
因为browser-sync是基于node.js的
打开官网:
点击这里的5分钟快速入门,看到这里给出来安装指令
我们在终端(Windows的话可以在git Bash里输入)输入如下指令
回车后即可完成安装
三、下载安装ATOM
atom是一款很不错的开源编辑器,官网:
直接安装即可
四、下载jQuery
打开jQuery官网如下:
选择右边的下载jQuery
我们选择未压缩版
我们将其保存在某个目录下,比如我保存在Document的Web目录下:
五、安装Emmet
Emmet工具是前端开发的必备
我们打开atom,选择perference
选择左边的install
在右侧的输入框中输入Emmet
点击install,稍等一会儿,这样就是安装完成了
同样的方法,我们安装一下另外一款插件
六、导入
选择新建文件
在没有任何输入的情况下,按command+S
选择保存路径为刚刚存储jQuery的目录
完成后的界面如下:
接下来输入html:5,然后按tab键
可以发现我们自动生成了框架,这是Emmet做的
接下来添加代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="./jquery-3.4.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
jQuery("button").click(function(){
jQuery("p").css("color","blue");
})
})
</script>
<title>Document</title>
</head>
<body>
<button type="button" name="button">Blue</button>
<p>Hello</p>
</body>
</html>
保存
然后打开终端,切到当前文件所在的目录(也就是工程目录)
然后执行如下指令
browser-sync start --server -file "*.html"
完成