前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Electron + Vue跨平台桌面应用开发实战教程(二)

Electron + Vue跨平台桌面应用开发实战教程(二)

作者头像
Javanx
发布2020-08-19 15:43:53
2.9K0
发布2020-08-19 15:43:53
举报
文章被收录于专栏:web秀

1 Electron升级

2020年5月19号,Electron更新了最新的 9.0.0 版本,带来了诸多改进,具体的我就不在此赘述了,大家可以看一下官方介绍:github.com/electron/el…

好了,我们现在就把上节课初始化好的项目升级到Electron9.0.0,只要简单升级

1、命令行直接执行重新安装yarn add electron即可升级到最新版本Electron

2 项目介绍

估计大家看到这里都已经忍不住了:你BB了那么久,你到底是要搞啥子项目呀…… 咳咳,我的锅我的锅,一开始就应该介绍一下先的了,拖到了现在……这实战教程其实并不是什么高难度的项目,就是仿有道云笔记,没错又是仿某某某的套路。。当然,鉴于时间的问题,我应该不会全仿下来,只挑选 Markdown 的文件编写部分。在此,我有个小小的建议:「不要为了仿而仿,而是为了如何在一个项目中把你所学会的知识技能点糅合在一起,融会贯通举一反三,这才是我们的最终目的」

3 工欲善其事必先利其器

在开始正式写代码之前,有必要先安利一下前端最好的编辑器之一Visual Studio Code,当然,这是个仁者见仁智者见智的问题,最适合你的才是最好的!如果你选择不使用这个编辑器,那么你可以直接跳过这一小节了。 必装插件ESLintPrettier - Code formatter,推荐一下我常用的代码风格和eslint设置,在项目根目录下分别新建三个文件.editorconfig.eslintrc.js.prettierrc.js,如下图所示:

「下面是代码展示,此处仅展示当前项目使用的eslint与代码风格样式,你可以自行选择是否使用。」

代码语言:javascript
复制
# 这是 .editorconfig 文件内容[*.{js,jsx,ts,tsx,vue}]
indent_style = space
indent_size = 2
end_of_line = lf
trim_trailing_whitespace = true
insert_final_newline = true
max_line_length = 120
代码语言:javascript
复制
// 这是 .eslintrc.js 文件内容
module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: ['plugin:vue/essential', '@vue/airbnb'],
  parserOptions: {
    parser: 'babel-eslint'
  },
  rules: {
    'no-console': 0,
    'no-debugger': 0,
    semi: ['error', 'never'], // 禁用 分号
    'no-multiple-empty-lines': ['error'], // 代码空行 数量
    'linebreak-style': [0, 'error', 'windows'], // 使用windows的换行
    'comma-dangle': [2, 'never'], //  对象数组最后一个不带逗号
    'no-trailing-spaces': 0, // 禁用 校验代码末尾带空格
    'import/no-dynamic-require': 0, // 禁用 动态require
    'import/no-unresolved': 0,
    'no-param-reassign': 0, // 声明为函数参数的变量可能会引起误解
    'max-len': ['error', 120], // 单行代码最大长度
    'guard-for-in': 0, // 禁用 禁用for in 循环
    'no-shadow': 0, // 禁用  禁止页面内相容参数名
    'object-shorthand': 0, // 禁用 禁止对象内使用带引号字符串
    'no-restricted-syntax': 0,
    'no-plusplus': 0, // 禁用 ++
    'consistent-return': 0, // 关闭箭头函数必须要return
    'no-return-assign': 0, // return 语句中不能有赋值表达式
    'global-require': 0, // 关闭禁止使用requrie
    'prefer-promise-reject-errors': 0, // 这条规则旨在确保承诺只被Error对象拒绝。
    'import/extensions': 'off', // 禁用文件名详细文件类型后缀
    'import/no-extraneous-dependencies': ['error', { devDependencies: true }],
    'arrow-parens': ['error', 'as-needed'], // 箭头函数参数括号,可选 always:(默认)在所有情况下都需要参数;as-needed:当只有一个参数时允许省略参数
    'no-undef': 0, // 关闭显式声明全局变量的要求
    'class-methods-use-this': 0,
    'no-underscore-dangle': ['error', { allow: ['_id'] }], // 允许指定的标识符具有悬挂下划线
    camelcase: 0, // 关闭使用骆驼拼写法
    'no-global-assign': 0, // 允许修改只读全局变量,
    'space-before-function-paren': [
      'error',
      {
        anonymous: 'never',
        named: 'never',
        asyncArrow: 'always'
      }
    ],
    // 对象解构不需要换行
    'object-curly-newline': [
      'error',
      {
        ObjectPattern: {
          multiline: true
        }
      }
    ],
    'no-unused-expressions': ['error', { allowShortCircuit: true, allowTernary: true }] // 允许在表达式中使用三元运算符,类似于短路评估
  }
}
代码语言:javascript
复制
// 这是 .prettierrc.js 文件内容
module.exports = {
  semi: false, // 去掉分号
  singleQuote: true, // 使用单引号
  printWidth: 120, // 单行代码最大长度
  trailingComma: 'none' // 去掉结尾逗号(对象,数组等)
}

