Electron-vue 项目初始化

Electron-vue 项目初始化

0. npm 设置国内镜像

npm config set registry https://registry.npm.taobao.org/
npm config set ELECTRON_MIRROR http://npm.taobao.org/mirrors/electron/

1. 安装 vue-cli 和 脚手架样板代码

1. 按装vue-cli

npm install -g vue-cli
vue init simulatedgreg/electron-vue my-project

2. 安装依赖并运行你的程序

my-project
npm install
npm run dev

3. 编译打包

npm run build:clean
npm run build

3. 安装ElementUI

1. 按装ElementUI

npm i element-ui -S

2. 安装ElementUI全局引用

文件路经： ./src/renderer/main.js

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI, { size: 'mini', zIndex: 3000 });  //size：medium / small / mini

3. ElementUI 加入白名单

文件路经： ./electron-vue/webpack.renderer.config.js

let whiteListedModules = ['vue', 'ElementUI'] //第 21 行左右

3. 安装Font-Awesome

图标查询网址：http://fontawesome.dashgame.com

1. 安装Font-Awesome

npm install font-awesome

2. 加载Font-Awesome样式

文件路经： ./src/renderer/main.js

import 'font-awesome/css/font-awesome.min.css'

3 使用Font-Awesome图标

替换 i 里的 fa-camera-retro 即可

<i class="fa fa-camera-retro"></i>   

4. 安装Knex和SQLite3

Knex官方网站: https://knexjs.org

SQLite3编译时报错：复制以下文件到：项目目录\node_modules\sqlite3\lib\binding\electron-v2.0-win32-x64\node_sqlite3.node https://share.weiyun.com/5ElSI84

npm install knex --save
npm install sqlite3

5. Electron-vue 常规设置

文件路径： ./src/main/index.js

//禁用缓存
app.commandLine.appendSwitch("--disable-http-cache");
//关闭 Console 安全警告
process.env.ELECTRON_DISABLE_SECURITY_WARNINGS = true;

6. Electron-vue 生命周期

export default {
   data() {
     return {
      msg:'welcome'
     }
   },
   methods: {
     created: function() {
      console.log('实例已经创建,msg变量还未渲染到模板')
     },
     mounted: function() {
      console.log('已经挂载到模板上:msg变量渲染到模板')
     },
     updated: function() {
      console.log('实例更新啦')
     },
     destroyed: function() {
      console.log('销毁啦')
     }
   }
}

9. npm 基本操作

1. npm安装模块

  【npm install xxx】利用 npm 安装xxx模块到当前命令行所在目录；
  【npm install -g xxx】利用npm安装全局模块xxx；

2. 本地安装时将模块写入package.json中：

  【npm install xxx】安装但不写入package.json；
  【npm install xxx –save】 安装并写入package.json的”dependencies”中；
  【npm install xxx –save-dev】安装并写入package.json的”devDependencies”中。

3. npm 删除模块

  【npm uninstall xxx】删除xxx模块； 
  【npm uninstall -g xxx】删除全局模块xxx；

4. npm 查看安装过的包

  【npm list -g --depth 0】
  -g:全局的安装包 
  list：已安装的node包 
  –depth 0：这个参数我就不清楚了，可能是深度0，搜了一下没有找到解释

转载于:https://my.oschina.net/u/579976/blog/2208243