完成第8张学习

package.json

@@ -16,6 +16,7 @@
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.2.3",
+    "sass": "^1.69.4",
     "unplugin-auto-import": "^0.16.6",
     "unplugin-vue-components": "^0.25.2",
     "vite": "^4.4.5"

src/App.vue

@@ -1,12 +1,22 @@
 <script setup>
-
+const showMsg = () => {
+  ElMessageBox.alert('您好！！')
+}
 </script>
 
 <template>
   <div id="nav">
-    <router-link to="/">Home</router-link> |
+    <router-link to="/">Home</router-link>
+    |
     <router-link to="/about">About</router-link>
   </div>
+  <el-button type="primary" @click="showMsg">按键</el-button>
+  <br>
+  <hr>
+  <el-icon :size="36" :color="color">
+    <edit></edit>
+  </el-icon>
+  <hr>
   <router-view></router-view>
 </template>
 

src/main.js

@@ -2,5 +2,12 @@ import { createApp } from 'vue'
 import App from './App.vue'
 import router from "./router/index.js";
 import store from "./store/index.js";
+import * as ElIcons from "@element-plus/icons-vue";
 
-createApp(App).use(router).use(store).mount('#app')
+const app = createApp(App);
+
+for (const name in ElIcons){
+    app.component(name, ElIcons[name]);
+}
+
+app.use(router).use(store).mount('#app')

src/views/Home.vue

@@ -1,7 +1,10 @@
 <template>
   这是Home页面
   <hr>
-  count: {{ count }}
+  <div class="wrap">
+    <p>count: {{ count }}</p>
+  </div>
+
 </template>
 
 <script setup>
@@ -13,6 +16,12 @@ const count = computed(() => store.state.count)
 
 </script>
 
-<style scoped>
+<style lang="scss">
-
+.wrap {
+  background: yellow;
+  p {
+    color: blue;
+    font-size: 24px;
+  }
+}
 </style>

vite.config.js

@@ -1,18 +1,19 @@
-import { defineConfig } from 'vite'
+import {defineConfig} from 'vite'
 import vue from '@vitejs/plugin-vue'
 import AutoImport from 'unplugin-auto-import/vite'
 import Components from 'unplugin-vue-components/vite'
-import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
+import {ElementPlusResolver} from "unplugin-vue-components/resolvers";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [
+    plugins: [
-      vue(),
+        vue(),
-      AutoImport({
+        AutoImport({
-        resolvers: [ElementPlusResolver()],
+            // imports: ['vue', 'vue-router', 'vuex', 'vue-i18n'],
-      }),
+            resolvers: [ElementPlusResolver()],
-      Components({
+        }),
-        resolvers: [ElementPlusResolver()]
+        Components({
-      })
+            resolvers: [ElementPlusResolver()]
-  ],
+        })
+    ],
 })

yarn.lock

@@ -378,7 +378,7 @@ braces@^3.0.2, braces@~3.0.2:
   dependencies:
     fill-range "^7.0.1"
 
-chokidar@^3.5.3:
+"chokidar@>=3.0.0 <4.0.0", chokidar@^3.5.3:
   version "3.5.3"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.3.tgz#1cf37c8707b932bd1af1ae22c0432e2acd1903bd"
   integrity sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==
@@ -516,6 +516,11 @@ has@^1.0.3:
   resolved "https://registry.yarnpkg.com/has/-/has-1.0.4.tgz#2eb2860e000011dae4f1406a86fe80e530fb2ec6"
   integrity sha512-qdSAmqLF6209RFj4VVItywPMbm3vWylknmB3nvNiUIs72xAimcM8nVYxYr7ncvZq5qzk9MKIZR8ijqD/1QuYjQ==
 
+immutable@^4.0.0:
+  version "4.3.4"
+  resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.3.4.tgz#2e07b33837b4bb7662f288c244d1ced1ef65a78f"
+  integrity sha512-fsXeu4J4i6WNWSikpI88v/PcVflZz+6kMhUfIwc5SY+poQRPnaf5V7qds6SUyUN3cVxEzuCab7QIoLOQ+DQ1wA==
+
 is-binary-path@~2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09"
@@ -712,12 +717,21 @@ run-parallel@^1.1.9:
   dependencies:
     queue-microtask "^1.2.2"
 
+sass@^1.69.4:
+  version "1.69.4"
+  resolved "https://registry.yarnpkg.com/sass/-/sass-1.69.4.tgz#10c735f55e3ea0b7742c6efa940bce30e07fbca2"
+  integrity sha512-+qEreVhqAy8o++aQfCJwp0sklr2xyEzkm9Pp/Igu9wNPoe7EZEQ8X/MBvvXggI2ql607cxKg/RKOwDj6pp2XDA==
+  dependencies:
+    chokidar ">=3.0.0 <4.0.0"
+    immutable "^4.0.0"
+    source-map-js ">=0.6.2 <2.0.0"
+
 scule@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/scule/-/scule-1.0.0.tgz#895e6f4ba887e78d8b9b4111e23ae84fef82376d"
   integrity sha512-4AsO/FrViE/iDNEPaAQlb77tf0csuq27EsVpy6ett584EcRTp6pTDLoGWVxCD77y5iU5FauOvhsI4o1APwPoSQ==
 
-source-map-js@^1.0.2:
+"source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
   integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==