前端工作初始化常用操作配置

作为前端小白初进入公司，拿到新电脑后第一件事应该做什么，当然是安装的一些必备软件及相关配置操作，此文作为记录个人常见配置，大佬勿喷~。

---

办公必备软件：

1. qq / 微信 / 企业微信 / 钉钉 

2. foxmail（邮箱根据公司不同需要进行选择安装）

3. office / wps

4. 网易有道词典

5. 解压软件 winrar

6. google浏览器  /  安装 vue 扩展程序

前端开发软件：

1. Vscode 编译器：（官网下载地址）

安装常用插件列表

Chinese (Simplified) Language  --> 简体中文包

vscode-icons  --> 对各种文件类型的文件前的图标进行优化显示

View in Broweser  --> 显示浏览器选项

Vetur  --> vue代码高亮 语法提示

Beautify  --> 代码格式化

Easy LESS  --> less语法转化

cssrem  --> rem单位转换

CSS Peek  --> css代码速览

GitLens --> 可查看每行代码的git提交记录信息

Git History --> 查看git日志，文件历史记录，比较分支或提交

Code Runer --> 右键点击运行C, C++, Java, JS, PHP, Python...

① 部分人喜欢在保存代码的时候可以自动格式化代码，这个设置很简单，步骤如下：

     在settings.json下的【工作区设置】中添加以下代码即可。（但我个人不喜欢这样，哈哈）

"editor.formatOnType": true,
"editor.formatOnSave": true

---

② vscode 可以用户自定义设置代码模板，方便快速代码编写，

具体步骤可参照我的另一篇博文 VSCode 用户自定义Html5，vue 模板

---

③ 在实际工作中，由于大多开发环境为内网开发，无法连接外网，需要进行离线安装相应插件，

具体步骤可参照另一篇博文 vscode离线安装插件方法

---

2. 安装 node，安装完成之后打开 cmd 测试是否安装成功

   node最新版本下载地址：https://nodejs.org/en/

   node历史版本下载地址：https://nodejs.org/en/download/releases/

node -v

npm -v   出现对应版本号即安装成功

3. npm 相关配置：

    ① 全局配置切换到淘宝源：

npm config set registry https://registry.npm.taobao.org

配置后可通过下面方式来查看验证是否成功 

npm config get registry

    ② 根据需要设置 npm 安装程序的默认位置

     默认情况下，在哪个文件夹下运行npm，npm就在当前目录创建一个文件夹node_modules，然后将要安装的程序安装到文件夹node_modules里面，但是如果我们全局安装命令行工具的时候，可能想自定义一个安装路径，步骤如下：

查看npm安装全局工具的默认位置

npm config get prefix

设置npm安装程序时的默认位置

npm config set prefix "C:\Users\用户名\AppData\Roaming\npm"

设置npm安装程序时的缓存位置

npm config set cache "C:\Users\用户名\AppData\Roaming\npm_cache"

然后在使用npm安装程序时在后面加一个参数-g 即可将安装的程序安装到我们指定的目录
如 npm install nodemon -g
npm install XXX -g

4. 不喜欢手动配置npm镜像源的，可使用 npm下载地址切换工具 nrm

使用 npm install nrm –g 下载安装nrm

查询可用下载地址列表：nrm ls

切换npm下载地址： nrm use 下载地址名称

如果全局安装nrm后，使用nrm ls报错，欢迎查看 解决：使用 nrm ls 报错 internal/validators.js:124 throw new ERR_INVALID_ARG_TYPE(name, ‘string‘, value)

5. 安装 nodemon 命令行工具

npm install nodemon –g

1. 在命令行工具中用 nodemon 命令替代 node 命令执行文件，无需每次修改之后重新启动
2. ctrl+c 终止操作

6. 安装 vue cli 脚手架：

npm install -g @vue/cli

1.安装完成后输入 vue -V 测试是否安装成功

2.可通过 vue ui 命令以图形化界面创建和管理项目

3.也可通过 vue create my-project 命令行模式创建项目

   Vue2.0 官方文档教程：https://cn.vuejs.org/v2/guide/ 

   Vue3.0 官方文档教程：https://v3.cn.vuejs.org/

   Vue CLI 中文官方文档：https://cli.vuejs.org/zh/guide/

7. 使用 pm2 管理应用

  pm2 管理应用，支持管理多个服务。

打开终端，安装 pm2 输入命令(全局安装)：npm i pm2 -g

使用 pm2 启动项目，在终端中输入命令：pm2 start app.js --name 自定义名称

查看项目列表命令：pm2 ls

重启项目：pm2 restart 自定义名称

停止项目：pm2 stop 自定义名称

删除项目：pm2 delete 自定义名称

8. 安装 postman 用于接口测试，官网下载地址：https://www.postman.com/downloads/

9. 安装配置 git / svn 用于代码提交及版本管理

 ① git 下载地址：https://git-scm.com/downloads/

 ② svn 下载地址：https://tortoisesvn.net/downloads.zh.html

10. 安装 ps ，切图插件 Cutterman

11. 文件编辑器：typora / notepad++

12. 微信开发者工具 （开发小程序安装），官网下载地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

13. 使用 npm-check 更新项目依赖

// 全局安装

npm i -g npm-check

// 在项目根目录运行操作：

npm-check -u

// 空格切换包是否更新，Control + C 取消更新，回车就是执行更新。

14. TypeScript 环境安装：

// 全局安装 typescript

npm install -g typescript

// 安装之后校验typescript命令

tsc -v

// tsc的作用：负责将ts代码转成浏览器、nodejs可识别的js代码

 

---

后续会继续追加补充。