开发之前的电脑配置

开发之前的电脑配置

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即可。

新版的vscode有细微差异，不会打开locale.json文件。
选择【Configure Display Language】之后直接打开切换语言，如果默认没有zh-cn，需要安装插件【Chinese (Simplified) Language Pack for Visual Studio Code】。

3）安装常用插件

vscode提供了很多的插件，便于开发。
以下是我最近在用的。

1. Auto Rename Tag（自动修改匹配的 HTML 标签）
2. AutoFileName（自动完成文件名）
3. Bracket Pair Colorizer（给嵌套的各种括号加上不同的颜色）
4. Chinese (Simplified) Language Pack for Visual Studio Code（简体中文扩展）
5. Code Runner（代码运行插件）
6. Debugger for Chrome（调试）
7. EaseServer（web 服务器托管）
8. Easy LESS（less 自动编译）
9. ESLint（代码规范检查工具）
10. Git History（git 操作历史）
11. GitLens（详细的 Git 提交日志）
12. Highlight Matching Tag（高亮对应的 HTML 标签）
13. HTML CSS Support（HTML的CSS支持）
14. HTML Snippets（完整的HTML标签）
15. IntelliSense for CSS class names in HTML（智能提示类名）
16. jQuery Code Snippets（jQuery相关）
17. Material Icon Theme（图标主题）
18. open in browser（浏览器打开文件）
19. Path Intellisense（智能路径提示）
20. Prettier - Code formatter（格式化插件）
21. px2rem（px转换成rem的插件）
22. Simple icons（简单图标主题）
23. Vetur（Vue插件）
24. Vue 2 Snippets（Vue扩展）

2. 安装git

1）下载git

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

2）配置ssh key

打开git项目地址，把git代码clone下来，使用ssh方式会报错–授权问题，因为此时还没有配置ssh key。
配置命令：ssh-****** -t rsa -C "邮箱"
操作后会试图生成一个新的电脑的公钥。会被提示设置一下密码，这里直接回车两次，表示在本地进行一些git提交操作之类不需要输入密码。

打开存放公钥的文件夹，复制公钥。
在 gitlab 的SSH**中，添加之前复制的公钥。

添加成功后，回到git bash界面，再clone一次项目。
【注意】这里当出现严格身份校验时，需要输入yes进行强制连接，而非回车。

3）设置全局用户身份

git config --global user.name "username"
git config --global user.email "[email protected]"

3. 安装node

1）下载

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

打开 git bash，查看node和npm的版本号。
输入命令node -v和npm -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 依赖@版本号。