github开源项目学习-front-end-collect
About
- 项目地址
- 项目预览demo(githubio加载较慢)
- 开源项目fork自:https://github.com/foru17/front-end-collect
- 此文章是对此开源项目使用的技术的初步了解与学习,单纯技术向,不涉及内容。
- 涉及技术点包含:bower,跨域,搭建nginx,VSCode配置nginx
bower
- A package manager for the web.
- 安装:npm install -g bower
- 初始化:bower init 生成bower.json
- 自定义包下载位置:更改./bowerrc文件,例如:
{
"directory":"js/lib"
}
- 安装依赖包:bower install jquery --save(--save是将依赖写入bower.json中)
- 查找包信息:bower info jquery
- 更新包:bower update
- 查找包:bower search jquery
- 卸载包:bower uninstall jquery
本地跨域
在VSC直接F5在chrome中打开文件index.html,会报错:
XMLHttpRequest cannot load file:///D:/Users/Administrator/Desktop/VSws/front-end-collect/data/front-end.json. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
是因为类似file打开的文件是不能调用本地文件的,所以要在搭建服务器运行
搭建nginx
1 直接官网下载稳定最新windows版本包,解压,启动nginx.exe
2 浏览器localhost即可访问
3 默认root路径是nginx解压后路径nginx/html文件夹下
4 修改默认路径:nginx/conf/nginx.conf文件中的server-location-root指令....但是路径修改到html上级都无效,只能修改至html下级,解决方法是把vsc工作路径放在html里面运行
VSCode配置nginx服务器
launch.json中configurations项数组中,添加一项:
{
"type": "chrome",
"request": "launch",
"name": "nginx",
"url": "http://localhost/VSws/${relativeFile}",
"webRoot": "${workspaceRoot}"
}
然后直接F5运行index.html即可(即用nginx打开页面)
其中VSws是我的VSC的工作路径。
在launch.json中会使用到一些预定变量, 这些变量的具体含义如下
${workspaceRoot} the path of the folder opened in VS Code(VSCode中打开文件夹的路径)
${workspaceRootFolderName} the name of the folder opened in VS Code without any solidus (/)(VSCode中打开文件夹的路径, 但不包含"/")
${file} the current opened file(当前打开的文件)
${relativeFile} the current opened file relative to workspaceRoot(当前打开的文件,相对于workspaceRoot)
${fileBasename} the current opened file's basename(当前打开文件的文件名, 不含扩展名)
${fileDirname} the current opened file's dirname(当前打开文件的目录名)
${fileExtname} the current opened file's extension(当前打开文件的扩展名)
${cwd} the task runner's current working directory on startup()
github开源项目学习-front-end-collect的更多相关文章
- 转:从开源项目学习 C 语言基本的编码规则
从开源项目学习 C 语言基本的编码规则 每个项目都有自己的风格指南:一组有关怎样为那个项目编码约定.一些经理选择基本的编码规则,另一些经理则更偏好非常高级的规则,对许多项目而言则没有特定的编码规则,项 ...
- 2015-2016最火的Android开源项目--github开源项目集锦(不看你就out了)
标签: Android开发开源项目最火Android项目github 2015-2016最火的Android开源项目 本文整理与集结了近期github上使用最广泛最火热与最流行的开源项目,想要充电与提 ...
- 如何参与一个 GitHub 开源项目?
最近一年开源项目特别的热,很多技术大会或论坛都以开源项目作为主题进行探讨,可见这是一种趋势.而Github作为开源项目的著名托管地,可谓无 人不知,越来越多的个人和公司纷纷加入到Github的大家族里 ...
- Android笔记——导入Github开源项目CircleRefreshLayout
百度n久都找不到android studio导入第三方类库的正确方法,纠结睡不着 ,最后终于蒙到了方法,原来想太多了 ---------------------------------------- ...
- 如何参与一个GitHub开源项目
Github作为开源项目的著名托管地,可谓无人不知,越来越多的个人和公司纷纷加入到Github的大家族里来,为开源尽一份绵薄之力.对于个人来讲,你把自己的项目托管到Github上并不表示你参与了Git ...
- 开源项目福利-github开源项目免费使用Azure PipeLine
微软收购Github后,很多人猜想微软可能会砍掉VSTS,然而事实VSTS并没有砍掉,关于Azure Devops的详细信息可以查看 这篇博客,如果想查看原文也可以从链接里提供的原始地址里查看. 今天 ...
- 基于RBAC模型的权限系统设计(Github开源项目)
RBAC(基于角色的访问控制):英文名称Rose base Access Controller.本博客介绍这种模型的权限系统设计.取消了用户和权限的直接关联,改为通过用户关联角色.角色关联权限的方法来 ...
- Android Hawk数据库 github开源项目
Android Hawk数据库 github开源项目 Hawk 是一个很便捷的数据库 . 操作数据库仅仅需一行代码 , 能存不论什么数据类型 . github 地址: https://github. ...
- [Android开源项目] GitHub开源项目总结 (转)
[Android开源项目] GitHub开源项目总结 GitHub开源项目android-styled-dialogs http://neast.cn/forum.php?mod=viewthread ...
随机推荐
- 使用Visual Studio加断点调试Unity游戏的C#代码
1.安装Unity5.2.5 2.安装Microsoft Visual Studio 2013 3.打开VS2013,点击Tools | Extensions and Updates,然后在这个界面点 ...
- 快速搞定selenium grid分布式
写这篇文章,似乎有点重复造轮子的嫌疑.当看了几篇相关文章后,我还是决定把半年前的半成品给完成了. 以传统的方式部署分布式Selenium Grid集群需要耗费大量时间和机器成本来准备测试环境. Sna ...
- 点击<tr>表格行元素进行跳转
意外发现table中利用<a>标签控制tr的行为无效. 尝试<a>标签在table中的使用,只有在<td><a href="">&l ...
- rocketmq client for c#
基于ikvm的rocketmq的c#客户端,由于阿里对c#不敏感,对这方面的东西缺少.因为工作需要弄了一个,分享给大家 https://github.com/franknew/RocketMQ-Cli ...
- jQuery实现拼图小游戏
小熊维尼拼图 2017-07-23 ...
- iOS设置状态栏样式
iOS设置状态栏样式可以使用两种方式. 方式一: 直接在需要改变默认状态栏样式的控制器中实现一个方法(其他任何事情都不用做): // 返回状态栏的样式 - (UIStatusBarStyle)pref ...
- 安徽省2016“京胜杯”程序设计大赛_E_转啊转
转啊转 Time Limit: 1000 MS Memory Limit: 65536 KB Total Submissions: 59 Accepted: 15 Description 在二 ...
- Unity 粒子系统 特效 移除屏幕外面后再移回来 不会显示问题
今天遇到的问题 勾选Particle System组件中的Sub Emitters属性 如图
- Python 装饰器总结
装饰器总结 前提 使用装饰器的前提在于Python提供的特性: 函数即对象,可以进行传递: 函数可以被定义在另外一个函数中: 可以通过一个例子来了解: def get_animal(name='dog ...
- HTML <div>和<span>
块代码 <div>和<span> 1.. <style> .ccwTest { font-family: '.PingFang SC';">; co ...