开发之前的电脑配置
1. 下载编辑器
1)下载
有些人口中说的IDE,一般也就是指的我们开发代码时使用的编辑器。
我一般使用vscode,当然你也可以使用webstorm等其他工具。
直接搜索或者进入官网:https://code.visualstudio.com/
安装时直接使用默认配置,一路next。
2)设置语言中文
- 打开vscode,按快捷键“Ctrl+Shift+P”。
- 在弹出的搜索框中,输入“configure language”,选择搜索出来的【Configure Display Language】。
- 选择后自动打开了locale.json文件,讲locale的属性值“en”修改成“zh-CN”。
- 保存设置,重启vscode即可。
3)安装常用插件
vscode提供了很多的插件,便于开发。
- Auto Rename Tag(自动修改匹配的 HTML 标签Auto rename paired HTML/XML tag)
- AutoFileName(auto complete file name)
- Bracket Pair Colorizer(给嵌套的各种括号加上不同的颜色A customizable extension for colorizing matching brackets)
- Chinese (Simplified) Language Pack for Visual Studio Code(Language pack extension for Chinese (Simplified))
- Code Runner()
- Debugger for Chrome(Debug your JavaScript code in the Chrome browser, or any other target that supports the Chrome Debugger protocol.)
- EaseServer(Hosts current file with web server)
- Easy LESS(Auto-compile LESS to CSS on save)
- ESLint(Integrates ESLint JavaScript into VS Code.)
- Git History(View git log, file history, compare branches or commits)
- GitLens(详细的 Git 提交日志Supercharge the Git capabilities built into Visual Studio Code)
- Highlight Matching Tag(高亮对应的 HTML 标签Highlights matching closing or opening tag)
- HTML CSS Support(CSS support for HTML documents)
- HTML Snippets(Full HTML tags including HTML5 Snippets)
- IntelliSense for CSS class names in HTML(CSS class name completion for the HTML class attribute based on the definitions found in your workspace)
- jQuery Code Snippets(Over 130 jQuery Code Snippets)
- Material Icon Theme(Material Design Icons for Visual Studio Code)
- One Dark Pro(Atom’s iconic One Dark theme for Visual Studio Code)
- open in browser(This allows you to open the current file in your default browser or application.)
- Path Intellisense(智能路径提示Visual Studio Code plugin that autocompletes filenames)
- Prettier - Code formatter(格式化插件Code formatter using prettier)
- px2rem(px转换成rem的插件)
- Simple icons(An icon theme that tries to be simple)
- Vetur(Vue tooling for VS Code)
- 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 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 依赖@版本号
。
来源:CSDN
作者:no-pains-no-gains
链接:https://blog.csdn.net/dandan666dandan/article/details/103486986