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

另一種創(chuàng)建項目方式

用yarn安裝----快捷創(chuàng)建項目
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