总结一下这两周的入门之路。

1.安装node.js

过程就是下载:https://nodejs.org/en/,安装,完了在命令行窗口,在任何目录下都可录入node -v应能看到类似反馈

如果提示"'node' 不是内部或外部命令,也不是可运行的程序",可以检查一下系统的环境变量是否包含node.js的安装的目标目录。我下载的是压缩包,解压后我需要手工添加

2.安装vue-cli。它包含了vue-router,vuex, vue-resource,安装参考以下文章的安装部分

https://blog.csdn.net/wulala_hei/article/details/80488674

3.使用vue-cli构建electron-vue

https://blog.csdn.net/github_36978270/article/details/78460696

4.安装element-ui。在项目的目录下执行以下命令安装到项目中

npm install --save element-ui

在渲染进程目录下src/renderer/main.js的头部添加以下代码。下面的"..."是指原文件已有的任意存在或不存在的代码。

...
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI);
...

具体每个UI组件用法参考Element UI

5.vuex的使用,我参考了这篇文章

https://segmentfault.com/a/1190000011557522

但文章的第5点说的commit似乎是有问题的。comit命令应只能在store内部,如其action的方法中使用,vue组件需使用 this.$store.dispatch('methodName') 命令来触发action中的methodName方法。
但需要注意src\main\index.js需添加以下imprt语句,不然dispatch不会有响应

...
import store from '../renderer/store'
...

6.安装sqlite3

我在win10系统上安装sqlite3碰了很多钉子,其实在electron上还需要依赖electron-builder.

首先, 添加“postinstall”到我们的package.json文件中:

"scripts": {
"postinstall": "install-app-deps"
...
}

接着安装好electron-builder和sqlite3并执行创建命令,在命令行录入分别执行以下三个命令,记住命令窗口的当前目录必须在项目的主目录下:

npm install --save-dev electron-builder
npm install --save sqlite3
npm run postinstall

electron-builder会根据当前操作系统创建出包含正常binding路径,并适合Electron使用的原生组件,于是你就能象其他组件一样直接require其名字

这有一个范例,我觉得不错,大家可以拿来学习一下

https://www.oschina.net/p/electron-vue-music

electron、vue.js、vuex、element-ui、sqlite3的更多相关文章

  1. 基于 Laravel、Vue.js开发的全新社交系统----ThinkSNS+

    什么是ThinkSNS+ ThinkSNS(简称TS)始于2008年,一款全平台综合性社交系统,为国内外大中小企业和创业者提供社会化软件研发及技术解决方案,目前最新版本为ThinkSNS+.新的产品名 ...

  2. vue学习(一)、Vue.js简介

    Vue.js 五天 汤小洋一. Vue.js简介1. Vue.js是什么Vue.js也称为Vue,读音/vju:/,类似view,错误读音v-u-e 版本:v1.0 v2.0 是一个构建用户界面的框架 ...

  3. Vue.js-----轻量高效的MVVM框架(二、Vue.js的简单入门)

    1.hello vue.js! (1)引入vue.js <script type="text/javascript" src="js/vue.js"> ...

  4. [译]基于Vue.js的10个最佳UI框架,用于构建移动应用程序

    原文查看10 Best Vue.js based UI Frameworks for Building Mobile Apps 如果您期待使用Vue.js构建移动应用程序,那么您可以选择许多可用的UI ...

  5. Electron、Node.js、JavaScript、JQuery、Vue.js、Angular.js,layui,bootstrap

    转载:https://blog.csdn.net/meplusplus/article/details/79033786 layui :是基于jquery库的封装开发. bootstrap:同样基于 ...

  6. RAP、Mock.js、Vue.js、Webpack

    最近做项目使用的是RAP1的接口,但是昨天开始,RAP1 出现了问题,接口都不能用了. 所以补充一下Mock.js的用法,以便在这种突发的情况时候时自己通过Mock的方式来处理接口. npm init ...

  7. vue实现多语言国际化(vue-i18n),结合element ui、vue-router、echarts以及joint等。

    老板说我们的项目要和国际接轨,于是乎,加上了多语言(vue-i18n).项目用到的UI框架是element ui ,后续echarts.joint等全都得加上多语言. 一.言归正传,i18n在vue项 ...

  8. MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js、Vue.js 概念摘录

    注:文章内容都是摘录性文字,自己阅读的一些笔记,方便日后查看. MVC MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是 ...

  9. vue.js基础知识篇(5):过渡、Method和Vue实例方法

    第8章:过渡 1.CSS过渡 2.JavaScript过渡 3.渐进过渡 第9章:method Vue.js的事件一般通过v-on指令配置在HTML中,虽然也可以在js的代码中使用原生的addEven ...

随机推荐

  1. SpringBoot入门篇--关于properties和yml两种配置文件的一些事情

    我们在使用SpringBoot这个框架的时候都一定使用或者说是见到过application.properties或者是application.yml,经不住有人就会问这俩文件到底是什么情况,其实说白了 ...

  2. 基于form表单 写登陆注册

    urls urlpatterns = [ url(r'^admin/', admin.site.urls), # 登录界面url(r'^login/$', views.login,name='logi ...

  3. Dubbo基本原理机制

      分布式服务框架: –高性能和透明化的RPC远程服务调用方案 –SOA服务治理方案 -Apache MINA 框架基于Reactor模型通信框架,基于tcp长连接 Dubbo缺省协议采用单一长连接和 ...

  4. 编程语言分类,安装python解释器,变量

    1.编程语言分类 机器语言:直接使用二进制指令去编写程序,直接操作硬件 优点:执行效率高 缺点:开发效率低 汇编语言:用英文标签取代二进制指令去编写程序,直接进操作硬件 优点:开发效率高于机器语言 缺 ...

  5. 前端-toggleClass(效果切换,如果存在移除,如果不存在展示)

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  6. JEECG 上传插件升级-代码生成器

    前言: 现有的uploadify上传是基于swf的,随着H5的普及,flash即将退出历史舞台,JEECG本着与时俱进的原则,将全面升级JEECG系统中的上传功能,采用新式上传插件plupload,此 ...

  7. oracle查看被锁的表和解锁

    --以下几个为相关表SELECT * FROM v$lock;SELECT * FROM v$sqlarea;SELECT * FROM v$session;SELECT * FROM v$proce ...

  8. Unity网格合并_材质合并

    [转]Unity网格合并_材质合并 原帖请戳:Unity网格合并_材质合并 写在前面: 从优化角度,Mesh需要合并. 从换装的角度(这里指的是换形状.换组成部件的换装,而不是挂点型的换装),都需要网 ...

  9. ansible自动化运维详细教程及playbook详解

    前言 当下有许多的运维自动化工具( 配置管理 ),例如:Ansible.SaltStack.Puppet.Fabric 等. Ansible 一种集成 IT 系统的配置管理.应用部署.执行特定任务的开 ...

  10. JAVA中的配置文件XML

    一:概念 1.XML  Extensible markup Language 可拓展标记语言 2.功能:存储数据(配置文件,在网络中传输数据) 3.html和xml的区别 3.1xml标记全是自定义的 ...