第一步 检查安装环境, 自行百度
环境:
系统: Windows
node: v10.16.0
Git: 安装
第二步 安装 electron-forge
NPM i -g electron-forge
注意: 为了加快安装速度, NPM 切换成淘宝镜像, 自行百度.
第三步 初始化 electron-vue 项目
进入你要安装项目的所在文件夹, 运行
electron-forge init my-electron-vue --template=vue
此处需要一段时间...
此处有坑:
如果出现如下界面
it looks like you are missing some dependencies you need to get Electron running.
Make sure you have Git installed and Node.JS version 6.0.0+
解决方案:
1, 进入你要安装项目的所在文件夹, 点击鼠标右键, 选择 Git Bash Here
2, 在打开的命令行工具里, 重新执行代码
electron-forge init my-electron-vue --template=vue
3, 回车, 然后等运行完毕, 完成初始化的界面如下:
第四步: 运行
进入项目目录, 运行
- cd my-electron-vue
- electron-forge start
效果如下:
启动后的应用如下图:
第五步: 修改内容测试一下
打开代码编辑器, 目录结构如下:
修改一下 index.html 内容:
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="utf-8">
- <title>
- </title>
- </head>
- <body>
- <div id="test">
- </div>
- </body>
- <script>
- import Vuefrom 'vue';
- import Testfrom './test';
- const App = new Vue(Test).$mount('#test');
- App.text = "World!";
- </script>
- </HTML>
保存后, 会发现应用桌面会自动渲染:
注意: 此时你的命令行应该出现如下界面:
具体的问题我也不知道, 如果有人知道可以留言, 简单的理解就是现在没有问题, 以后就不好说了
来源: http://www.jianshu.com/p/4316babaa069