HAVE TO study some knowlege about frontend

Table of Contents

I. ENVIRONMENT

A. nvm / nodejs / npm / yarn

Node Version Manager

nvm管理的是node, 但会同时把npm也安装好, node的版本和npm的版本是不一样的

Download nvm-setup.exe and install.

安装在C:\Users\Ivan\AppData\Roaming\nvm, 执行nvm use 20.11.1之后会将nodejs链接到C:\Program Files\nodejs\. Windows通过VSCode的Remote - WSL插件连接到WSL, 通过命令行操作npm run dev等

And use it in PowerShell:

powershell 
1
2
3
 
nvm list available
nvm install 22.12.0 -g
#nvm uninstall 16.17.1

Downloading node.js version 20.11.1 (64-bit)... Extracting node and npm... Complete npm v10.2.4 installed successfully. Installation complete. If you want to use this version, type nvm use 20.11.1

npm and yarn

cli
  • npm
  • yarn
1
 
npm run dev

B. VSCode

1. Configuration

VSCode通过Remote - WSL插件连接到WSL, 反而通过WSL与Windows共用环境变量(可能)识别到了npm命令, 前端项目可以跑起来了

左侧边栏的Source Control中的Git要物理机安装Git, 暂时没能共用WSL中git, 暂且隐藏掉, 眼不见心不烦, 反正通过cli可以操作git即可

搜索end of line可以找到"Text Editor" 和 扩展"prettier"都有设置"eol", 将行尾结束符统一设置为LF(\n)

2. Extensions

VSCode推荐的插件, 并不见得都好用

  • vscodevim, 在settings.json配置文件中添加以显示相对行号: {{ codeblock settings.json json }} { “editor.lineNumbers”: “relative”, } {{ /codeblock }}

  • prettier

II. GRAMMAR

A. 杂记

var、let、const 区别

var定义的变量，没有块的概念，可以跨块访问, 不能跨函数访问。

let定义的变量，只能在块作用域里访问，不能跨块访问，也不能跨函数访问。

const用来定义常量，使用时必须初始化(即必须赋值)，只能在块作用域里访问，而且不能修改。

vue 
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
 
// 块作用域
{
    var a = 1;
    let b = 2;
    const c = 3;
    // c = 4; // 报错
    var aa;
    let bb;
    // const cc; // 报错
    console.log(a); // 1
    console.log(b); // 2
    console.log(c); // 3
    console.log(aa); // undefined
    console.log(bb); // undefined
}
console.log(a); // 1
// console.log(b); // 报错
// console.log(c); // 报错

// 函数作用域
(function A() {
    var d = 5;
    let e = 6;
    const f = 7;
    console.log(d); // 5
    console.log(e); // 6  
    console.log(f); // 7 
})();
// console.log(d); // 报错
// console.log(e); // 报错
// console.log(f); // 报错