搞定!现在我们可以愉快的撸码了……

4 左侧面板开发

有道云笔记截图

可以看到,左侧面板就是一个文件列表,我们这里不仅需要做出图片中的列表,还要在列表顶部添加搜索栏,便于我们方便快捷搜索列表笔记。当前,还需要有新增笔记和导入笔记的功能,先看一下我们这一节的成品图:

4.1 整体布局

我们先删除项目中的多余页面与组件: vue-electron-notes/src/components/HelloWorld.vue vue-electron-notes/src/views/About.vue 删减后的路由文件:

代码语言:javascript
复制
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('@/views/Home')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

删减后的App.vue文件:

代码语言:javascript
复制
<template>
  <div id="app">
    <router-view />
  </div>
</template>

<style lang="less">
* {
  margin: 0;
  padding: 0;
  outline: none;
  box-sizing: border-box;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}
</style>

这里为了方便快捷,就简单粗暴地使用了 css 通配符 *,但是建议大家在实际项目中不要这么干,懂的自然懂……

我们继续修改view目录下的Home.vue文件,使用flex布局设置为最常见的两栏布局(flex的爽我就不多说了,更何况我们这里不需要考虑什么 css 兼容性),左侧面板固定宽度,右侧内容编辑区自适应:

代码语言:javascript
复制
<template>
  <div class="app-wrapper">
    <div class="sidebar-container"></div>
    <div class="main-container"></div>
  </div>
</template>

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

<style lang="less" scoped>
.app-wrapper {
  display: flex;
  .sidebar-container {
    width: 300px;
    height: 100vh;
    border-right: 1px solid #eaeefb;
  }
  .main-container {
    flex: 1;
  }
}
</style>

4.2 引入element-ui和fontawesome图标库

在src目录中创建文件夹plugin,我们以后所有引入的外部框架与插件全部都放在这里。我们使用命令行yarn add element-ui安装element-ui,接着在plugin文件中新建文件element-ui.js

代码语言:javascript
复制
/*
 * @Description: 引入 element-ui 框架
 * @Date: 2020-05-21 09:58:49
 * @LastEditTime: 2020-05-21 09:59:20
 */
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI, { size: 'small' })

继续安装fontawesome图标库,先安装所有的图标依赖,后续再按需引入我们所需要的图标。

代码语言:javascript
复制
MacBook-Pro:vue-electron-notes Bill$ yarn add @fortawesome/vue-fontawesome @fortawesome/free-solid-svg-icons @fortawesome/fontawesome-svg-core @fortawesome/free-brands-svg-icons @fortawesome/free-regular-svg-icons

接着在plugin文件中新建文件fortawesome.js,里面的faMarkdown、faUserSecret就是我们按需引入的图标,后续如果我们需要新的图标就在这里新增就完事了:

代码语言:javascript
复制
/*
 * @Description: fortawesome 图标库
 * @Date: 2020-05-21 09:55:29
 * @LastEditTime: 2020-05-21 10:06:46
 */
import Vue from 'vue'
import { library } from '@fortawesome/fontawesome-svg-core'
import { faUserSecret } from '@fortawesome/free-solid-svg-icons'
import { faMarkdown } from '@fortawesome/free-brands-svg-icons'
// import { faUserSecret } from '@fortawesome/free-regular-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

library.add(faUserSecret, faMarkdown)

Vue.component('font-awesome-icon', FontAwesomeIcon)

搞完上面两个还没完呢,最后我们需要在main.js文件中引入:

