前端从0到项目运行配置电脑

此文章针对新手小白，到了一家新公司拿到新电脑不知如何配置，公司实习生总结的，我给补充了一部分，欢迎大佬指点

node、git、npm、vscode包括里面的插件，从0到前端项目搭建启动

前端项目搭建启动

前置软件安装

编译器准备

• • vscode官网下载，根据设备环境选择Windows,Linux,MacOS。

GIT安装

• • GIT官网下载，根据设备环境选择Windows,Linux,MacOS。

  • 验证安装：在电脑的开始菜单里找到 Git => Git Bash 打开命令窗口输入以下命令 git --version 若显示版本信息，则GIT安装成功

  • 安装完客户端后，需要完成以下的配置：

1.配置用户名：   git config --global user.name "id"

2.配置邮箱：       git config --global user.email "注册邮箱"

3.查看配置：       git config --list

4.最后检查user.name及user.email是否配置正确：   git config -ll

5.生成密钥：  ssh-keygen -t rsa -C “您的邮箱地址” 在回车中会提示你输入一个密码，这个密码会在你提交项目时使用，如果为空的话提交项目时则不用输入。 您可以在你本机系统盘下，您的用户文件夹里发现一个.ssh文件，其中的id_rsa.pub文件里储存的即为刚刚生成的ssh密钥。

6.添加公钥：登录平台，进入用户“个人设置”，点击左侧栏的“ssh公钥”，将刚刚生成的公钥填写到“公钥”栏，并为它起一个名称，保存即可。（若对生成公钥不太理解，可以点击官方文档进行查看）

Node.js安装

• • Node.js官网下载，根据设备环境选择Windows,Linux,MacOS。

  • 验证安装：在cmd命令行中输入以下命令 node -v 若显示版本信息，则Node.js已安装成功

或者

可以安装node版本管理模块（推荐）

nvm（window系统）：参考这个：nvm最佳实践 - 掘金

n（iOS系统）：sudo npm install n -g，然后更换node版本切换工具n模块的镜像源参考：更换node版本切换工具n模块的镜像源 - 墨天轮

拉取代码

1. 在代码管理Codeup代码库中找到所需代码并进入复制SSH链接

2. 打开命令行，切换到希望下载到的路径并输入代码 git clone XXX

3. 等待代码下载完毕

包管理器

• Node.js目前已经集成了npm，可以在命令行中输入 npm -v 检查版本

npm安装

• npm config set registry http://registry.npmmirror.com 验证安装成功：输入以下命令若返回设置地址则成功 npm config get registry

淘宝镜像准备（加快包的下载速度）执行命令

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

运行代码

• npm run start

• npm-windows-upgrade选择最新版本进行更新 再进行 npm run start

若此时出现网页，则证明运行成功，若报错可以尝试以下方法

以管理员身份运行powershell (win + x按键）执行命令

运行成功

此时就可以进行调试开发工作了

个人常用vscode插件:

1. vscode插件安装

通用：

vscode中文包：Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code - Visual Studio Marketplace

驼峰翻译助手：驼峰翻译助手 - Visual Studio Marketplace

调试管理插件：Docker - Visual Studio Marketplace

git命名规范：git-commit-plugin - Visual Studio Marketplace

git可视化工具：GitLens — Git supercharged - Visual Studio Marketplace

美化输出工具：javascript console utils - Visual Studio Marketplace

同步更新工具：Live Server (Five Server) - Visual Studio Marketplace

Lodash工具库：Lodash - Visual Studio Marketplace

MySQL(收费)：MySQL - Visual Studio Marketplace

快捷打开（Alt+B）：open in browser - Visual Studio Marketplace

react:

ES7+ React/Redux/React-Native snippets - Visual Studio Marketplace

vue（可能有部分废弃）：

Vetur - Visual Studio Marketplace

vue - Visual Studio Marketplace

vue - Visual Studio Marketplace

vue - Visual Studio Marketplace

Vue VSCode Snippets - Visual Studio Marketplace