知识储备

操作系统

内核(kernel)：指大多数操作系统的核心部分，它由操作系统中用于管理存储器、文件、外设和系统资源的那些部分组成
- .dll/.so：动态链库
- .lib/.a：静态链库
外壳(Shell)：命令行解释器，执行用户输入的命令并返回结果
- cmd(Command Shell)
- powershell(Windows平台推荐使用)
- zsh
- bash
终端(Terminal)：文本输入/输出环境

传统意义上的终端

现代终端模拟器

Shell命令结构

[命令名] [子命令,[子命令,...]] [-参数简写] [--参数全写] [输入内容]
举个栗子

[命令名] sass
[参数简写] v    // 这里v是version简写，意义为查看版本号
sass -v

[命令名] npm
[子命令] run  // 子命令，代表运行...
[输入内容] serve  // 其中这个输入内容来源于package.json文件的script字段中，如果不存在则错误
npm run serve

命令行基本都是带有语义的，如果你能很清楚这些那么使用起来将更轻松，甚至不用硬背就可以熟练掌握技巧

常用Shell命令

查看命令所在路径

// cmd
where [CommandName]

// powershell
gcm [CommandName]

查看命令的使用方法和参数

// cmd/powershell原生指令或者系统命令行(CLI)程序
[CommandName] /? 

// 类linux类应用程序（这种属于在各种shell中用法一致，第三方开发，如node）
[CommandName] -h

or

[CommandName] --help

打开指定路径或启动程序

start [Path]

查看系统环境变量

// cmd，PATH属于特殊环境变量，它记录了当使用一个命令时会去哪里寻找匹配的可执行程序
echo %PATH%

// powershell
$env:PATH

路径

. : 当前路径
.. : 上一级路径
/ : 路径分隔符
C:// : 盘符标识，这里举例选用C盘

Node CLI使用指北

nvm(node version manager)

nodejs的版本管理工具

使用nvm可以更加方便的管理node版本，同时解决win10操作系统下在Program Files文件夹中软件没有权限导致的错误，当然我们可以通过为Program Files文件夹直接附权解决，但是没有nvm使用的优雅

安装

nvm-windows点击下载

由于nvm是为Linux平台开发的，所以windows平台使用要下载nvm-windows版本，而不是直接下载nvm

常用命令

安装指定版本的node，可以安装多个不同版本

nvm install [NodeVersion]

// 推荐安装node16.15.0版本，对于pnpm支持良好
nvm install 16.15.0

注意：如安装缓慢，可以考虑更换淘宝源

nvm更换淘宝源.png

查看主机所有安装的node

nvm ls

切换当前主机使用的node，注意这个版本必须是之前安装好的

// 切换完毕后在执行查看，你会发先这个版本前面有*号，代表切换成功了
nvm use 16.15.0
node -v

npm(node package manager)

传统且早期的node包管理器，存在一系列诟病问题且目前版本中没有完美解决幽灵依赖和node_modules体积过大碎片化等问题

替代方案：

yarn

快速、可靠和安全的 JavaScript 依赖管理工具

npm install -g yarn

pnpm

速度快、节省磁盘空间的软件包管理器，解决了幽灵依赖减少了node_modules体积过大问题

npm install -g pnpm

常用命令

安装指定包

// 当前项目安装
npm install [PackageName]

// 安装到当前项目，同时作为开发依赖而不是生产依赖
npm install [PackageName] -D

// 全局安装
npm install [PackageName] -g

// 项目依赖还原
npm install

这些包可以通过npm官网进行查找到，同时你也可以在github中寻找有用的包，有的时候你或许需要不安装或者不下载就使用对应的包内容（即时开发），这时候你可以使用 unpkg.com/[PackageNam…] 该网站进行快速的包CDN引入，甚至有些包只提供了commonjs规范的导出而你想要依赖于浏览器原生的ESM规范做导入，那么你可以使用 www.skypack.dev/[PackageNam…] 做导入，该网站不但提供CDN服务，同时会自动转换模块规范为ESM

查看全局安装了多少包

npm list -g --depth=0

查看当前NPM所有配置

npm config list

修改某一项配置，如更换淘宝源

npm config set registry="https://registry.npm.taobao.org/"

获取某一项配置的值

npm config get registry

移除安装的包

// 移除本地项目安装的包
npm uninstall [PakcageName]

// 移除全局安装的包
npm uninstall [PakcageName] -g

初始化一个项目

这里注意只要目录下有package.json文件，那么它就是一个前端工程化项目

// 初始化前端项目，实际是创建了一个package.json文件而已，-y参数是代表不询问直接搞
// 如果熟悉package.json中字段含义，手动创建一个效果相同
npm init -y

nrm(npm registry manager)

npm的镜像源管理工具

npm更换淘宝源确实很快，但是如果当你想要把自己的库文件发布到npm上面时候你就会发现会报错，原因是推送地址不是npm官方而是一个镜像，这个时候我们需要把源切回来，但是有可能这个操作重复频率还挺高，那么无论是输入源地址还是记录这个地址都是心智负担，所以通过nrm命令方式可以快速切换npm仓库源

安装

npm install -g nrm

常用命令

查看包含的可切换源

nrm ls

切换源

// 切换淘宝源
nrm use taobao

// 切换npm源
nrm use npm

npkill

安全快速的清理电脑上的 node_modules

随着时间推移即便是强如pnpm的这样快速的包管理器也无法经受Windows中的node_modules的摧残