代码语言:javascript
复制
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import '@/plugin/element-ui'
import '@/plugin/fortawesome'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

至此,我们就已经完成了element-uifortawesome的引入了,可以愉快的在项目内使用咯,不信你试试看?

4.2 FileSearch 搜索组件

在components组件目录新增FileSearch组件,这个组件主要由一个输入框和下拉菜单组成,这两个我们都可以直接使用 element 的组件,需要注意的是,我们这里使用到了Vue v2.4中新增的attrs及listeners属性。

❝ attrs:包含了父作用域中不被认为 (且不预期为) props 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 props 时,这里会包含所有父作用域的绑定 (class 和 style 除外),并且可以通过 v-bind=”$attrs” 传入内部组件——在创建更高层次的组件时非常有用。 ❞ ❝ listeners:包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on=”$listeners” 传入内部组件——在创建更高层次的组件时非常有用。 ❞

在我们编写 vue 高阶组件中,这两个属性简直就是神器,简直不要太爽!!!

FileSearch组件调用时直接使用v-model绑定需要搜索的内容,新建文件与导入文件则通过$emit调用自定义事件,这些都是属于vue基础知识,在这里就不多说了。 看一下我们已经完成好的FileSearch组件源码:

代码语言:javascript
复制
<!--
 * @Description: 左侧文件搜索组件
 * @Date: 2020-05-20 16:08:49
 * @LastEditTime: 2020-05-21 10:36:49
 -->
<template>
  <div class="search-container">
    <el-input placeholder="请输入内容" v-bind="$attrs" v-on="$listeners">
      <el-button slot="append" icon="el-icon-search" />
    </el-input>
    <el-dropdown>
      <el-button type="primary" icon="el-icon-circle-plus-outline" circle />
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item @click="createFile()">新建笔记</el-dropdown-item>
        <el-dropdown-item divided @click="importFile()">导入文件</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<script>
export default {
  name: 'FileSearch',
  methods: {
    // 新建笔记
    createFile() {
      this.$emit('create')
    },
    // 导入文件
    importFile() {
      this.$emit('import')
    }
  }
}
</script>

<style lang="less" scoped>
.search-container {
  display: flex;
  align-items: center;
  padding: 12px 10px;
  background: #daecfe;

  .el-dropdown {
    .el-button--small {
      margin-left: 10px;
      padding: 6px;
      font-size: 14px;
      border-radius: 30%;
    }
  }
}
</style>

4.3 FileList 文件列表组件

在components组件目录新增FileList组件,我们这一节主要就是完成这么一个列表,至于后面使用到的右键菜单等等,到我们后续使用到了再说,路要一步步走。 可以看到,我们这个组件props接收一个fileList数组,然后通过v-for直接渲染后搞定了。每一个li都使用flex布局,li包含了我们的文件标题和文件的最后修改时间,不得不说flex真的是布局神器,一直用一直爽!图标当然就使用我们前面所引入的fortawesome图标库了,我们前面具体的图标引入代码为:

代码语言:javascript
复制
import { faMarkdown } from '@fortawesome/free-brands-svg-icons'
library.add(faMarkdown)

接着我们直接在FileList组件中使用fortawesome组件,markdown 图标就已经展示出来了,后面稍微修改样式调节一下间距就能很完美了:

代码语言:javascript
复制
<font-awesome-icon :icon="['fab', 'markdown']" />

如果仅仅到这里就结束了,那么这个组件确实也太没技术含量了吧。 随着我们的文件越来越多,列表的长度会越来越长,那么就必然会出现滚动条,作为一个有追求的程序猿,浏览器原生的滚动条我是肯定无法接受的,简直丑爆了一点也不优雅好不好……为了既可以解决这个问题而又不用自己造轮子,我选用了element-ui的隐藏组件el-scrollbar,看一下官方文档的使用效果:

虽然在官方文档中没有给出这个组件,但是在源码中是有的。所以我们可以直接使用:

代码语言:javascript
复制
<el-scrollbar></el-scrollbar>

看看我们最后完整的组件代码:

代码语言:javascript
复制
<!--
 * @Description: 左侧文件列表组件
 * @Date: 2020-05-20 16:18:34
 * @LastEditTime: 2020-05-21 10:37:18
 -->
