Mac电脑前端环境配置

1. 下载 Node.js

打开终端

node -v
# 输入后回车
v14.17.5
# 出现版本号, 则表示'Node.js'安装成功

npm -v
# 输入后回车(检测'Node.js'的包管理工具是否自动安装)
6.14.14
# 出现版本号, 说明安装成功

2. Vue脚手架( Vue-CLI )

切记使用sudo + 密码 来实现环境配置

# 安装新版
sudo npm install -g @vue/cli
# 检查版本
vue --version
# @vue/cli 4.5.13

3. 安装淘宝镜像

# 创建项目时的自动提示
?  Your connection to the default npm registry seems to be slow.
   Use https://registry.npm.taobao.org for faster installation? (Y/n)

使用阿里定制的cnpm命令行工具代替默认的npm

npm install -g cnpm --registry=https://registry.npm.taobao.org

4. Element Plus 组件库

npm install element-plus --save

5. 安装 Axios

npm i axios

6. Node快速切换版本、版本回退(降级)、版本更新(升级)

// 安装node版本管理模块n
sudo npm install n -g

// 安装稳定版
sudo n stable

// 安装最新版
sudo n latest

// 版本降级/升级
sudo n 版本号

// 检测目前安装了哪些版本的node
n

// 切换版本（不会删除已经安装的其他版本）
n 版本号

// 删除版本
sudo n rm 版本号

7. node-sass 和sass-loader

依赖中 node-sass 的版本不支持 Node.js16 ，只能在 15 及以下的环境下运行，通过 node 版本控制器 n 对使用的 node 进行降级就可以正常安装 node-sass

// 查看版本
node-sass -v

// 卸载
npm uninstall --save node-sass

// 安装指定版本
npm i -D node-sass@4.12.0
npm i -D sass-loader@7.1.0

8. vue-loader

运行项目找不到 vue-loader

// 更新 vue-loader
npm update vue-loader

9. Network（链接未导出）

报错：

只有本地链接，无 Network

> vite-vue@0.0.0 serve /Users/UserName/Workspace/vue-vite
> vite | vite preview

  vite v2.3.7 build preview server running at:

  > Local: http://localhost:3000 | 5000/
  > Network: use `--host` to expose

原因：

当 局域网 中另一台设备需要访问该服务时，必须通过本机 IP + 端口 访问。
尝试访问后，发现找不到这个服务，原因是 没有 将服务暴露在网络中。

解决方案：

方法一（未成功）：

执行 npm run dev | serve --host 后，控制台还是会显示 Netvork: user --host to expose

方法二：

编辑 vite.config.js 配置

import vue from '@vitejs/plugin-vue'

/**
 * https://vitejs.dev/config/
 * @type {import('vite').UserConfig}
 */
export default {
  plugins: [vue()],
  server: {				// ← ← ← ← ← ←
    host: '0.0.0.0'	// ← 新增内容 ←
  }						// ← ← ← ← ← ←
}

10. Fira Code 字体

ira Code 包含一组用于常见编程多字符组合的连字，它通过渲染，将我们输入的多个字符变为更有意义的数学符号

GitHub 官网下载地址

1. 安装下载的字体，过程略
2. 打开VSCODE,依次点击文件-首选项-设置-搜索font,在Font Family中的最前面添加’Fira Code’,然后打开Font Ligatures下的 settings.jong进行设置

3. 进入settings.json后,把"editor.fontLigatures": null,改为:“editor.fontLigatures”: true

11.

---

未完待续…