初步搭建electron+vue项目
1.Electron-Vue文档
https://electron.org.cn/vue/index.html
第一步:安装 vue-cli 和 脚手架样板代码
(1)npm install -g vue-cli
(2)vue init simulatedgreg/electron-vue my-project
第二步:安装依赖并运行你的程序
(1)cd my-project
(2)yarn # 或者 npm install
(3)yarn run dev # 或者 npm run dev
另一种创建项目方式
用yarn安装----快捷创建项目
https://yarn.bootcss.com/
1.yarn create electron-app demo
2.cd demo
3.yarn start
4.yarn make
2、electron-vueUI框架ElementUi的使用
地址：http://element-cn.eleme.io/#/zh-CN
3、electron-vue中使用element-ui：
（1）安装
npm i element-ui -S
（2）引入以及配置element-ui renderer/main.js
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
（3）看文档使用
找到组件
<el-button type="primary">主要按钮</el-button>
<el-button type="success">成功按钮</el-button>
<el-button type="info">信息按钮</el-button>
4、electron-vue中使用sass
地址：https://simulatedgreg.gitbooks.io/electron-vue/content/cn/using_pre-processors.html
（1）安装sass-loader：
npm install --save-dev sass-loader node-sass
vue文件中修改style为如下代码：
<style lang="scss">
body{
/*SCSS*/
}
</style>
5.注意：如果需要在页面中通过import引入scss 如： import '../assets/style.scss';
需要进行如下操作:
（1）安装
sass-loader node-sass：
cnpm install sass-loader node-sass --save
（2）找到webpack.renderer.config.js配置
{
test: /\.scss$/,
use: [
"style-loader", // creates style nodes from JS strings
"css-loader", // translates CSS into CommonJS
"sass-loader" // compiles Sass to CSS, using Node Sass by default
]
}
（3）结束项目重新运行 npm run dev
这个时候项目中就可以通过import命令引入scss了
import '../assets/style.scss';
6.Electron、electron-vue中隐藏顶部菜单隐藏顶部最大化、最小化、关闭按钮自定最大化、最小化、关闭按钮
(1)electron-vue中隐藏顶部菜单（在主进程里也就是main文件夹里的index.js文件中）放在function createWindow里
mainWindow.setMenu(null)
(2)electron-vue中隐藏关闭最大化最小化按钮
mainWindow=newBrowserWindow({
height:620,
useContentSize:true,
width:1280,
frame:false/*去掉顶部导航去掉关闭按钮最大化最小化按钮*/
})
(3)electron-vue自定义关闭最大化最小化按钮
mainWindow.minimize();
})
//登录窗口最大化
ipc.on('window-max',function(){
if(mainWindow.isMaximized()){
mainWindow.restore();
}else{
mainWindow.maximize();
}
})
ipc.on('window-close',function(){
mainWindow.close();
})
(4)electron-vue自定义导航可拖拽
可拖拽的css:
-webkit-app-region:drag;
不可拖拽的css:
-webkit-app-region:no-drag;
(5) 打包两种方式
- npm run build
- electron-builder
