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 就因为它会报证书错误无法下载，于是手动把它的服务停掉

# 再安装，果然不再报证书错误了