electron、vue.js、vuex、element-ui、sqlite3
总结一下这两周的入门之路。
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的更多相关文章
- 基于 Laravel、Vue.js开发的全新社交系统----ThinkSNS+
什么是ThinkSNS+ ThinkSNS(简称TS)始于2008年,一款全平台综合性社交系统,为国内外大中小企业和创业者提供社会化软件研发及技术解决方案,目前最新版本为ThinkSNS+.新的产品名 ...
- vue学习(一)、Vue.js简介
Vue.js 五天 汤小洋一. Vue.js简介1. Vue.js是什么Vue.js也称为Vue,读音/vju:/,类似view,错误读音v-u-e 版本:v1.0 v2.0 是一个构建用户界面的框架 ...
- Vue.js-----轻量高效的MVVM框架(二、Vue.js的简单入门)
1.hello vue.js! (1)引入vue.js <script type="text/javascript" src="js/vue.js"> ...
- [译]基于Vue.js的10个最佳UI框架,用于构建移动应用程序
原文查看10 Best Vue.js based UI Frameworks for Building Mobile Apps 如果您期待使用Vue.js构建移动应用程序,那么您可以选择许多可用的UI ...
- Electron、Node.js、JavaScript、JQuery、Vue.js、Angular.js,layui,bootstrap
转载:https://blog.csdn.net/meplusplus/article/details/79033786 layui :是基于jquery库的封装开发. bootstrap:同样基于 ...
- RAP、Mock.js、Vue.js、Webpack
最近做项目使用的是RAP1的接口,但是昨天开始,RAP1 出现了问题,接口都不能用了. 所以补充一下Mock.js的用法,以便在这种突发的情况时候时自己通过Mock的方式来处理接口. npm init ...
- vue实现多语言国际化(vue-i18n),结合element ui、vue-router、echarts以及joint等。
老板说我们的项目要和国际接轨,于是乎,加上了多语言(vue-i18n).项目用到的UI框架是element ui ,后续echarts.joint等全都得加上多语言. 一.言归正传,i18n在vue项 ...
- 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 的目的是 ...
- vue.js基础知识篇(5):过渡、Method和Vue实例方法
第8章:过渡 1.CSS过渡 2.JavaScript过渡 3.渐进过渡 第9章:method Vue.js的事件一般通过v-on指令配置在HTML中,虽然也可以在js的代码中使用原生的addEven ...
随机推荐
- windows下安装Scrapy框架
一 首先我们通过pycharm安装: 发现不行,会报错. 二 通过命令行再次进行安装: 发现还是会报错: 更新下pip,继续安装,发现还是不行,那怎么办呢? 继续安装Scrapy发下还是不行: 那么我 ...
- <记录> HtmlHelper和 强类型页面
HtmlHelper 路径生成 <!--普通写法--> <a href="/home/index">超链接</a> <!--利用Url类 ...
- Python学习笔记---切片 列表 元祖 字典 集合
列表[1,2,3,2]#[] 元祖(1,2,3,2)#() 字典{1:2,3:2}#{} 集合{1,2,3,2}#{} 1,集合与列表的区别,集合里不能有重复元素 2.字典与集合的区别,都是用花括号表 ...
- django 数据库查询的几个知识点
django查询db过程中遇到的几个问题: 1. 数据库切换,用using products = models.TProductCredit.objects.using(') 2.查询结构集是Quer ...
- English-英语日常交流语句
- Android Studio 3.1.3正式版的新坑。。。
Gradle编译时没问题,运行App时候出现: java.util.NoSuchElementException java.lang.RuntimeException: com.android.bui ...
- texmaker报错:could not start command 解决
我当时文件命名加了邮箱,引入特殊字符@,然后就报错了
- 客户端验证、tcp协议中多个客户端的同时在线
一.客户端验证 当在一个局域网内需要验证是否为合法的客户端连接时,我们需要写代码进行验证. Server端 import os import hmac import socket def auth(c ...
- 数据库类型空间效率探索(五)- decimal/float/double/varchar
以下测试为userinfo增加一列,列类型分别为decimal.float.double.varchar.由于innodb不支持optimize,所以每次测试,都会删除表test.userinfo,重 ...
- POJ-2253.Frogger.(求每条路径中最大值的最小值,最短路变形)
做到了这个题,感觉网上的博客是真的水,只有kuangbin大神一句话就点醒了我,所以我写这篇博客是为了让最短路的入门者尽快脱坑...... 本题思路:本题是最短路的变形,要求出最短路中的最大跳跃距离, ...