node_modules黑洞.webp

这里为什么重点强调Windows操作系统呢因为它的NTFS磁盘格式对文件删除时进行过分检查造成删除缓慢问题，而想linux和macos使用的磁盘文件系统如APFS这类，可以实现秒删，那么Windows就无解了么，其实并不是我们只要跳过系统检查就行，换句话说不要通过鼠标删除，而是通过编程方式，好在社区已经提供了不错的工具，那就是npkill

安装

npm install npkill -g

常用命令

执行npkill上下选择想要删除的node_modules然后按空格，你会发现世界瞬间清净

cd ./projectPath
npkill

@antfu/ni

由于有的老项目使用的是vue2，但是pnpm+vue2这个组合会让一些IDE失去提示功能，所以推荐yarn+vue2，这样就会造成新老项目的来回切换包管理命令，导致人的混乱，@antfu/ni 解决了一问题

将不同包管理器命令统一并简化，自动判断当前项目使用的包管理器

常用命令

还原包

ni

安装指定模块

ni [packageName]

Vue项目搭建指北

好了，到这里我想对于node，npm这样的命令已经不再陌生了，那么我们可以开始搞事情了

抛开脚手架徒手搭建Vue3项目

分析vue脚手架@vue/cli为我们做了什么，说到这里就不得不提到一个问题，就是@vue/cli安装后使用的指令确是vue能，实际上包安装后可以使用的CLI命名或者说能不能使用CLI访问并不是包的命名决定的，而是存放在该包中的package.json中bin字段，所以我们通过 npm install @vue/cli -g 安装vue脚手架以后使用的命令行却是vue
@vue/cli

@vue/cli常用命令

创建一个指定命名的vue项目

vue create [proejctName]

启动可视化的web页面进行可视化的项目管理

vue ui

@vue/cli-service

好了，到此为止，@vue/cli 已经没有任何价值，我们开始抛开它搭建我们的vue项目

什么是 @vue/cli-service ？

答：service for vue-cli

根据这个包我们知晓了，原来提供vue核心服务的是 @vue/cli-service

服务包括：

提供开发服务器，热更新等功能可以实时预览
打包输出浏览器可识别文件
编译.vue(通过vue-loader)输出js，css等

那么 @vue/cli 又做了什么能

根据项目模板生成项目放到当前文件夹中

似乎 @vue/cli 做的这个事情我也能做( •̀ ω •́ )y

开始搭建

初始化前端项目

npm init -y

安装依赖包

npm i @vue/cli-service -D
npm i vue -D

创建src/main.js（@vue/cli-service默认入口文件是这个，可以通过vue.config.js进行配置）

// src/main.js
console.log('hello');

运行 @vue/cli-service 启动服务，这个包提供的CLI命令行名称是vue-cli-service

这里使用npx，由于命令行是本地项目安装不存在于全局系统环境，导致我们直接输入名称无法运行，但是node提供了npx使用该命令会自动在当前项目的node_modules下寻找存在的命令。注意：如果在集成环境终端中是不存在这个问题，或者加入到package.json的scripts中执行同样不存在上述问题

npx vue-cli-service serve

这是我们成功运行并且在控制台输出了hello，但是这样还不是vue项目呀，其实vue不也是js代码么有什么奇怪的，我们可以在main.js中随意输入内容啊，可以操作DOM加入一个div，先不要急着引入vue，让我们尝试操作一下DOM加入一个方块

// src/main.js
let div=document.createElement('div')
div.style.cssText ='width:100px;height:100px;background-color:red;'
document.body.appendChild(div)

加了三句操作DOM加入一个方块div屏幕显示一切正常，very good！

重点：接下来我们应该把这段代码更改为vue代码了，对了，vue需要挂载到一个 dom 对象上，这个不用担心，@vue/cli-service 默认的html模板里面是包含了一个根div的，想这样

<div id="app"></div>

那么我们只要在写入vue代码时候选择挂载对象是这个id=app的div对象元素就可以了

// src/main.js
import {createApp, h} from 'vue'

let app = createApp({
  render: ()=>h('div', null, 'hello')
})

app.mount('#app')

成功输出hello，但是render是啥呀，这和我平时写的vue文件不同呀，其实vue模板编译过后就是这种手动创建vnode的格式，我只是直接写出来了而已，这个不用关心，我们继续改造

创建src/App.vue

<template>
  <div>{{ msg }} Vue3</div>
</template>

<script>
import {defineComponent, ref} from 'vue'

export default defineComponent({
  setup() {
    let msg = ref('hello')

    return {
      msg
    }
  }
})
</script>

修改src/main.js

import {createApp, h} from 'vue'
import App from './App.vue'

let app = createApp(App)

app.mount('#app')

很神奇，这不就是我们平时写的vue项目么，那么最后在优化一下，在package.json加入scripts字段

package.json

"scripts": {
  "serve": "vue-cli-service serve"
}

命令行运行

npm run serve

完美~

抛开脚手架从零搭建Vue3入门核心知识点说明

知识储备

操作系统

Shell命令结构

常用Shell命令

路径

Node CLI使用指北

nvm(node version manager)

安装

常用命令

npm(node package manager)

常用命令

nrm(npm registry manager)

安装

常用命令

npkill

安装

常用命令

@antfu/ni

常用命令

Vue项目搭建指北

抛开脚手架徒手搭建Vue3项目

@vue/cli常用命令

@vue/cli-service

开始搭建