如何构建 Vue 项目基本结构

待我称王封你为后i 2024-03-27 16:54 11阅读 0赞

### **准备 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>