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 包含一组用于常见编程多字符组合的连字,它通过渲染,将我们输入的多个字符变为更有意义的数学符号
- 安装下载的字体,过程略
- 打开VSCODE,依次点击文件-首选项-设置-搜索font,在Font Family中的最前面添加’Fira Code’,然后打开Font Ligatures下的 settings.jong进行设置
3. 进入settings.json后,把"editor.fontLigatures": null,改为:“editor.fontLigatures”: true
11.
未完待续…