electron-vue-创建项目

electron

官网： Electron 是一个使用 JavaScript, HTML 和 CSS 等 Web 技术创建原生程序的框架，它负责比较难搞的部分，你只需把精力放在你的应用的核心上即可。
我们可以在electron中使用vue/angular/react等目前市面上最流行的js框架。最近在学习vue，那么这里就选择使用了vue作为开发应用的框架。
官网:https://electronjs.org

electron-vue

electron-vue 是一个结合 vue-cli 与 electron 的项目,避免了我们再自己去手动搭建cli,当然了,在学习阶段,最好还是能够自己去尝试着去搭建cli,毕竟学到了才是自己的。
官网：https://simulatedgreg.gitbooks.io/electron-vue/content/cn/

初始化

这里默认认为已经安装好了node和yarn,就不再说明如何安装,注意需要把node的数据源切换为淘宝镜像

npm config set registry http://registry.npm.taobao.org/

初始化项目:

# 安装 vue-cli 和 脚手架样板代码
npm install -g vue-cli

# 初始化项目模板,初始化项目会根据网络情况时间有所不同,需耐心等待
vue init simulatedgreg/electron-vue vue-markdown

? Application Name vue-markdown
? Application Id com.gemini.markdown
? Application Version 0.0.1
? Project description An electron-vue project
? Use Sass / Scss? Yes
? Select which Vue plugins to install axios, vue-electron, vue-router, vuex, vuex-electron
? Use linting with ESLint? Yes
? Which ESLint config would you like to use? Standard
? Set up unit testing with Karma + Mocha? Yes
? Set up end-to-end testing with Spectron + Mocha? Yes
? What build tool would you like to use? packager
? author 李群 <[email protected]>

   vue-cli · Generated "vue-markdown".
warning Failed to append commit SHA on README.md

在这里项目初始化完成后，使用了scss/sass,并且默认安装了axios, vue-electron, vue-router, vuex等我们在项目中常用的vue全家桶。

# 安装依赖并运行你的程序
cd vue-markdown
yarn # 或者 npm install
yarn run dev # 或者 npm run dev

项目结构

其中我们开发界面及逻辑的vue相关代码就在renderer目录。

结语

至此我们就初始化成功了electron-vue项目。后面我们再去一起学习其他相关的知识