开发之前的电脑配置

久未见 提交于 2019-12-11 12:26:24

开发之前的电脑配置

1. 下载编辑器

1)下载

有些人口中说的IDE,一般也就是指的我们开发代码时使用的编辑器。
我一般使用vscode,当然你也可以使用webstorm等其他工具。
直接搜索或者进入官网:https://code.visualstudio.com/
安装时直接使用默认配置,一路next。

2)设置语言中文

  1. 打开vscode,按快捷键“Ctrl+Shift+P”。
  2. 在弹出的搜索框中,输入“configure language”,选择搜索出来的【Configure Display Language】。
  3. 选择后自动打开了locale.json文件,讲locale的属性值“en”修改成“zh-CN”。
  4. 保存设置,重启vscode即可。

3)安装常用插件

vscode提供了很多的插件,便于开发。

  1. Auto Rename Tag(自动修改匹配的 HTML 标签Auto rename paired HTML/XML tag)
  2. AutoFileName(auto complete file name)
  3. Bracket Pair Colorizer(给嵌套的各种括号加上不同的颜色A customizable extension for colorizing matching brackets)
  4. Chinese (Simplified) Language Pack for Visual Studio Code(Language pack extension for Chinese (Simplified))
  5. Code Runner()
  6. Debugger for Chrome(Debug your JavaScript code in the Chrome browser, or any other target that supports the Chrome Debugger protocol.)
  7. EaseServer(Hosts current file with web server)
  8. Easy LESS(Auto-compile LESS to CSS on save)
  9. ESLint(Integrates ESLint JavaScript into VS Code.)
  10. Git History(View git log, file history, compare branches or commits)
  11. GitLens(详细的 Git 提交日志Supercharge the Git capabilities built into Visual Studio Code)
  12. Highlight Matching Tag(高亮对应的 HTML 标签Highlights matching closing or opening tag)
  13. HTML CSS Support(CSS support for HTML documents)
  14. HTML Snippets(Full HTML tags including HTML5 Snippets)
  15. IntelliSense for CSS class names in HTML(CSS class name completion for the HTML class attribute based on the definitions found in your workspace)
  16. jQuery Code Snippets(Over 130 jQuery Code Snippets)
  17. Material Icon Theme(Material Design Icons for Visual Studio Code)
  18. One Dark Pro(Atom’s iconic One Dark theme for Visual Studio Code)
  19. open in browser(This allows you to open the current file in your default browser or application.)
  20. Path Intellisense(智能路径提示Visual Studio Code plugin that autocompletes filenames)
  21. Prettier - Code formatter(格式化插件Code formatter using prettier)
  22. px2rem(px转换成rem的插件)
  23. Simple icons(An icon theme that tries to be simple)
  24. Vetur(Vue tooling for VS Code)
  25. Vue 2 Snippets(A Vue.js 2 Extension)

2. 安装git

1)下载git

git是开发过程中必备的代码分支管理工具。
安装git之前去官网下载,直接搜索git安装,进入官网。
地址:https://www.git-scm.com/download/
安装时直接使用默认配置,一路next。

2)配置ssh key

打开git项目地址,把git代码clone下来,使用ssh方式会报错–授权问题,因为此时还没有配置ssh key。
在这里我们这样操作,输入ssh-keygen -t rsa -C “自己的邮箱”,这步操作的目的在于,我们在试图生成一个新的电脑的公钥。然后他会提示你设置一下密码,这里直接回车两次,表示在本地进行一些git提交操作之类不需要输入密码。
在这里插入图片描述
打开这个文件夹,把公钥拿出来,打开方式随意,记事本或者文本编辑器都行
回到gitlab,在 设置—ssh key密钥 中,把刚刚那串公钥复制进去 并添加。
在这里插入图片描述
添加成功后,回到git bash界面。再clone一次项目,注意,这里当出现严格身份校验时,需要输入yes进行强制连接,而非回车。
在这里插入图片描述

3)设置全局用户身份

在这里插入图片描述
git config --global user.name "username"
git config --global user.email "emailname@example.com"

3. 安装node

1)下载

clone下来项目代码,运行需要 npm installnpm run dev,这个时候就需要下载node。
官网下载:http://nodejs.cn/download/
安装时直接使用默认配置,一路next。

打开 git bash,查看node和npm的版本号。
输入命令node -vnpm -v

2)淘宝镜像

一般来说我们直接使用npm安装依赖就行了,但是有时候会出现安装依赖比较慢的情况,可以考虑使用淘宝镜像cnpm,安装速度可以明显提升。
npm install -g cnpm --registry=https://registry.npm.taobao.org
在这里插入图片描述
注意一点,有可能出现npm版本太高,对应cnpm安装不了情况,对npm降低版本即可。

3)安装注意事项

1. 安装版本

安装最新版本:npm install -g 依赖
安装指定版本号:npm install -g 依赖@版本号

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!