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 ...
随机推荐
- SpringBoot入门篇--关于properties和yml两种配置文件的一些事情
我们在使用SpringBoot这个框架的时候都一定使用或者说是见到过application.properties或者是application.yml,经不住有人就会问这俩文件到底是什么情况,其实说白了 ...
- 基于form表单 写登陆注册
urls urlpatterns = [ url(r'^admin/', admin.site.urls), # 登录界面url(r'^login/$', views.login,name='logi ...
- Dubbo基本原理机制
分布式服务框架: –高性能和透明化的RPC远程服务调用方案 –SOA服务治理方案 -Apache MINA 框架基于Reactor模型通信框架,基于tcp长连接 Dubbo缺省协议采用单一长连接和 ...
- 编程语言分类,安装python解释器,变量
1.编程语言分类 机器语言:直接使用二进制指令去编写程序,直接操作硬件 优点:执行效率高 缺点:开发效率低 汇编语言:用英文标签取代二进制指令去编写程序,直接进操作硬件 优点:开发效率高于机器语言 缺 ...
- 前端-toggleClass(效果切换,如果存在移除,如果不存在展示)
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- JEECG 上传插件升级-代码生成器
前言: 现有的uploadify上传是基于swf的,随着H5的普及,flash即将退出历史舞台,JEECG本着与时俱进的原则,将全面升级JEECG系统中的上传功能,采用新式上传插件plupload,此 ...
- oracle查看被锁的表和解锁
--以下几个为相关表SELECT * FROM v$lock;SELECT * FROM v$sqlarea;SELECT * FROM v$session;SELECT * FROM v$proce ...
- Unity网格合并_材质合并
[转]Unity网格合并_材质合并 原帖请戳:Unity网格合并_材质合并 写在前面: 从优化角度,Mesh需要合并. 从换装的角度(这里指的是换形状.换组成部件的换装,而不是挂点型的换装),都需要网 ...
- ansible自动化运维详细教程及playbook详解
前言 当下有许多的运维自动化工具( 配置管理 ),例如:Ansible.SaltStack.Puppet.Fabric 等. Ansible 一种集成 IT 系统的配置管理.应用部署.执行特定任务的开 ...
- JAVA中的配置文件XML
一:概念 1.XML Extensible markup Language 可拓展标记语言 2.功能:存储数据(配置文件,在网络中传输数据) 3.html和xml的区别 3.1xml标记全是自定义的 ...