Electron使用指南——10构建 Vue 项目基本结构
2020-08-31 14:02
826 查看
准备 Header, Main, 和 Modal 三个组件。
1、reset.css 样式
编写 reset.css 样式:
[code]/* /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:
[code]<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
[code]<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
[code]<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
[code]<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>
相关文章推荐
- 项目构建工具 maven构建项目目录结构与mvn命令基本使用
- AndroidStudio使用指南(一)项目结构&基本功能
- 使用maven构建基本的web项目结构
- 使用echarts的vue项目第一天,引用框架构建基本模板(适合没接触过的echarts的新手)
- 使用VUE-CLI构建一个项目基本的配置
- 【23】使用vue-cli脚手架搭建webpack项目基本结构
- 使用Ant编译和构建项目指南
- Android中使用Gradle来构建App项目的入门指南
- 在electron-vue项目中使用element-ui
- Java项目开发环境构建工具 Gradle 使用笔记(简单、基本)
- vue-cli 构建的项目中使用 Less
- 使用vue-cli构建vue项目
- vue&脚手架基本安装 ------- vue-cli 文件夹项目的构建及介绍
- Java项目开发环境构建工具 Gradle 使用笔记(简单、基本)
- windows/mac 使用webpack构建vue项目
- 使用vue-cli构建的项目不检查分号
- webpack+vue 构建项目步骤并且使用sass 安装配置
- 使用electron-vue搭建桌面应用程序项目
- 使用vue-cli快速构建项目
- 使用Electron+Vue构建桌面程序(学习笔记)