前端开发环境的安装配置

目录:

1.git---管理项目版本

2.vscode--开发工具

3.node

4.vue的浏览器插件-vue-devtools/react的浏览器插件-react-devtools

5.小程序开发工具

git

     如何安装和配置git,在【git】初始化git仓库并推送到远程仓库一篇中有详细说明:点击直达列车

vscode

我常用的开发工具是vscode,大家根据个人习惯来,下载安装即可:下载直达列车

 

下列是我常用的vscode插件,可根据需求自己决定要不要安装此类插件:

1.Auto Import

自动去查找、分析、然后提供代码补全。对于TypeScript和TSX，可以适用。

2.Prettier

你绝对不能少了这个插件，你需要它来一键美化你的JavaScript/TypeScript/CSS代码。

3.Bracket Pair Colorizer

如果你的代码有很多的回调，那么这种高亮可以帮助你更好地区分不同的代码块。也就是会利用彩色的括号区分代码块

4.Vetur

VS Code下面的Vue工具

5.vscode-icons

Icon集合。

6.Chinese (Simplified) Language Pack for Visual Studio Code

中文简体

7.Open in Browser

右击选择浏览器打开html文件

8.JS-CSS-HTML Formatter

每次保存，都会自动格式化js css 和html 代码

9.Auto Rename Tag

自动重命名配对的HTML / XML标签

10.CSS Peek

追踪至样式

11.Easy LESS

Easy LESS 插件用来把less文件编译为css文件

12.Live server

这是一个为静态和动态页面启动具有实时重新加载功能的开发本地服务器。

node

1.根据电脑操作系统下载并安装node.js:下载直达列表 

           ps:一般下载LTS版本的,也就是长期稳定维护的版本,如果你比较热衷于尝试性特性,可以选择 Current 版本,但是一般不推荐这么做

2.查看安装好的node版本号

•  打开终端，在终端输入命令 node –v 后，按下回车键，即可查看已安装的 Node.js 的版本号（切记node和–v之间有个空格 ）

npm

目前的node版本在安装的时候会自动安装npm

vue调试工具--vue-devtools

1.克隆仓库   仓库直达列车

2.安装依赖包    npm install  或 npm i

3.构建    npm run build

4.添加至Chrome浏览器的扩展程序中去

• 选择右上角三个圆点--选择更多工具---选择扩展程序---打开开发者模式
• 选择加载已解压的扩展程序-----选中你构建好后的shells/chrome

小程序开发者工具

下载安装直达列表

 

其他

vue-cli脚手架

如果开发的是vue项目,为了更高效的构建vue项目,还可以安装

npm install -g @vue/cli

这样就可以使用脚手架进行vue项目的搭建了

 自己的小随笔,记录一下