wen

前端开发环境搭建

2022/7/17

从零开始搭建前端开发环境

# 环境

# Node.js

1. 安装路径
D:\Nodejs

2. 安装测试
node -v、npm -v

3. 配置 npm 的全局模块安装路径及 cache 路径
- 在 D:\Nodejs 下新建文件夹
-- node_global、node_cache
- 执行命令
-- npm config set prefix "D:\Nodejs\node_global"
-- npm config set cache "D:\Nodejs\node_cache"
- 查看配置
-- npm config list

4. 添加系统变量
我的电脑 -> 右键 -> 属性 ->高级系统设置 -> 环境变量 -> 系统变量 -> 新建
变量名：NODE_PATH
变量值：D:\Nodejs\node_global\node_modules

5. 安装 express 包
npm install express –g
安装完成后到 D:\Nodejs\node_global\node_modules 查看是否有该包

6. 安装 npmmirror 中国镜像站
npm install -g cnpm --registry=https://registry.npmmirror.com

7. 添加系统变量 path 的内容
我的电脑 -> 右键 -> 属性 ->高级系统设置 -> 环境变量 -> 系统变量 -> path -> 编辑 -> 新建
D:\Nodejs\node_global

8. 检查 cnpm 是否正常
cnpm –v

9. 设置 npm 默认镜像
默认镜像：https://registry.npmjs.org/
设置镜像：npm config set registry https://registry.npmmirror.com
获取镜像：npm get registry
临时设置：npm install @micro-design/cli --registry=https://registry.npmmirror.com
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

# 包管理工具

# Installation
npm install -g cnpm
npm install -g yarn
npm install -g pnpm

# registry Site
https://registry.npmmirror.com
1
2
3
4
5
6
7
npm yarn pnpm
官网 https://www.npmjs.com/ (opens new window) https://yarnpkg.com/ (opens new window) https://pnpm.io/ (opens new window)
查看源 npm get registry yarn config get registry pnpm get registry
更换源 npm config set registry Site (opens new window) yarn config set registry Site (opens new window) pnpm config set registry Site (opens new window)
初始化项目 npm init -y yarn init -y pnpm init
安装项目全部依赖 npm install yarn install pnpm install
安装依赖包 npm install [package] yarn add [package] pnpm add [package]
安装指定版本 npm i [package]@[version] yarn add [package]@[version] pnpm add [package]@[version]
安装全局依赖 npm i -g [package] yarn global add [package] pnpm add -g [package]
删除依赖 npm uninstall [package] yarn remove [package] pnpm remove [package]
删除全局依赖 npm uninstall -g [package] yarn global remove [package] pnpm remove -g [package]

# 工具

# Git

1. 基本配置
git config --list
git config --global --list
git config --global user.name "wencwcoder"
git config --global user.email "1748994690@qq.com"
git config --global color.ui false  // 关闭着色
git config --global http.sslVerify false  // 证书
git config --global http.postBuffer 524288000
git config core.ignorecase  -->  git config core.ignorecase false // 文件夹大小写
# 拒绝提交包含混合换行符的文件（推荐）
git config --global core.safecrlf true
# 允许提交包含混合换行符的文件
git config --global core.safecrlf false
# 提交包含混合换行符的文件时给出警告
git config --global core.safecrlf warn
# 提交时转换为LF，检出时转换为CRLF（推荐 Windows）
git config --global core.autocrlf true
# 提交时转换为LF，检出时不转换（推荐 MAC/Linux）（现在我的 Windows 是该配置）
git config --global core.autocrlf input
# 提交检出均不转换
git config --global core.autocrlf false


2. 生成新 SSH 密钥
ssh-keygen -t rsa -C "1748994690@qq.com"  // 3个回车
ssh -T git@github.com  // 测试 ssh 是否成功，输入 yes
ssh-keyscan -t rsa github.com >> ~/.ssh/known_hosts  // 上一步出错处理

3. 更换 git 地址
git remote set-url origin https://gitee.com/supermapol/icn-dashboard-ui.git

4. git clone 较慢的处理
修改一下url链接，在github.com后面加上.cnpmjs.org即可（注意 push 的时候要改 config，且只用于 https clone）

5. 凭证管理
控制面板\所有控制面板项\凭据管理器
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
  • 提交规范
类型 描述
init 初始提交
feat 新功能
fix 修复bug
docs 修改文档
style 样式修改不影响逻辑
refactor 代码重构
test 增删测试
perf 性能优化
release 发布
deploy 部署
revert 版本回退
chore 更改配置文件、构建流程、依赖管理、辅助工具的变动
eg. docs(readme): 测试。

init(all): 初始提交 gh-pages 分支。

feat(workflows): 使用 github actions 自动部署。

# TortoiseGit

General
Git for Windows -- Git.exe Path -- D:\Git\bin

Git
User Info -- Name: wencw / Email: 1748994690@qq.com

Network
SSH -- SSH client -- D:\Git\usr\bin\ssh.exe
1
2
3
4
5
6
7
8

# Chrome

# 插件 -- Proxy SwitchyOmega
情景模式 -> proxy -> sock5 / 127.0.0.1 / 7890
情景模式 -> auto switch -> proxy | 导入在线规则列表 / 添加规则列表 / AutoProxy
规则列表网址：https://raw.githubusercontent.com/gfwlist/gfwlist/master/gfwlist.txt
1
2
3
4

# VSCode

  • settings.json
{
    "workbench.iconTheme": "vscode-icons",
    "workbench.colorTheme": "One Dark Pro",
    "editor.cursorBlinking": "expand",
    "editor.cursorSmoothCaretAnimation": true,
    "editor.tabSize": 2,
    "editor.inlineSuggest.enabled": true,
    "files.eol": "\n"
}
1
2
3
4
5
6
7
8
9
Auto Close Tag
Auto Rename Tag
Bundle Size
change-case
[❌] ChatGPT中文版
Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code
[❌] CodeGeeX
CodeSnap
CSS Peek
DotENV
Draw.io Integration
[❌] EditorConfig for VS Code
ESLint
Git History
GitHub Copilot
GitLens — Git supercharged
Image preview
JavaScript (ES6) code snippets
JavaScript Booster
Live Server
Mintlify Doc Writer for Python, JavaScript, TypeScript, C++, PHP, Java, C#, Ruby & more
npm Intellisense
One Dark Pro
open in browser
Path Intellisense
Prettier - Code formatter
[❌] Settings Sync
Stylelint
Svg Preview
Time Master
TypeScript Vue Plugin (Volar)
Vetur
vscode-icons
Vue Language Features (Volar)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

# Others

Last Updated: 2023/04/26, 23:40:19

vuepress-summary

彩虹
周杰伦