Electron+vue+element ui+vscode+git桌面程序-小白篇 超详细

一.说明

背景：有需求，要求做一个简单的桌面程序。

调研后决定采用：web方式写页面，然后打包为桌面程序

选技术为：Nodejs+Electron+vue+element ui+vscode+git

二.环境

Node.js

应用基于js，所以需要先安装Node.js。（建议LTS）

下载地址：https://nodejs.org/zh-cn/download/ 

下载完成后，傻瓜式一键安装到底

安装完毕，验证下版本：

node -v

Vue+Electron

Electron介绍说明参考官网：http://www.electronjs.org/docs

使用npm，由于使用国外地址，比较缓慢，推荐加速地址：淘宝镜像

安装cnpm

通过npm安装cnpm：win+r 运行cmd 执行即可

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装完成后，如上图表示正常安装了cnpm，cnpm命令可用，后续便可以使用cnpm来加速操作安装其他组件了。

全局安装vue

cnpm install -g vue-cli

校验版本，以下标识正常安装成功：

vue --version

 

使用 electron-vue 建项目以及初始化

electron-vue 是 vue-cli 和 electron 结合的项目，比单独使用 vue 构建起的 electron 项目要方便，以下：新建初始化一个名为my-app 的vue+electron应用

vue init simulatedgreg/electron-vue my-app

安装过程说明：

Application Name：项目名称
Application Id： 项目标识Id（如com.google）
Application Version ：版本号
Project description：项目描述
Use Sass / Scss ：Yes(就是css的s版)
Select which Vue plugins to install：要安装的插件，默认是全选的，按空格键取消选择，前面尖括号里有*号表示选中状态
Use linting with ESLint? ：语法检查插件
Which ESLint config would you like to use?：如果使用上一步的ESLint，你希望用哪一种检查配置
Set up unit testing with Karma + Mocha?：集成测试模块，小公司直接不安装就行，一般不用
What build tool would you like to use?：打包方式，一般选第一种（builder）

安装后的目录结构：

然后cd进入到项目根目录

cd my-app

 

安装程序

cnpm install

如果安装出现以下权限错误问题，请参考我上一篇文章

 

运行启动

npm run dev

启动如果异常如下：

临时处理，把16-20行删掉或：

然后重新启动正常：

 

安装element-ui

参数：-d:开发环境；-s:生产环境

npm install element-ui -d

安装完毕：

可以发现配置文件多了依赖：

或者查看安装目录：

 

安装git

刚想起需安装一个git，这个步骤与顺序无关。

下载exe文件安装（淘宝镜像）：https://npm.taobao.org/mirrors/git-for-windows/

然后傻瓜式安装即可

版本校验：

三、测试编码：vue+element-ui

导入element-ui

在main.js导入elements(注意导入顺序可能导致报错，尽量放在前面)

import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'


Vue.use(Element)

导入成功后就可以使用element ui库了

修改 App.vue 文件：

<template>
  <div id="app">
  <el-button type="danger">测试按钮</el-button>
    <router-view></router-view>
  </div>
</template>

<script>
  export default {
    name: 'intercom'
  }
</script>

添加后重新启动：

 

 

四、开发工具（vscode）

下载开发工具vscode： https://code.visualstudio.com/

安装后打开 上面的项目文件夹：

目录结构：

安装资源库（git插件）：

五、项目提交到码云：

提交代码的时候，没有配置git，配置下git

如下图，打开设置，搜git.path

路径：   **/**/**  或者   **\\**\\**

待续...

 

码云新建仓库：

建完复制地址：

 

本地新建一文件夹，右键：Git Bash Here

输入克隆命令：克隆到本地，输入码云账号密码：

打开vscode，就可以提交相关代码或者直接使用git窗口提交：

添加注释提交：

提交成功：