前端知识体系
开发环境
IDE
-
微软出品,开源,基于Electron开发,体积小,扩展多。
-
有强大的智能补全和提示,写起来比 vs code 舒服很多。 但是是一款收费软件,这里建议使用免费的 WebStorm Eap 版,是预发布版本,每月更新体验测试。
Node
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。
node 官网下载最新稳定版
nvm 使用nvm管理和切换Node版本
npx 使用npx也可以用来切换Node版本
npx node@4 -e "console.log(process.version)" npx node@6 -e "console.log(process.version)"
npm & yarn
国内网络原因,建议使用淘宝镜像加速模块下载
npm
npm config set registry https://registry.npm.taobao.org --global npm config set disturl https://npm.taobao.org/dist --global
-
npm install -g yarn yarn config set registry https://registry.npm.taobao.org --global yarn config set disturl https://npm.taobao.org/dist --global
用
yarn add
某第三方库名代替npm install
某第三方库名。
了解前端
简单的介绍和入门前端开发,请根据你的喜好选择文档或是视频模式。
下面将循序渐进的列出学习的链接和在线训练,资料多为图文,易放弃..
走进 HTML & CSS 8h
熟悉元素及语义化
1.5h
熟悉css元素及选择器
0.5h
完成 HTML5 & CSS 系列训练 (二选一)
实现基本布局
3h
模仿一些网站
深入前端知识
加*
为推荐完成项
了解 JavaScript n day
进阶
常见框架
框架 | Vue | React |
---|---|---|
PC UI | element | element |
Mobile UI | vux | ant |
Native-APP | vue-native | react-native |
Native-PC | electron-vue | electron |
Router | vue-router | react-navigation |
团队协作
了解 Markdown 0.5h
测试
Cypress
其他
Web网站
Web 建站技术中,HTML、HTML5、XHTML、CSS、SQL、JavaScript、PHP、ASP.NET、Web Services 是什么?
当你在浏览器输入你网页得万维网地址后 浏览器从本地Host查找服务器地址,如果没有找到,则一层一层请求域名服务器 服务器收到请求,给你返回网页文件 浏览器渲染收到得文件,呈现页面
常见框架
done.js
WebStorm
- sass-filewatcher-for-webstorm
node sass cli parameters首先安装 node-sass npm i node-sass -g WebStorm > Setting > Tools > File Watcher Program: xx/node-sass.cmd Arguments: --source-map true --output-style compressed $FileName$ $FileNameWithoutExtension$.css Output: $FileNameWithoutExtension$.css $FileNameWithoutExtension$.css.map Working: $FileDir$
-w, --watch Watch a directory or file -r, --recursive Recursively watch directories or files -o, --output Output directory -x, --omit-source-map-url Omit source map URL comment from output -i, --indented-syntax Treat data from stdin as sass code (versus scss) -q, --quiet Suppress log output except on error -v, --version Prints version info --output-style CSS output style (nested | expanded | compact | compressed) --indent-type Indent type for output CSS (space | tab) --indent-width Indent width; number of spaces or tabs (maximum value: 10) --linefeed Linefeed style (cr | crlf | lf | lfcr) --source-comments Include debug info in output --source-map Emit source map --source-map-contents Embed include contents in map --source-map-embed Embed sourceMappingUrl as data URI --source-map-root Base path, will be emitted in source-map as is --include-path Path to look for imported files --follow Follow symlinked directories --precision The amount of precision allowed in decimal numbers --importer Path to .js file containing custom importer --functions Path to .js file containing custom functions --help Print usage info