作者:管理员  历史版本:1  最后编辑:龚清  更新时间:2024-09-20 15:13

本文将会带领您从零开始使用 IBPS平台 创建下面的页面:

提示:
本示例中的代码和截图可能和您现在手中的版本不同,但操作思路一样。

一、安装环境

提示:
如果您以前运行过 NodeJS 项目,并且本机 Node.js (14+),可以忽略这一步。如果低过这个版本请升级到最新稳定版

1.1 node 环境

node.js 官网 下载合适您系统的 node.js。

安装完毕后检查版本(最好使用 Node.js 14 +版本)如果低过这个版本请升级到最新稳定版

Nodejs请升级到14+版本,如果18+版本因为发布的OpenSSL3.0, 而OpenSSL3.0对允许算法和密钥大小增加了严格的限制,需要执行执行下脚本Nodejs请升级到14+版本,如果18+版本因为发布的OpenSSL3.0, 而OpenSSL3.0对允许算法和密钥大小增加了严格的限制,需要执行执行下脚本,FAQ 第4个问题

node -v
v16.15.0
npm -v
8.5.5

二 安装依赖

【推荐使用】 yarn方式安装依赖 【推荐使用】 yarn方式安装依赖
npm和yarn的区别,我们该如何选择?

2.1 安装npm 依赖【推荐使用】

将终端切换到项目目录之后安装依赖:

npm install

或者

npm i

TIP
强烈建议不要用直接使用 cnpm 安装,会有各种诡异的 bug,可以通过重新指定 registry 来解决 npm 安装速度慢的问题。若还是不行,可使用 yarn 替代 npm。
Windows 用户若安装不成功,很大概率是node-sass安装失败,解决方案。
另外因为 node-sass 是依赖 python环境的,如果你之前没有安装和配置过的话,需要自行查看一下相关安装教程。

npm install --global --production windows-build-tools

由于网络原因,npm 在国内使用比较慢,建议切换 npm 源到国内镜像。

2.1.1、nrm [ 建议 ]

安装:

npm install -g nrm

查看所有可用源:

nrm ls
* npm -----  https://registry.npmjs.org/
  cnpm ----  http://r.cnpmjs.org/
  taobao --  https://registry.npm.taobao.org/
  nj ------  https://registry.nodejitsu.com/
  rednpm -- http://registry.mirror.cqupt.edu.cn
  skimdb -- https://skimdb.npmjs.com/registry

切换源:

nrm use taobao

2.1.2、cnpm[推荐使用]

有比较方便的方式切换您的 npm 源:

  • [ 建议 ] 安装依赖【淘宝源】 方式使用,不要用直接使用cnpm` 安装,会有各种诡异的 bug
npm install --registry=https://registry.npm.taobao.org

2.2 安装yarn依赖【暂时不推荐使用】

2.2.1 Yarn的简介:

Yarn是facebook发布的一款取代npm的包管理工具。

2.2.2 yarn的特点:

  • 速度超快。
    Yarn 缓存了每个下载过的包,所以再次使用时无需重复下载。 同时利用并行下载以最大化资源利用率,因此安装速度更快。
  • 超级安全。
    在执行代码之前,Yarn 会通过算法校验每个安装包的完整性。
  • 超级可靠。
    使用详细、简洁的锁文件格式和明确的安装算法,Yarn 能够保证在不同系统上无差异的工作。

2.2.3 yarn的安装:

  1. 下载node.js,使用npm安装
    npm install -g yarn
    查看版本:yarn --version
  2. 安装node.js,下载yarn的安装程序:
    提供一个.msi文件,在运行时将引导您在Windows上安装Yarn

3.[可选] Yarn 淘宝源安装,分别复制粘贴以下代码行到黑窗口运行即可

 yarn config set registry https://registry.npm.taobao.org -g

2.2.4 yarn的常用命令:

  1. 安装yarn

    npm install -g yarn
  2. 安装成功后,查看版本号:

    yarn --version
  3. 创建文件夹 yarn

    md yarn
  4. 进入yarn文件夹

    cd yarn

初始化项目

yarn init //npm init,执行输入信息后,会生成package.json文件
  1. yarn的配置项:
yarn config list // 显示所有配置项
yarn config get <key> //显示某配置项
yarn config delete <key> //删除某配置项
yarn config set <key> <value> [-g|--global] //设置配置项

安装包:

yarn install //安装package.json里所有包,并将包及它的所有依赖项保存进yarn.lock
yarn install --flat //安装一个包的单一版本
yarn install --force //强制重新下载所有包
yarn install --production //只安装dependencies里的包
yarn install --no-lockfile //不读取或生成yarn.lock
yarn install --pure-lockfile //不生成yarn.lock
添加包(会更新package.json和yarn.lock)

2.3 npm 与 yarn命令比较:

三、开发调试

在vscode启动项目

在终端或者工具类

在终端输入以下命令:

npm run dev

或者使用:

npm run start

也可以使用 cli3 新推荐的命令:

npm run serve

以上每种方式效果都是一样的,只是为了照顾不同人的习惯起了三个名字,实质上都是运行了 vue-cli-service serve

启动完成后会自动打开浏览器访问 http://localhost:9528,
你看到下面的页面就代表操作成功了。

四、FAQ

1、npm install(或npm i) 出现需要安装python

出现该问题的原因
1) 可能你安装过 cnpm (这个会出现很多怪异的问题:需要安装python就是一种)
2) 可能npm 被墙了(你懂的)有些包安装不正确
解决办法
1)先把npm 切换会正确的 npm源

npm config set registry https://registry.npmjs.org 

2)删除 源码的包和引用(删除node_modules和package-lock.json)

3) 重新 npn install (或npm i)

如果安装还是不成功,可以采用淘宝源,使用该以下方式

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

2、安装yarn:无法加载文件 C:\Users\hugh\AppData\Roaming\npm\yarn.ps1解决办法

PowerShell yarn 解决方法
1)搜索powershell,右键以管理员身份运行

2)使用命令更改计算机的执行策略
执行: set-ExecutionPolicy RemoteSigned

a.在输入A或者Y后,如果出现:

b.则执行:Set-ExecutionPolicy -Scope CurrentUser

c.最后查看执行策略:

3、出现node-sass安装不上问题

1)、可能nodejs 版本问题

建议采用v16+版本
有时候需要多个版本, 也可以采用nvm切换版本 参考文档:http://doc.bpmhome.cn/docs/ibps_v3_develop/ibps_v3_develop-1e3tdlj7qmses

2) 网上办法

暂无

4、在升级nodejs版本到v18+ 后启动项目报digital envelope routines::unsupported

1)原因

node.js的版本问题
因为 node.js V17版本中最近发布的OpenSSL3.0, 而OpenSSL3.0对允许算法和密钥大小增加了严格的限制,可能会对生态系统造成一些影响。故此以前的项目在升级 nodejs 版本后会报错

2)解决办法

方法一:

windows:

set NODE_OPTIONS=--openssl-legacy-provider

linux & mac

export NODE_OPTIONS=--openssl-legacy-provider

方法二:
只要在原来package.json里命令前添加 SET NODE_OPTIONS=–openssl-legacy-provider 就好了

  "scripts": {
    "dev": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve",
    "build": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service build",
  },

方法三:
如果还是不行,建议退回node16.x版本重试,或者使用nvm管理node版本
nvm 使用说明