此文章针对新手小白,到了一家新公司拿到新电脑不知如何配置,公司实习生总结的,我给补充了一部分,欢迎大佬指点
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模块的镜像源 - 墨天轮
在代码管理Codeup代码库中找到所需代码并进入复制SSH链接
打开命令行,切换到希望下载到的路径并输入代码 git clone XXX
等待代码下载完毕
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按键)执行命令
此时就可以进行调试开发工作了
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