<template>
  <el-scrollbar class="file-list" wrap-class="scrollbar-filelist" :noresize="false" tag="ul">
    <li v-for="(item, index) in fileList" :key="index" class="file-item">
      <font-awesome-icon :icon="['fab', 'markdown']" class="item-icon" />
      <p class="item-title">{{ item.title }}</p>
      <p class="item-time">{{ item.time }}</p>
    </li>
  </el-scrollbar>
</template>

<script>
export default {
  name: 'FileList',
  props: {
    fileList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {}
  }
}
</script>

<style lang="less" scoped>
.file-list {
  user-select: none;
  .file-item {
    display: flex;
    align-items: center;
    height: 55px;
    border-bottom: 1px solid #eaeefb;

    .item-icon {
      margin-left: 20px;
      margin-right: 12px;
    }

    .item-title {
      flex: 1;
      margin-right: 5px;
      font-size: 14px;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }
    .item-time {
      width: 80px;
      font-size: 12px;
    }
  }
}
</style>
<style lang="less">
.scrollbar-filelist {
  height: calc(100vh - 56px);
  overflow-x: hidden !important;
}
.el-scrollbar__bar {
  opacity: 1;

  &.is-vertical {
    right: 0px;
    width: 5px;
    .el-scrollbar__thumb {
      background-color: rgba(144, 147, 153, 0.5);
    }
  }
}
</style>

4.4 组件引入

上面已经完成了左侧面板所需的两个组件,是时候在主页面引入看看最后的效果了,在view目录的中的Home.vue主页文件中编写:

代码语言:javascript
复制
<template>
  <div class="app-wrapper">
    <div class="sidebar-container">
      <file-search v-model="searchTitle" />
      <file-list :fileList="fileList" />
    </div>
    <div class="main-container"></div>
  </div>
</template>

<script>
import FileSearch from '@/components/FileSearch'
import FileList from '@/components/FileList'

export default {
  name: 'Home',
  components: { FileSearch, FileList },
  data() {
    return {
      searchTitle: '',
      fileList: [
        { id: 1, title: '文件名 1', time: '2020-06-21' },
        { id: 2, title: '文件名 2', time: '2020-06-21' },
        { id: 3, title: '文件名 3', time: '2020-06-21' },
        { id: 4, title: '文件名 4', time: '2020-06-21' },
        { id: 5, title: '文件名 5', time: '2020-06-21' },
        { id: 6, title: '文件名 6', time: '2020-06-21' },
        { id: 1, title: '文件名 1', time: '2020-06-21' },
        { id: 2, title: '文件名 2', time: '2020-06-21' },
        { id: 3, title: '文件名 3', time: '2020-06-21' },
        { id: 4, title: '文件名 4', time: '2020-06-21' },
        { id: 5, title: '文件名 5', time: '2020-06-21' },
        { id: 6, title: '文件名 6', time: '2020-06-21' }
      ]
    }
  }
}
</script>

<style lang="less" scoped>
.app-wrapper {
  display: flex;
  .sidebar-container {
    width: 300px;
    height: 100vh;
    border-right: 1px solid #eaeefb;
  }
  .main-container {
    flex: 1;
  }
}
</style>

列出最后的文件树:

代码语言:javascript
复制
├── public
│   ├── favicon.ico
│   └── index.html
├── src
│   ├── assets
│   │   └── logo.png
│   ├── components
│   │   ├── FileList
│   │   │   └── index.vue
│   │   └── FileSearch
│   │       └── index.vue
│   ├── plugin
│   │   ├── element-ui.js
│   │   └── fortawesome.js
│   ├── router
│   │   └── index.js
│   ├── store
│   │   └── index.js
│   ├── views
│   │   └── Home.vue
│   ├── App.vue
│   ├── background.js
│   └── main.js
├── .editorconfig
├── .eslintrc.js
├── .gitignore
├── .prettierrc.js
├── README.md
├── babel.config.js
└── package.json

搞定!这就是我们左侧面板的最后效果图:

项目github地址:https://github.com/mengdebiao/vue-electron-notes

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1 Electron升级
  • 2 项目介绍
  • 3 工欲善其事必先利其器
  • 4 左侧面板开发
    • 4.1 整体布局
      • 4.2 引入element-ui和fontawesome图标库
        • 4.2 FileSearch 搜索组件
          • 4.3 FileList 文件列表组件
            • 4.4 组件引入
            领券
            问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档