主要介绍基于CLI插件集成vue和electron
什么是vue cli
Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必花好几天去纠结配置的问题。
Vue CLI 有几个独立的部分：
CLI
CLI (@vue/cli) 是一个全局安装的 npm 包，提供了终端里的 vue 命令。
CLI service
CLI 服务 (@vue/cli-service) 是一个开发环境依赖。它是一个 npm 包，局部安装在每个 @vue/cli 创建的项目中。CLI 服务是构建于 webpack 和 webpack-dev-server 之上的。
项目内部的 vue-cli-service 命令，提供 serve、build 和 inspect 命令。
在一个 Vue CLI 项目中，@vue/cli-service 安装了一个名为 vue-cli-service 的命令。
这是你使用默认 preset 的项目的 package.json：
{
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build"
}
}
CLI plugin
CLI 插件是向你的 Vue 项目提供可选功能的 npm 包，Vue CLI 插件的名字以 @vue/cli-plugin- (内建插件) 或 vue-cli-plugin- (社区插件) 开头，非常容易使用。当你在项目内部运行 vue-cli-service 命令时，它会自动解析并加载 package.json 中列出的所有 CLI 插件。
Vue CLI 使用了一套基于插件的架构。如果你查阅一个新创建项目的 package.json，就会发现依赖都是以 @vue/cli-plugin- 开头的。插件可以修改 webpack 的内部配置，也可以向 vue-cli-service 注入命令。基于插件的架构使得 Vue CLI 灵活且可扩展。
每个 CLI 插件都会包含一个 (用来创建文件的) 生成器和一个 (用来调整 webpack 核心配置和注入命令的) 运行时插件。当你使用 vue create 来创建一个新项目的时候，有些插件会根据你选择的特性被预安装好。如果你想在一个已经被创建好的项目中安装一个插件，可以使用 vue add 命令
安装使用vlue cli
npm install -g @vue/cli
执行有结果说明安装成功了
vue --version
创建项目
vue create <项目名>
ui界面的方式创建项目
vue ui
如果你想在一个已经被创建好的项目中安装一个插件，可以使用 vue add 命令
vue add eslint
vue add 的设计意图是为了安装和调用 Vue CLI 插件。 这不意味着替换掉普通的 npm 包。对于这些普通的 npm 包，你仍然需要选用包管理器。
我们推荐在运行 vue add 之前将项目的最新状态提交，因为该命令可能调用插件的文件生成器并很有可能更改你现有的文件。
vue-cli-service serve
命令会启动一个开发服务器 (基于 webpack-dev-server) 并附带开箱即用的模块热重载 (Hot-Module-Replacement)。
vue-cli-service build
会在 dist/ 目录产生一个可用于生产环境的包，带有 JS/CSS/HTML 的压缩，和为更好的缓存而做的自动的 vendor chunk splitting。它的 chunk manifest 会内联在 HTML 里。
静态资源处理
不是每个应用都需要是一个单页应用。Vue CLI 支持使用 vue.config.js中的pages选项构建一个多页面的应用。构建好的应用将会在不同的入口之间高效共享通用的 chunk 以获得最佳的加载性能。
静态资源可以通过两种方式进行处理：
- 在 JavaScript 被导入或在 template/CSS 中通过相对路径被引用。这类引用会被 webpack 处理。
- 放置在
public目录下或通过绝对路径被引用。这类资源将会直接被拷贝，而不会经过 webpack 的处理。
任何放置在 public 文件夹的静态资源都会被简单的复制，而不经过 webpack。你需要通过绝对路径来引用它们。
注意我们推荐将资源作为你的模块依赖图的一部分导入，这样它们会通过 webpack 的处理并获得如下好处：
- 脚本和样式表会被压缩且打包在一起，从而避免额外的网络请求。
- 文件丢失会直接在编译时报错，而不是到了用户端才产生 404 错误。
- 最终生成的文件名包含了内容哈希，因此你不必担心浏览器会缓存它们的老版本。
public 目录提供的是一个应急手段，当你通过绝对路径引用它时，留意应用将会部署到哪里。如果你的应用没有部署在域名的根部，那么你需要为你的 URL 配置 publicPath 前缀：
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
模式和环境变量
模式是 Vue CLI 项目中一个重要的概念。默认情况下，一个 Vue CLI 项目有三个模式：
development模式用于vue-cli-service servetest模式用于vue-cli-service test:unitproduction模式用于vue-cli-service build和vue-cli-service test:e2e
NODE_ENV 将决定您的应用运行的模式，是开发，生产还是测试，因此也决定了创建哪种 webpack 配置。
当你运行 vue-cli-service build 命令时，无论你要部署到哪个环境，应该始终把 NODE_ENV 设置为 "production" 来获取可用于部署的应用程序。
你可以在你的项目根目录中放置下列文件来指定环境变量：
.env # 在所有的环境中被载入
.env.local # 在所有的环境中被载入，但会被 git 忽略
.env.[mode] # 只在指定的模式中被载入
.env.[mode].local # 只在指定的模式中被载入，但会被 git 忽略
一个环境文件只包含环境变量的“键=值”对：
FOO=bar
VUE_APP_NOT_SECRET_CODE=some_value
请注意，只有 NODE_ENV，BASE_URL 和以 VUE_APP_ 开头的变量将通过 webpack.DefinePlugin 静态地嵌入到客户端侧的代码中。这是为了避免意外公开机器上可能具有相同名称的私钥。
你可以在应用的代码中这样访问它们：
console.log(process.env.VUE_APP_SECRET)
在构建过程中，process.env.VUE_APP_SECRET 将会被相应的值所取代。在 VUE_APP_SECRET=secret 的情况下，它会被替换为 "secret"。
除了 VUE_APP_* 变量之外，在你的应用代码中始终可用的还有两个特殊的变量：
NODE_ENV- 会是"development"、"production"或"test"中的一个。具体的值取决于应用运行的模式。BASE_URL- 会和vue.config.js中的publicPath选项相符，即你的应用会部署到的基础路径。
部署
如果你用 Vue CLI 处理静态资源并和后端框架一起作为部署的一部分，那么你需要的仅仅是确保 Vue CLI 生成的构建文件在正确的位置，并遵循后端框架的发布方式即可。
如果你独立于后端部署前端应用——也就是说后端暴露一个前端可访问的 API，然后前端实际上是纯静态应用。那么你可以将 dist 目录里构建的内容部署到任何静态文件服务器中，但要确保正确的 publicPath。
vue集成electron
在开发环境下，由于使用了webpack-dev-server，所以要访问dev server的地址（process.env.WEBPACK_DEV_SERVER_URL）才能得到实时更新的页面内容，而在生产环境下，可以直接使用file://协议。
由于我们这里使用的是Vue CLI Plugin Electron Builder，打包的配置需要放在vue.config.js中。
集成步骤, 基于vue cli
1、创建vue项目
vue ceate vue-electron
2、安装Vue CLI Plugin Electron Builder，进入项目目录，执行以下命令
vue add electron-builder
3、如果上面命令安装electron失败，或者希望安装其他electron版本，可以自己手动再安装一遍electron
npm install electron@35.0.0 --save-dev
如果执行失败，可尝试换以下方式执行
npm install -g cnpm
cnpm install --save-dev electron@35.0.0
4、至此，vue和electron都安装成功了
运行以下命令启动
npm run electron:serve
5、运行效果如下
===欢迎关注===
