nebula-helper in macos

本贴最后更新于 301 天前,其中的信息可能已经时过境迁

查看项目结构

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

也是安装依赖使用的命令

  • Vue.js

    Vue.js(读音 /vjuː/,类似于 view)是一个构建数据驱动的 Web 界面库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

    231 引用 • 641 回帖 • 458 关注
  • Electron

    Electron 基于 Chromium 和 Node.js,让你可以使用 HTML、CSS 和 JavaScript 构建应用。它是一个由 GitHub 及众多贡献者组成的活跃社区共同维护的开源项目,兼容 Mac、Windows 和 Linux,它构建的应用可在这三个操作系统上面运行。

    15 引用 • 128 回帖 • 1 关注
1 操作
someone27889 在 2020-08-28 10:52:27 更新了该帖

广告 我要投放

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...