vue 赶鸭子上架入门笔记（一） 安装开发环境
准备接手一个 vue 的前端项目，从零开始学习 vue。目标不高大上，能看得懂代码，能进行简单的修改，改完能打包和部署。
首先解决 vue 开发环境的准备。访问 Node.js 官方网站，下载适合你操作系统的 Node.js 安装包，安装 Node.js，Node.js 安装包中包含了 npm。我的机器上很早以前安装过 Node.js，所以 npm 是有的
# 查看版本
npm -v
6.14.10
# 使用淘宝镜像安装 cnpm, 回避 npm 安装速度慢的问题
npm install cnpm
npm ERR! request to https://registry.npm.taobao.org/cnpm failed, reason: certificate has expired
# 遇到错误，估计是镜像地址变了，更换 npm 镜像源
npm config set registry https://registry.npmmirror.com/
# 升级 npm
npm install -g npm
npm WARN notsup Unsupported engine for npm@10.8.2: wanted: {"node":"^18.17.0 || >=20.5.0"} (current: {"node":"14.15.4","npm":"6.14.10"})
npm WARN notsup Not compatible with your version of node/npm: npm@10.8.2
# 遇到错误，估计是 node.js 版本太低，此时再执行 npm 均会报错，即使降级也无法执行，需要先升级 node.js
internal/modules/cjs/loader.js:883
throw err;
^
Error: Cannot find module 'node:path'
# 从 https://github.com/coreybutler/nvm-windows/releases 下载安装 nvm-setup，用 nvm 升级 node.js
# 查看 nvm 的版本
nvm -v
1.1.12
# 查看可用的 node.js 版本
nvm list available
# 按前面升级 npm 时的报错提示，安装 node.js 18.17.0
nvm install 18.17.0
# 应用这个版本的 node.js
nvm use 18.17.0
# 还可以查看本机安装的所有版本
nvm ls
* 18.17.0 (Currently using 64-bit executable)
14.15.4
# 接下来，安装 cnpm
npm install cnpm -g
# 进入工作目录，安装开发环境(方法一: 仅 vue，不带其他依赖库)
cd 工作目录
# 安装指定版本的 vue
cnpm install vue@2.6.10
# 查看当前目录下已安装的vue 版本
cnpm list vue
# 全局安装命令行工具 vue-cli
cnpm install --global vue-cli
# 创建一个缺省单页应用项目(方法二: vue 和基本的依赖库)
vue init webpack my-project
vue-cli · Failed to download repo vuejs-templates/webpack: unable to verify the first certificate
# 报错了，尝试单独拉取项目模板
git clone https://github.com/vuejs-templates/webpack.git my-template
# 用拉取的模板创建项目
vue init ./my-template my-project
# 进入项目目录，运行测试
cd my-project npm run dev
# 另外创建一个项目
cd 新的项目目录
cnpm install cnpm run dev
# 用 vue 命令行工具创建项目(方法三: 不需要单独下载 webpack 模板)
cd 另一个项目目录
vue create my-project
vue create is a Vue CLI 3 only command and you are using Vue CLI 2.9.6.
You may want to run the following to upgrade to Vue CLI 3:
# 报错，估计是 vue-cli 版本太低，需要升级
npm uninstall -g vue-cli npm install -g @vue/cli
# 重新创建项目
vue create my-project
# 运行新建的项目
cd my-project npm run serve
# 打包项目, 打包好的文件在 ./dist 目录下
cnpm run build
# 直接运行 ./dist/index.html 可能白屏，需要手动修改 index.html 的源码，把所有 / 开头绝对地址链接修改为 ./ 的相对地址
# 再次尝试通过 vue 命令行创建一个 webpack 的单页应用
vue init webpack my-project
Command vue init requires a global addon to be installed.
Please run undefined @vue/cli-init and try again.
# 报错，需要全局安装 @vue/cli-init 插件
cnpm install -g @vue/cli-init
# 重新运行初始化项目
vue init webpack my-project
vue-cli · Failed to download repo vuejs-templates/webpack: unable to verify the first certificate
# 还是一样的报错，不确定是 源有问题，或者 npm 或 node 版本问题，还是系统时间和时区的问题
# 除了手动下载模板以外(见方法二)，可以通过设置环境变量来忽略证书验证，但这会降低安全性，不推荐。
set NODE_TLS_REJECT_UNAUTHORIZED=0
# 忽略了证书错误，同样的错误，还是不能安装
# 全局安装源管理工具 nrm
npm install -g nrm nrm ls nrm use taobao
# 换 tencent 源或者 npm 源错误都一样，突然想到 fastgithub 在运行，因为之前 nuget 就因为它会报证书错误无法下载，于是手动把它的服务停掉
# 再安装，果然不再报证书错误了
