一些环境的安装地址和描述
vscode:当今最流行的免费开源代码编辑器 · 安装说明,但可能与最新版有所出入
一些很绝的快捷键:
中文输入模式下,中英文标点符号切换 ctrl + .
下一个匹配的也被选中: Ctrl+D
代码格式化: Shift+Alt+F
移动到定义处: F12
找到所有的引用: Shift+F12
同时修改本文件中所有匹配的: Ctrl+F2
查看定义处缩略图(只看一眼而不跳转过去): Alt+F12
放大或缩小(以编辑器左上角为基准): Ctrl +/-
新建文件: Ctrl+N
文件之间切换: Ctrl+Tab
打开一个新的VS Code编辑器: Ctrl+Shift+N
关闭当前的VS Code编辑器: Ctrl+Shift+W
切出一个新的编辑器窗口: Ctrl+\
切换左中右3个编辑器窗口的快捷键: Ctrl+1 Ctrl+2 Ctrl+3
代码行向左或向右缩进: Ctrl+[ 、 Ctrl+]
在当前行下方插入一行: Ctrl+Enter
在当前行上方插入一行: Ctrl+Shift+Enter
移动到行首: Home 移动到行尾: End
移动到文件开头: Ctrl+Home 移动到文件结尾: Ctrl+End
回退上一个光标操作: Ctrl+U
多行编辑(列编辑): Alt+Shift+鼠标左键 或 Ctrl+Alt+Down/Up
同时选中所有匹配编辑(与当前行或选定内容匹配): Ctrl+Shift+L
向上/向下移动行 Move line up/down Alt + ↑ / ↓
光标到字首/字尾 Ctrl + ← / →
node.js:基于 Chrome V8 的 JavaScript 运行环境 · 安装说明,可能与最新版有所出入
有了这个环境,可以拿来开发npm包,也可以拿来安装npm包,脚本工具引用的一个平台。
react:用于构建用户界面的 JavaScript 库
这里是在VScode里面进行导入安装,具体说明后面补,可能需要淘宝镜像
git:版本管理工具 · 安装说明,但可能与最新版有所出入
google浏览器:下载地址
umiJS:插件化的企业级前端应用框架
DvaJS:基于React和Redux的轻量级和Elm风格的框架
常用工具文档
菜鸟前端基础
W3C的html
react官网,后面会进行官网教程的详细分析
create-react-app 下载依赖很慢,安装很慢
操作如下:
更换npm源: npm config set registry https://registry.npm.taobao.org
检查是否更换成功: npm config get registry
$ cnpm install -g create-react-app
$ create-react-app my-app
$ cd my-app/
$ npm start
在浏览器中打开 http://localhost:3000/
yarn create @umijs/umi-app
yarn
yarn start
拒绝执行脚本:cmd下set-executionpolicy remotesigned
项目结构
下面是各部分结构的详细说明
README.md
node_modules
package.json
.gitignore
my-app
├── README.md README 应该是介绍code source 的一个概览.其实这个静态文件是有约定成俗的规范.
├── README.zh-CN.md
├── package.json 项目所需要的各种模块,项目的配置信息(名称、版本、许可证等元数据)npm i的依赖表
├── package-lock.json
├── .gitignore
├── .editorconfig
├── .eslintrc
├── .ga
├── .gitignores
├── .stylelintrc
├── .travis.yml
├── appveyor.yml
├── CODE_OF_CONDUCT.md
├── LICENSE
├── server.js
├── webpack.config.js
├── .roadhogrc.js
├── .roadhogrc.mock.js
├── node_modules
├── node_modules.rar
├── public
│ ├── favicon.ico
│ ├── index.html
│ ├── logo192.png
│ ├── logo512.png
│ ├── manifest.json
│ └── robots.txt
└── src
├── App.css
├── App.js
├── App.test.js
├── index.css
├── index.js
├── logo.svg
├── serviceWorker.js
└── setupTests.js
https://blog.csdn.net/mangoyiy/article/details/79972759
https://zhuanlan.zhihu.com/p/84083454
https://juejin.cn/post/6844903896637259784
https://how2j.cn/frontroute
http://www.javascriptcn.com/
https://www.cnblogs.com/dolphinX/p/3475090.html
https://editorconfig.org/
https://editorconfig-specification.readthedocs.io/
EditorConfig帮助维护跨多个编辑器和IDE的同一个项目的多个开发人员的一致编码风格。EditorConfig项目包括一个用于定义编码样式的文件格式和一个文本编辑器插件集合,这些文本编辑器插件使编辑器可以读取文件格式并遵循定义的样式。EditorConfig文件易于阅读,并且可以与版本控制系统很好地协同工作。
https://docs.npmjs.com/cli/v7/configuring-npm/package-lock-json
npm 5.0版本之后,npm install后都会有一个package-lock.json,作用是什么?
根据官方文档,这个package-lock.json 是在 npm install
时候生成一份文件,用以记录当前状态下实际安装的各个npm package的具体来源和版本号。
假如我已经安装了jquery 2.1.4这个版本,从git更新了package.json和package-lock.json,我npm install能覆盖掉node_modules里面的依赖吗?
其实我也有这个疑问,所以做了测试,在直接更新package.json和package-loc.json这两个文件后,npm install是可以直接覆盖掉原先的版本的,所以在协作开发时,这两个文件如果有更新,你的开发环境应该npm install一下才对。
原来package.json文件只能锁定大版本,也就是版本号的第一位,并不能锁定后面的小版本,你每次npm install都是拉取的该大版本下的最新的版本,为了稳定性考虑我们几乎是不敢随意升级依赖包的,这将导致多出来很多工作量,测试/适配等,所以package-lock.json文件出来了,当你每次安装一个依赖的时候就锁定在你安装的这个版本。
这个依赖的问题还需要待定,暂时不做深入讨论,需要的参考文档如下
https://zhuanlan.zhihu.com/p/89093696
https://www.zhihu.com/topic/19584946/hot
https://www.cnblogs.com/cangqinglang/p/8336754.html
https://github.com/npm/npm/pull/17508
https://www.npmjs.com/package/roadhog
roadhog 是一个 cli 工具,提供 server、 build 和 test 三个命令,分别用于本地调试和构建,并且提供了特别易用的 mock 功能。命令行体验和 create-react-app 一致,配置略有不同,比如默认开启 css modules,然后还提供了 JSON 格式的配置方式。
https://cloud.tencent.com/developer/article/1662817
使用Appveyor备份并持续集成博客
https://travis-ci.org/
一个使用yaml格式配置用于持续集成完成自动化测试部署的开源项目
https://www.jianshu.com/p/699ed86028c2
.gitignore
我们做的每个Git项目中都需要一个“.gitignore”文件,这个文件的作用就是告诉Git哪些文件不需要添加到版本管理中。比如我们项目中的npm包(node_modules),它在我们项目中是很重要的,但是它占的内存也是很大的,所以一般我们用Git管理的时候是不需要添加npm包的。