跳到主要内容

环境安装

nvm、nodejs、npm 的安装。

  • nodejs

nodejs 是 JavaScript 的一种运行环境。在使用 vue-cli 的使用需要使用到 nodejs。

  • npm

npm 是 node.js 的包管理器。JavaScript运行时 node.js 的默认程序包管理器。

  • webpack

webpack是一个现代的JavaScript应用的静态模块打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源，依赖Node.js运行，使用场景是把开发的源码打包发布。

  • Vue

vue.js官方的脚手架项目使用了webpack对相关资源进行了打包优化。

nodejs​

node.js 是基于 chrome v8 引擎的 js 运行环境。

事件驱动、非阻塞式 I/O 模型。 和 Redis 很像

因为 nodejs 的特性，就意味着 nodejs 主要用于 I/O 密集，少量业务逻辑和计算消耗的场景。

nvm​

nvm 是一个 nodejs 的版本管理工具

查看可用版本​

nvm list available

查看已安装版本​

nvm list
nvm ls

切换 node 版本​

nvm use 8.0.0

npm​

what is npm

npm 是 nodejs 的默认程序包管理器

npm 由两个主要部分组成

  • 用于发布和下载程序的 CLI（命令行接口）
  • 托管 js 程序包的在线存储库（npmjs.com）

发布 js 软件包

npm publish

package.json​

将 package.json 视为快递盒子上的信息

package.json 在 npm init 的时候生成。

npm scripts​

package.json 的 script 字段

{
  "scripts": {
    //运行 TypeScript 编译器，将 TypeScript 代码编译成 js 代码
    "build": "tsc", 
    // 使用 prettier 将 .ts 文件格式化
    "format": "prettier --write **/*.ts",
    // 检查 ts 文件代码风格
    "format-check": "prettier --check **/*.ts",
    // 使用 ESLint 工具检查 ts 文件
    "lint": "eslint src/**/*.ts",
    // 使用 ncc 工具将 ts 项目打包
    "pack": "ncc build",
    // 运行 Jest 套件
    "test": "jest",
    // 执行上面所以的脚本
    "all": "npm run build && npm run format && npm run lint && npm run pack && npm test"
  }
}

version control​

  • ^ 表示最新的次版本。 ^1.0.3 可能会安装 1.3.0
  • ~ 表示最新的补丁程序版本， ~1.0.4 会安装 1.0.7

最终使用到的版本会记录在 package-lock.json 中

dependencies vs devDependencies​

{
  "dependencies": { // 通过 npm install --save 安装  （生产环境）
    "@actions/core": "^1.2.3",
    "@actions/github": "^2.1.1"
  },
  "devDependencies": { // 通过 npm install --save-dev 安装 （测试环境）
    "@types/jest": "^25.1.4",
    "@types/node": "^13.9.0",
    "@typescript-eslint/parser": "^2.22.0",
    "@zeit/ncc": "^0.21.1",
    "eslint": "^6.8.0",
    "eslint-plugin-github": "^3.4.1",
    "eslint-plugin-jest": "^23.8.2",
    "jest": "^25.1.0",
    "jest-circus": "^25.1.0",
    "js-yaml": "^3.13.1",
    "prettier": "^1.19.1",
    "ts-jest": "^25.2.1",
    "typescript": "^3.8.3"
  }
}

how to use npm​

install​

npm install <package-name>

npm install 会根据 package.json 将软件包下载到项目的 node_moudles 文件夹中

-g 表示全局安装。

npm install --production 仅仅安装 dependencies 的软件包。

npm ci​

npm ci 用于在项目中安装依赖。

set up mirror​

查看当前使用的 mirror

npm config get registry
  • 腾讯云
npm config set registry http://mirrors.cloud.tencent.com/npm/
  • 淘宝
npm config set registry https://registry.npmmirror.com
  • 华为云
npm config set registry https://mirrors.huaweicloud.com/repository/npm/

查看镜像是否设置成功

npm config get registry

troubleshooting​

