electron-vue搭建项目步骤

初步搭建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

image

另一种创建项目方式

用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