nebula-helper in macos

查看项目结构

第一步：含有 package.json 的项目基本上为 nodejs 项目

第二部：查看 package.json 依赖表明这是一个 vue/element/electron 的混合项目 由于有 electron 的依赖，所以大概率为一个客户端程序

0.安装环境

确定为 Nodejs 环境后,mac 用户可以使用 Home brew 安装 Node 环境，Homebrew 会自动将 node,npm 命令加入到环境变量里

brew install node

等待一段时间后

node -v

npm -v

还可以用 brew 查看安装的具体位置和其他信息

至此，node 环境安装完毕

如果网络不好的或者不想使用 brew 安装 Node 应该如何安装呢

下载 Nodejs 的二进制包，放到一个目录

将目录下的bin目录加入到环境变量中

这里我拿 Dart 环境举例

Macos的环境变量文件在 /etc/profile 或 ~/.bash_rc 或高版本Mac在 ~/.zsh_rc

如果没有该文件可以手动创建

最后关闭 terminal 重新打开即可刷新环境变量

再次使用 node,npm 进行环境测试

1.安装依赖

cd nebula-helper 首先打开项目目录

npm install

如果碰到网络问题可以 自行搜索

npm 切换淘宝源

安装后我们先查看一下 node_modules 下的 .bin 目录

这里存入了 package.json 中 dependencies devDependencies 所有依赖和依赖的依赖的二进制脚本，在 scripts 中真正被调用的，就是这些脚本

2.编译项目

查看 package.json 的 scripts 属性 可以看到有以下几个 command

 "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "electron:build": "vue-cli-service electron:build",
    "electron:serve": "vue-cli-service electron:serve",
    "postinstall": "electron-builder install-app-deps",
    "postuninstall": "electron-builder install-app-deps"
  },

逐步测试每条命令的作用

server

npm run-script serve

这条命令为 vue-cli-service serve 意在启动 vue 脚手架预览为 electron 嵌入的 vue 页面

build

npm run-script build

这条命令为 vue-cli-service build 打包 vue 页面，打包后的页面在 dist 目录

lint

npm run-script lint

lint 主要检查代码的规范性，不规范的代码在这里会以 error 的形式展现出来

electron:build

`npm run electron:build``

vue-cli-service electron:build 命令比较重要，这是使用 vue-cli 和 electron 相结合打包客户端的命令

因为涉及到下载 electron 程序所以对网络要求较高

打包后目录下会多出一个文件夹

进入文件夹就可以找到客户端的安装包了

打开 dmg

将左侧的图标拖入 Applications 即可完成安装

打开安装完成的 Application

electron:serve

npm run-script electron:serve

vue-cli-service electron:serve 这条命令主要是用来结合我们的 Vue 程序和 Electron 程序 debug 用的既可以写页面渲染，又可以调用 System

postinstall && postuninstall

npm run-script postinstall

electron-builder install-app-deps

这条命令是安装本地 electron 依赖的

install

npm run-script install

使用淘宝源和 electron8.4.0 重新下载依赖刷新 node_modules 目录

也是安装依赖使用的命令