electron实操笔记.docVIP

ElectronElectron 是一个可以用?JavaScript、HTML 和 CSS?构建桌面应用程序的库。这些应用程序能打包到 Mac、Windows 和 Linux 系统上运行，也能上架到 Mac 和 Windows 的 App Store。Electron提供了丰富的本地（操作系统）的API，使你能够使用纯JavaScript来创建桌面应用程序。与其它各种的Node.js运行时不同的是Electron专注于桌面应用程序而不是Web服务器。Electron 可以让你使用纯 JavaScript 调用丰富的原生 APIs 来创造桌面应用。你可以把它看作是专注于桌面应用而不是 web 服务器的，io.js 的一个变体。这不意味着 Electron 是绑定了 GUI 库的 JavaScript。相反，Electron 使用 web 页面作为它的 GUI，所以你能把它看作成一个被 JavaScript 控制的，精简版的 Chromium 浏览器。汇成一句话本质上，electron 就是一个带了 Chrome 浏览器的壳子（无需考虑兼容性的问题）。Electron用 web 页面作为它的 GUI，而不是绑定了 GUI 库的 JavaScript。它结合了 Chromium、Node.js 和用于调用操作系统本地功能的 APIs（如打开文件窗口、通知、图标等）。一个开发前端客户端工具。具有两个进程，分别是主进程，以及渲染进程。主进程：运行 package.json 里面 main 脚本的进程成为主进程。渲染进程： 每个 electron 的页面都运行着自己的进程，称为渲染进程。主进程也就是 npm run start 出来的窗口，我们关心的，还是窗口里面的内容，即是渲染进程。Electron 应用就像 Node 应用，它也依赖一个 package.json 文件。该文件定义了哪个文件作为主进程，并因此让 Electron 知道从何启动应用。然后主进程能创建渲染进程，并能使用 IPC 让两者间进行消息传递。学习更多 HYPERLINK /a/1190000007503495 /a/1190000007503495Vue框架安装 vue 、vue-cli、vue initVue是什么，是一套构建用户界面的渐进式框架（官网解释），什么叫渐进式框架呢，简单回答就是主张最少，这些概念只能自己去看，自己去理解，一千个读者一千个哈姆雷特，不过多的解释。Vue官方文档 很全面的。vue-cliVue-cli是快速构建这个单页应用的脚手架，这个可是官方的。官方给的建议，如果你是初次尝试Vue，哪就老老实实用普通的书写引入js文件，这里牵扯太多的东西，例如webpack 、npm 、nodejs 等等，很容易成就从入门到放弃的思想。这篇文章本身就是按照官方的文档中的构建流程来的（官方构建建议?）。一下是构建过程。vue init vue init simulatedgreg/electron-vue#1.0 my-project依据模板，克隆模板目录结构，形成自己的项目目录。vue list列出官方可用模板。操作步骤step1: vue init webpack(官方) ，会生成项目目录在当前目录下Webpackwebpack 根据模块的依赖关系进行静态分析，这些文件(模块)会被包含到 bundle.js 文件中。Webpack 会给每个模块分配一个唯一的 id 并通过这个 id 索引和访问模块。 在页面启动时，会先执行 runoob1.js 中的代码，其它模块会在运行 require 的时候再执行。制作安装包grunt 安装Grunt是一个带有内建的常用任务的基于任务的构建工具这么说可能你会有点晕+_+我们来通俗的说一下，平常我们的项目中，可能需要不停的做一些重复的任务，例如压缩（minification）、编译、单元测试、查错（linting）等，如果我们有一款工具可以自动帮我们做这些，是不是就很爽了？Grunt就是这么生出来的Grunt生态系统非常庞大，并且一直在增长。由于拥有数量庞大的插件可供选择，因此，你可以利用Grunt自动完成任何事，并且花费最少的代价。如果找不到你所需要的插件，那你也可以自己动手创造一个Grunt插件grunt cli安装“CLI”被翻译为“命令行”。要想使用grunt，首先必须将grunt-cli安装到全局环境中，使用nodejs的“npm install…”进行安装。如果你不了解nodejs的npm如何安装软件，这里就先不要问了，先照着我说的做。grunt-electron-installer安装，用于制作electron开发的安装包（setup.exe）注：一定要安装在项目本地目录，供require()的方式