新手前端入职新公司，快速配置新电脑环境

hyarriver
513 阅读4分钟

前言

很多刚入行的小伙伴找到工作后,入职第一天配置环境,无从下手

以下则详细介绍如何安装和配置前端项目开发所需要的环境 配置

安装nvm

在安装nvm之前，先说一下为什么安装nvm，首先前端在公司开发项目，node环境是前端必不可缺需要配置的，因为不管是vue还是react，现阶段的项目90%都是工程化项目，而前端工程化项目又是基于node的。

但是不同公司不同项目类型基于的node版本又不一致，此时可以借助nvm方便切换node和npm的版本

新电脑注意：用户名千万不要使用中文

下载nvm

nvm-github

找到稳定版本

image-12.png

运行安装nvm

注意: nvm不要安装在中文目录下

点击next下一步进行安装

image-13.png

检测安装

在终端输入nvm -v

image-14.png

使用nvm

node:版本记录github.com/nodejs/node…

  1. 通过nvm安装其他版本node
nvm install 10.14.2
  1. 切换node版本
nvm use 10.14.2
  1. 查看所有已安装的node版本
nvm list

npm不是内部或外部命令

C:\Users\GUOFENG\Desktop\scooter-dashboard>npm -v

'npm' 不是内部或外部命令，也不是可运行的程序

或批处理文件。

  1. 通过nvm root查看nvm的安装目录

Current Root: C:\Users\GUOFENG\AppData\Roaming\nvm

  1. 查看对应node版本中是否有npm
  2. 尝试安装对应大版本中的其他小版本

常见错误

  1. 状态码

status 1

status 5

没有权限: 需要开启管理员权限

安装nrm

nrm是切换npm下载包的镜像管理

  1. 安装nrm

npm i nrm -g

  1. 查看所有镜像

nrm ls

npm ---------- registry.npmjs.org/

yarn --------- registry.yarnpkg.com/

tencent ------ mirrors.cloud.tencent.com/npm/

cnpm --------- r.cnpmjs.org/

taobao ------- registry.npmmirror.com/

npmMirror ---- skimdb.npmjs.com/registry/

  1. 切换镜像

nrm use toabao

vscode

进入官网

vscode官网

下载-转换链接

地址栏: 下载链接:

az764295.vo.msecnd.net/stable/6261…

下载较慢或者下载失败

替换地址: 将az764295.vo.msecnd.net替换为vscode.cdn.azure.zn

https://vscode.cdn.azure.cn/stable/6261075646f055b99068d3688932416f2346dd3b/VSCodeUserSetup-x64-1.73.1.exe

vscode-插件安装

  1. vscode中文包

Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code

  • ctrl+shift+p打开命令面板，输入display，筛选并显示“Configure Display Language”命令。按“Enter”

  • 选择中文简体

  1. 错误提示

Error Lens

使用效果：

  1. vetur

如果是vue2项目，安装该插件，可以实现代码提示、代码补齐、错误提示

  1. volar

Volar 是一个为 VS Code 提供 Vue 3 开发支持的插件

    1. 支持 Vue 3 的语法高亮、自动补全、格式化和错误提示。
    2. 提供了对 Composition API 的支持，包括智能提示和重构等功能。

  1. TypeScript Vue Plugin (Volar)

Vue.js 3.x 应用程序提供完整 TypeScript 支持的插件

  1. 安装移除console插件

通过alt+c自动移除当前文件中的console

安装git

下载git

Git-2.39.0.2-64-bit.zip

git下载

安装git

一直next,最后点击install即可完成安装

通过鼠标右键查看是否有git, 安装成功

配置git

  1. 配置git本地用户的邮箱和用户名

git config --global user.email "公司邮箱或者给你的gitlab的邮箱"

git config --global user.name "liufusong"

  1. 查看

git config --list

协同开发

gitlab

公司使用gitlab

登录账号: gitlab的账号由负责人统一分配

配置公钥

  1. 点击settings => 点击sshKeys

  1. 本地生成公钥

ssh-keygen -t rsa -C "gitlab邮箱"

  1. 获取公钥C:\Users\destiny(自己的用户).ssh

将公钥通过编辑器打开或者记事本,复制内容

  1. 将公钥添加到gitlab

开发项目

  1. 登录成功后看见所有项目

  1. 进入自己负责的项目, 仓库地址切换到ssh

  1. 克隆项目

git clone "ssh地址"

  1. 安装包(出问题,通过将报错信息放在百度, error)

npm i

  1. 分支创建
  • 基于之前的分支维护项目, 负责人说: 项目在dev分支,你拉一下,继续开发某某功能

git fetch origin dev:dev

  • 创建新分支
  • 合并到dev分支
  1. 项目构建上线
  • 进入项目

  • 构建分支

vue脚手架

vue脚手架可以快速生成基于vue的工程化项目

安装脚手架

  1. 安装脚手架

npm i @vue/cli -g

  1. 查看脚手架版本

vue -V

  1. 如果是已有的项目/直接运行项目

创建项目

  1. 创建新项目

vue create vue-demo

  1. 选择项目配置

  1. 选择vue版本

  1. 选择路由模式

  1. 选择css预处理语言

  1. 选择eslint模式

  1. 选择校验时机

  1. 选择将配置放入package.json中还是单独的配置文件

  1. 是否将这次配置设为预设

  1. 通过cd vue-demo
  2. 运行项目npm run serve
avatar
文章
阅读
粉丝