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