前端知识体系

开发环境

IDE

  • vs code

    微软出品,开源,基于Electron开发,体积小,扩展多。

  • WebStorm Eap

    有强大的智能补全和提示,写起来比 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
    
  • yarn

    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

深入前端知识

*为推荐完成项

了解 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

团队协作

Learning More From Github

了解 Markdown 0.5h

测试

Cypress

其他

Web网站

常见框架

done.js

WebStorm

  • sass-filewatcher-for-webstorm
    首先安装 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$
    
    node sass cli parameters
    -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
    
jianyu360 all right reserved,powered by Gitbook修改时间: 2022-03-24 16:03:24

results matching ""

    No results matching ""