查看项目结构

第一步：含有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-iot-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依赖的