1.Node.js基本环境搭建 略/参考前文
2.express/Node.js经典官方推荐web服务器框架
3.安装 express
*cmd默认提示符为C:\Users\sarsers
,Node.js、Sublime text3及相关项目文件夹均在D:盘,相关命令操作,最好切换到相应目录下,以免操作路径不是预期且产生垃圾文件
检查express是否安装成功,需安装express-generator
安装 express-generator
express -V/-V需大写
新建web项目:myweb(指定项目路径D:\web projects)
cmd切换到D:\web projects
安装依赖包 cd myweb && npm install
启动本项目express服务器 npm start
cmd切换到新建web路径下,安装依赖包
jade已被更名为pug,安装pug
项目启动
项目测试
4.public/express静态web网站默认路径
用hello world网页index.html 测试
5.HTML5模板
下载
前端模板 http://www.bootcss.com/p/html5boilerplate/
HTML5模板
安装
清空public文件夹
解压
将源码全部拷贝到public文件夹
测试
6.将public文件夹引入Sublime text3,建立 ST3 项目,以便编辑 html5-boilerplate相关文件
7.配置SideBarEnhancements的Open in Browser预览功能
{"D:\web projects\myweb\public":{"url_testing": "http://localhost:3000/","url_production": ""}}
“D:\web projects\myweb\public” 静态网页文件存放位置
“url_testing” express服务器定义的url及监听端口
侧边栏任意位置右键->Open in Browser->Chrome,目前没有快捷键
Open With可自定义快捷键,打开的不是url,而是本地文件
8.Sublime text3与Chrome浏览器配合插件
Emmet LiveStyle-CSS实时刷新预览
Sublime text3与Chrome各装一枚
Chrome浏览器,访问https://chrome.google.com/webstore/detail/emmet-livestyle/diebikgmpmeppiilkaijjbdgciafajmg?utm_source=chrome-ntp-icon安装,重启浏览器即可
Sublime text3,package control安装
LiveReload-实时刷新预览
Sublime text3与Chrome各装一枚
Chrome浏览器,三条横杠图标->更多工具->扩展程序->获取更多扩展程序->进入Chrome插件中心->搜索”LiveReload”->添加至CHROME,重启浏览器即可
Sublime text3,从GitHub下载LiveReload源码包(package control的不好使),解压到packages下即可
https://github.com/Grafikart/ST3-LiveReload
据说有实现Sublime text3与Chrome左右分屏的插件,目前没找到呢