这里记录前端的迅速上手.
可能十年前这里记录的是 jQuery 相关的技术, 而现在记录比较更现代的技术.
这里可以看到fnm比nvm快45倍, 而且跨平台. 所以我准备切换到 fnm
- 下载二进制 Releases · Schniz/fnm
- 放到 path 路径下
- 配置 bash/zsh/fish 的环境变量
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| # 使用特定的源
export FNM_NODE_DIST_MIRROR=https://mirrors.ivolces.com/nodejs-release/
# 或者 --node-dist-mirror https://mirrors.aliyun.com/nodejs-release/
# 安装lts版本
fnm install --lts
# 查看
fnm ls
# 使用特定版本
fnm use default
fnm use v20.11.1
# 当前使用
fnm current
|
下载 nvm-windows 管理不同 nodejs 的版本
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| # 展示可用的版本
nvm list available
# 安装指定大版本
nvm install 18
# 指定小版本
nvm install 18.16.0
# 使用版本
nvm use 18.16.0
# 已安装的版本
nvm list
# 不推荐使用winget，经常版本切换的情况下
# 安装nodejs稳定版
winget install OpenJS.NodeJS.LTS
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| # 配置镜像源
npm config set registry https://registry.npmmirror.com
# 加速二进制文件下载
npm i --registry=https://registry.npmmirror.com --disturl=https://npmmirror.com/dist
# 这个节省磁盘,速度快。更新也是一样的命令，降级用pnpm@1.1.1这样
npm i -g pnpm
# 安装ts
npm i -g typescript
# web框架
npm i -g @nestjs/cli
# 查看全局安装的包
npm list -g
|
快速上手 | Vue.js (vuejs.org)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| # 创建项目,默认叫vue-project
pnpm create vue@latest [vue-project]
# 启用ts,vue-router,pinia,eslint,prettier,extension for debug
# 禁用jsx,vitest,end to end test
# 进入文件夹
cd vue-project
# 安装依赖
pnpm i
# 启动
pnpm run dev
# 构建html,输出内容在dist内
pnpm run build
# 查看是否有过期的包
pnpm outdated
# 更新包,加上--dev可以更新开发依赖
pnpm update
|
nuxt 是 vue 的全家桶。同时通过约定大于配置，帮助迅速开发。
Installation · Get Started with Nuxt
1
2
| # 创建项目
pnpm dlx nuxi@latest init nuxt-project
|
Nestjs 是 nodejs 服务端的 web 框架
1
2
| # 新建项目
nest new nest-project
|
传统 web 项目的 launch.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| {
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "启动程序",
"runtimeExecutable": "pnpm",
"runtimeArgs": [
"run",
"start:dev"
],
"console": "integratedTerminal"
}
]
}
|
typescript 的 launch.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| {
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "启动程序",
"preLaunchTask": "tsc-build",
"program": "dist/main.js"
}
// 终端运行 tsc --watch , 就不需要preLaunchTask了
// {
// "type": "node",
// "request": "launch",
// "name": "启动程序",
// "program": "dist/main.js"
// }
]
}
|
配合这里使用 tasks.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| {
"version": "2.0.0",
"tasks": [
{
"type": "typescript",
"tsconfig": "tsconfig.json",
"problemMatcher": ["$tsc"],
"group": {
"kind": "build",
"isDefault": true
},
"label": "tsc-build"
}
]
}
|
1
2
3
4
5
6
7
8
| // 在*.d.ts文件中
// 引入函数,对象
import { WebDAVClient, WebDAVClientOptions } from "./types.js";
// 声明函数的接口,但是实现在别的模块或文件中
export declare function createClient(remoteURL: string, options?: WebDAVClientOptions): WebDAVClient;
// 导出函数,说明createClient方法在factory.js中
export { createClient } from "./factory.js";
|
直接套模板
1
2
3
4
| # nuxt初始化的时候,如果npm -v版本高于6,就会卡柱
npx nuxi@latest init nuxt-project
# 降级
npm install -g npm@6
|
不得不说前端的问题是真的多… 参考 这个问题 就会发现, 很多人都踩过坑. 但还是会浪费你的时间
1
2
3
| du64.exe not found at D:\code\js\learn\nuxt-project\node_modules\fast-folder-size\bin\du64.exe
downloading du.zip from https://download.sysinternals.com/files/DU.zip
if you have trouble while downloading, try set process.env.FAST_FOLDER_SIZE_DU_ZIP_LOCATION to a proper mirror or local file path
|
手动处理
1
2
| # 下载文件,配置环境变量.重新运行命令
$env:FAST_FOLDER_SIZE_DU_ZIP_LOCATION = "C:\Users\80542\Downloads\DU.zip"
|