前端开环境搭建

Posted 2020-11-25 padingdun

1. 安装包管理工具 npm 或者yarn

npm install -g yarn

yarn基于node，并且速度更快，能自动缓存你下载过的包，让你在离线、重复下载时不需要通过去网上拉取文件，直接在本地就可以安装你需要的包！并且，yarn分离的各个包的安装过程，合理排队，不产生高频请求，单个包安装失败并不影响其他包的安装，有效的重试机制等.

2. 目前最流行的前端开发工具或者IDE或者编辑器：vscode、sublime、各种Storm！还有Hbuilder（这个是完美支持Vue的特供、还支持特有小程序等N端转化插件，如果需要多端覆盖这个绝对的强大！

3. VS code 插件

• Auto Rename Tag 
• Beautify， 该插件支持js、josn、css、sass和html的代码美化
• CSS Peek, 支持css的快速跳转
• 图标库Material Icon Theme 对当前流行语言和后缀名进行单独匹配好看又丰富的图标！
• view in Browser 静态网页可以支持直接在默认浏览器预览
• Quokka.js支持js文件内的部分代码直接计算并返回计算结果
• javascript (ES6) code snippets支持最新的ES6语法，支持很多代码快捷公式
• GitLens — Git supercharged、Git History
•  Markdown All in One插件，支持所有markdown语法，同时支持快捷键操作进行修改
• Bracket Pair Colorizer 这个插件会自动根据你的代码块的括号、大括号等判断作用域块，并用border连线进行明显的区分
• auto import
• eslint  可用于检查语法错误规范代码

4. VS code 快捷键

Ctrl + P快速切换文件，根据历史是由最近原则排序，

Alt + ↑ | ↓ 快速移动当前行代码，

Shift + Alt + ↑ | ↓，快速复制当前行，

Ctrl + K , Ctrl + Q快速定位上次编辑的位置…

5. vsocde的一些配置

6. VS code 快速编辑html

• 第一行输入！并回车，!，然后按下tab键，会直接出现编写html语言的基本框架标签

• Shift  +  Alt  + F     实现代码的对齐

• 注释：ctrl+k+c   取消注释：ctrl+k+u

7. React 环境配置：

 插件： Simple React Snippets ： imrc 快速生成代码

 

创建本地文件夹，即保存项目的文件夹，在文件夹下打开控制台我这里使用git bash直接在文件夹下右键找到git bash启动即可
在控制台输入 npm install -g create-react-app 使用npm安装 create-react-app

安装完 create-react-app 之后 继续输入 create-react-app my-app 来创建一个项目 my-app 是创建出来的 React 项目，等待一段时间(这里需要下载一些依赖包)，即可看到创建完成的整个文件结构

 

换控制台目录到项目目录下 运行 npm start 检测当前项目是否创建成功 正常情况下当输入命令之后 会直接打开默认浏览器预览 http://localhost:3000/ 此时会看到一个react的页面