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()