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

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. windows下安装Scrapy框架

    一 首先我们通过pycharm安装: 发现不行,会报错. 二 通过命令行再次进行安装: 发现还是会报错: 更新下pip,继续安装,发现还是不行,那怎么办呢? 继续安装Scrapy发下还是不行: 那么我 ...

  2. <记录> HtmlHelper和 强类型页面

    HtmlHelper  路径生成 <!--普通写法--> <a href="/home/index">超链接</a> <!--利用Url类 ...

  3. Python学习笔记---切片 列表 元祖 字典 集合

    列表[1,2,3,2]#[] 元祖(1,2,3,2)#() 字典{1:2,3:2}#{} 集合{1,2,3,2}#{} 1,集合与列表的区别,集合里不能有重复元素 2.字典与集合的区别,都是用花括号表 ...

  4. django 数据库查询的几个知识点

    django查询db过程中遇到的几个问题: 1. 数据库切换,用using products = models.TProductCredit.objects.using(') 2.查询结构集是Quer ...

  5. English-英语日常交流语句

  6. Android Studio 3.1.3正式版的新坑。。。

    Gradle编译时没问题,运行App时候出现: java.util.NoSuchElementException java.lang.RuntimeException: com.android.bui ...

  7. texmaker报错:could not start command 解决

    我当时文件命名加了邮箱,引入特殊字符@,然后就报错了

  8. 客户端验证、tcp协议中多个客户端的同时在线

    一.客户端验证 当在一个局域网内需要验证是否为合法的客户端连接时,我们需要写代码进行验证. Server端 import os import hmac import socket def auth(c ...

  9. 数据库类型空间效率探索(五)- decimal/float/double/varchar

    以下测试为userinfo增加一列,列类型分别为decimal.float.double.varchar.由于innodb不支持optimize,所以每次测试,都会删除表test.userinfo,重 ...

  10. POJ-2253.Frogger.(求每条路径中最大值的最小值,最短路变形)

    做到了这个题,感觉网上的博客是真的水,只有kuangbin大神一句话就点醒了我,所以我写这篇博客是为了让最短路的入门者尽快脱坑...... 本题思路:本题是最短路的变形,要求出最短路中的最大跳跃距离, ...