Electron使用指南 - [10] 构建 Vue 项目基本结构

准备 Header, Main, 和 Modal 三个组件。

1、reset.css 样式

编写 reset.css 样式：

/* /src/assets/styles/reset.css */

html, body {
  height: 100%;
}

body {
  font: caption;
  margin: 0;
  display: flex;
  flex-flow: column;
}

2、App 根组件

编辑 /renderer/src/App.vue：

<template>
  <div>
    <Header></Header>
    <Main></Main>
    <Modal></Modal>
  </div>
</template>

<script>
import Header from './components/Header'
import Main from './components/Main'
import Modal from './components/Modal'

export default {
  components: {
    Header,
    Main,
    Modal
  }
}
</script>

<style lang='stylus' scoped>
div
  height 100%
  position relative
</style>

3、Header 组件

在 components 文件夹下创建 Header.vue 组件： /src/components/Header.vue

<template>