添加组件

README.md

@@ -1,3 +1,13 @@
+# 介绍
+```shell
+# 启动前端项目
+npm run dev
+# 打开 package.json ，script 处运行 debug， start 启动 electron
+```
+
+https://www.bilibili.com/video/BV1FP4115739/?p=38&spm_id_from=333.880.my_history.page.click&vd_source=9523ee9c79e57125a2bd5167e297dd9d
+
+
 # Vue 3 + Vite
 
 This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.

src/main.js

@@ -1,5 +1,6 @@
 import { createApp } from 'vue'
-import './style.css'
 import App from './App.vue'
 
+import '@/assets/common.css'
+
 createApp(App).mount('#app')

src/style.css

@@ -1,89 +0,0 @@
-:root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-text-size-adjust: 100%;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-.card {
-  padding: 2em;
-}
-
-#app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}

src/views/Home.vue

@@ -11,5 +11,8 @@
 </template>
 
 <style lang="css">
-    
+    main{
+        border-color: brown;
+        background-color: bisque;
+    }
 </style>

src/views/SearchBar.vue

@@ -5,10 +5,44 @@
 
 <template>
     <div class="search-container">
-        search
+        <div class="button">+</div>
+        <div class="input">
+            <input type="text" placeholder="请输入关键字...">
+        </div>
     </div>
 </template>
 
 <style lang="css">
-    
+div.search-container{
+    height: 60px;
+    background-color: #d3d3d3;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.button{
+    width: 40px;
+    height: 40px;
+    background-color: #1e90ff;
+    padding-left: 0;
+    border-radius: 5px;
+    font-size: 30px;
+    font-weight: bold;
+    color: #fff;
+    text-align: center;
+    cursor: default;
+}
+.input{
+    flex: 1;
+    height: 36px;
+    border: solid 1px #ccc;
+    border-radius: 5px;
+}
+.input input{
+    height: 100%;
+    width: 100%;
+    border: solid 1px #ccc;
+    border-radius: 5px;
+    padding: 0 10px;
+}
 </style>

vite.config.js

@@ -1,7 +1,14 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import path from 'path'
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [vue()],
+  // vue 引入 src 目录
+  resolve:{
+    alias:{
+      '@': path.resolve(__dirname, './src')
+    }
+  }
 })