小小千想和您聊一聊

当前位置: 首页> 技术分享> Electron使用指南之构建 Vue 项目基本结构

Electron使用指南之构建 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>

  <header>

    <button id="show-modal">+</button>

    <input type="text" id="search" placeholder="Search">

  </header>

</template>

 

<script>

export default {

 

}

</script>

 

<style lang='stylus' scoped>

button {

  background: dodgerblue;

  color: white;

  border-radius: 5px;

  border: none;

  font-size: 20px;

  outline: none;

}

 

input {

  font-size: 20px;

  border-radius: 5px;

  border: 1px solid silver;

  padding: 0 10px;

}

 

input::placeholder {

  color: lightgray;

}

 

header {

  background: lightgray;

  display: flex;

  padding: 10px;

  font-weight: bold;

  border-bottom: 1px solid silver;

  box-shadow: 0px 10px 10px rgba(0,0,0,0.1);

}

 

#show-modal {

  padding: 0px 12px 5px;

  margin-right: 10px;

  font-size: 30px;

}

 

#search {

  flex-grow: 1;

}

</style>

4、Main 组件

components 文件夹下创建 Main.vue 组件: /src/components/Main.vue

<template>

  <main>

    <p id="no-items">No Items</p>

    <div id="items"></div>

  </main>

</template>

 

<script>

export default {

 

}

</script>

 

<style lang='stylus' scoped>

#items {

  flex-grow: 1;

}

 

#no-items {

  font-weight: bold;

  color: silver;

  text-align: center;

  width: 100%;

  position: absolute;

  top: 100px;

  z-index: -1;

}

</style>

5、modal 组件

components 文件夹下创建 Modal.vue 组件: /src/components/Modal.vue

<template>

  <div id="modal">

    <input type="text" id="url" placeholder="Enter URL">

    <button id="add-item">Add Item</button>

    <button id="close-modal">Cancel</button>

  </div>

</template>

 

<script>

export default {

 

}

</script>

 

<style lang='stylus' scoped>

#modal {

  position: absolute;

  top 0;

  left 0;

  width: 100%;

  height: 100%;

  background: rgba(0,0,0,0.85);

  display: flex;

  align-items: center;

  align-content: center;

  flex-wrap: wrap;

  display: none;

}

 

#url {

  flex-grow: 1;

  width: 100%;

  margin: 0 25px 15px;

  padding: 10px;

}

 

#modal button {

  padding: 10px;

}

 

#close-modal {

  background: white;

  color: black;

  margin-left: 15px;

}

 

#add-item {

  margin-left: 25px;

}

 

.read-item {

  display: flex;

  align-items: center;

  align-content: center;

  border-bottom: lightgray 2px solid;

  background: #FAFAFA;

  padding: 10px;

}

 

.read-item img {

  width: 20%;

  margin-right: 25px;

}

</style>

上一篇:Electron使用指南之IPC 通信

下一篇:Electron使用指南之添加一个新的信息

QQ技术交流群

HTML5/Web前端锋迷群
712051083

加入群聊

用户登录

手机号:

密码:

图形验证码:

点击切换

用户注册

手机号:

登录密码:

图形验证码:

点击切换

短信验证码:

获取验证码

忘记密码

1安全验证

2重置密码

手机号:

图形验证码:

短信验证码:

获取验证码

忘记密码

1安全验证

2重置密码

新密码:

确认新密码:

获取课程

添加小千老师微信,获取课程信息

如何获取课程?

一、需拥有此本教材

如没有,可点击下方入口购买当当购买入口京东购买入口

二、添加小千老师,发送拥有凭证,解锁课程资源

1.购买该教材的订单信息
2.拥有的实体书信息等

更换手机号

新手机号:

图形验证码:

短信验证码:

获取验证码