https://kb.fit2cloud.com/?p=142

  1. node 和 npm 版本不匹配 https://nodejs.org/en/about/previous-releases
  2. 本地 npm 版本低 npm install -g npm
  3. 缓存问题 npm cache clean --fore
  4. 权限问题
  5. 项目缓存问题，删除 package-lock.json、node_modelues

1、Cannot read property 'insert' of undefined​

npm ERR! Cannot read property 'insert' of undefined

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/wangzhy/.npm/_logs/2023-07-29T06_49_14_095Z-debug-0.log

解决方案：npm 镜像源配置有问题 具体说明见：https://zhuanlan.zhihu.com/p/430580607

2、npm ERR! code EACCES​

npm ERR! code EACCES
npm ERR! syscall mkdir
npm ERR! path /usr/local/lib/node_modules/nrm
npm ERR! errno -13
npm ERR! Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/nrm'
npm ERR!  [Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/nrm'] {
npm ERR!   errno: -13,
npm ERR!   code: 'EACCES',
npm ERR!   syscall: 'mkdir',
npm ERR!   path: '/usr/local/lib/node_modules/nrm'
npm ERR! }
npm ERR! 
npm ERR! The operation was rejected by your operating system.
npm ERR! It is likely you do not have the permissions to access this file as the current user
npm ERR! 
npm ERR! If you believe this might be a permissions issue, please double-check the
npm ERR! permissions of the file and its containing directories, or try running
npm ERR! the command again as root/Administrator.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/wangzhy/.npm/_logs/2023-07-29T06_57_29_006Z-debug-0.log

解决方法：使用 sudo 执行

3、SyntaxError: Unexpected token '?'​

$ npm init vue@latest
/home/wangzhy/.npm/_npx/2f7e7bff16d1c534/node_modules/create-vue/outfile.cjs:4657
  const isFeatureFlagsUsed = typeof (argv.default ?? argv.ts ?? argv.jsx ?? argv.router ?? argv.pinia ?? argv.tests ?? argv.vitest ?? argv.cypress ?? argv.nightwatch ?? argv.playwright ?? argv.eslint) === "boolean";

SyntaxError: Unexpected token '?'
    at wrapSafe (internal/modules/cjs/loader.js:915:16)
    at Module._compile (internal/modules/cjs/loader.js:963:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)
    at Module.load (internal/modules/cjs/loader.js:863:32)
    at Function.Module._load (internal/modules/cjs/loader.js:708:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:60:12)
    at internal/main/run_main_module.js:17:47
npm ERR! code 1
npm ERR! path /home/wangzhy/dev/workspace_cloud/nodejs-01
npm ERR! command failed
npm ERR! command sh -c create-vue

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/wangzhy/.npm/_logs/2023-07-29T07_03_05_809Z-debug-0.log

解决方案：先安装 npm install -g @vue/cli 在执行 npm init vue@latest

4、每次执行 npm 时都要带上 sudo​

查看 npm 安装路径

sudo npm config get prefix

修改文件夹的权限

sudo chown -R $USER /usr/local/bin

5、npm install 的时候报错​

➜  blog git:(master) npm install npm@latest  -g 
npm error code EBADENGINE
npm error engine Unsupported engine
npm error engine Not compatible with your version of node/npm: npm@11.1.0
npm error notsup Not compatible with your version of node/npm: npm@11.1.0
npm error notsup Required: {"node":"^20.17.0 || >=22.9.0"}
npm error notsup Actual:   {"npm":"10.7.0","node":"v22.2.0"}

根据提示，node 版本需要 {"node":"^20.17.0 || >=22.9.0"} 即，大版本为 20 或者 版本号大于 22.9.0 。

具体版本号规则见： 版本号

skill​

启动时指定端口

npm run start -- --port 8080

nrm​

快速修改、切换 npm 镜像源.

install​

npm install -g nrm

show all mirror​

nrm ls

switch mirror​

nrm use taobao

test mirror speed​

nrm test taobao

webpack​

js 应用程序的静态模块打包工具。

vie-cli​

  1. 全局安装 vue-cli

仅执行一次，如果下载很慢，必要时设置镜像

npm install -g @vue/cli
  1. 创建项目

需先切换到要创建项目的目录

vue create xxxx
  1. 启动项目
npm run serve