查看项目结构

第一步:含有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

图片.png

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

图片.png

至此,node环境安装完毕

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

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

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

这里我拿Dart环境举例

图片.png

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

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

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

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

1.安装依赖

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

npm install

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

npm 切换淘宝源

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

图片.png

这里存入了 package.jsondependencies 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

图片.png

图片.png

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

build

npm run-script build

图片.png

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

lint

npm run-script lint

图片.png

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

electron:build

`npm run electron:build``

图片.png

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

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

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

图片.png

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

图片.png

打开dmg

图片.png

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

打开安装完成的Application

图片.png

electron:serve

npm run-script electron:serve

图片.png

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

postinstall && postuninstall

npm run-script postinstall

electron-builder install-app-deps

图片.png

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

install

npm run-script install

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

也是安装依赖使用的命令

Q.E.D.


别云剑本星 智多星本剑