回顾vue3 组合式api

src/App.vue

@@ -10,5 +10,4 @@
 }
 </style>
 <script setup lang="ts">
-
 </script>

src/components/HelloWorld.vue

@@ -1,52 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-
-defineProps<{ msg: string }>()
-
-const count = ref(0)
-</script>
-
-<template>
-  <h1>{{ msg }}</h1>
-
-  <p>
-    Recommended IDE setup:
-    <a href="https://code.visualstudio.com/" target="_blank">VSCode</a>
-    +
-    <a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>
-  </p>
-
-  <p>See <code>README.md</code> for more information.</p>
-
-  <p>
-    <a href="https://vitejs.dev/guide/features.html" target="_blank">
-      Vite Docs
-    </a>
-    |
-    <a href="https://v3.vuejs.org/" target="_blank">Vue 3 Docs</a>
-  </p>
-
-  <button type="button" @click="count++">count is: {{ count }}</button>
-  <p>
-    Edit
-    <code>components/HelloWorld.vue</code> to test hot module replacement.
-  </p>
-</template>
-
-<style scoped>
-a {
-  color: #42b983;
-}
-
-label {
-  margin: 0 0.5em;
-  font-weight: bold;
-}
-
-code {
-  background-color: #eee;
-  padding: 2px 4px;
-  border-radius: 4px;
-  color: #304455;
-}
-</style>

src/components/home/topnav.vue

@@ -0,0 +1,21 @@
+<template>
+  <div class="topnav">
+    <div class="left">dsadsa</div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "topnav"
+}
+</script>
+
+<style scoped lang="scss">
+.topnav{
+  .left{
+    width: 370px;
+    height: 88px;
+    background: rgba(212, 223, 230, 0.66);;
+  }
+}
+</style>

src/page/home.vue

@@ -1,15 +1,36 @@
 <template>
-  dksjdksa
+<div class="top">
+  <topnav></topnav>
+  {{aaa}}
+</div>
+
 </template>
 
 <script>
 import {defineComponent} from 'vue'
+import topnav from "@/components/home/topnav.vue"
 export default defineComponent({
  name: 'home',
  props: {},
+  components:{
+   topnav:topnav
+  },
+  setup(props) {
+    // console.log(props.title)
+    return{
+      aaa:1
+    }
+  }
 })
+
 </script>
 
-<style>
+<style lang="scss">
+.top{
+  width: 100vw;
+  height: 100vh;
+  background:url("../static/img/topbg.jpg")  no-repeat;
+  background-size: cover;
 
+}
 </style>

src/route/index.ts

@@ -15,8 +15,8 @@ for(let i in zujian){
     component:zujian[i]
   })
 }
-console.log(routes1)
+// console.log(routes1)
-console.log(zujian, typeof zujian)
+// console.log(zujian, typeof zujian)
 // const routes = [
 //   // {
 //   //   path: "/home",

vite.config.ts

@@ -1,7 +1,17 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
+const path = require('path')
+// @ts-ignore
+const resolve = dir => {
+  return path.join(__dirname, dir);
+};
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue()]
+  plugins: [vue()],
+  resolve: {
+    alias: {
+      '@': resolve('src')
+    }
+  }
 })

yarn-error.log

@@ -1,25 +1,30 @@
 Arguments: 
-  C:\Program Files\nodejs\node.exe C:\Users\Administrator\AppData\Roaming\npm\node_modules\yarn\bin\yarn.js add vue-router@4.0.0-beta
+  D:\Program Files\nodejs\node.exe C:\Users\37436\AppData\Roaming\npm\node_modules\yarn\bin\yarn.js add @/components
 
 PATH: 
-  C:\Program Files (x86)\Microsoft SQL Server\90\Tools\binn\;C:\Program ;C:\Program Files (x86)\Git\cmd;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0\;C:\WINDOWS\System32\OpenSSH\;C:\Program Files\nodejs\;C:\Users\Administrator\AppData\Local\Programs\Python\Python37\Scripts\;C:\Users\Administrator\AppData\Local\Programs\Python\Python37\;C:\Users\Administrator\.dotnet\tools;C:\Users\Administrator\AppData\Local\Programs\Microsoft VS Code\bin;C:\Users\Administrator\AppData\Local\Microsoft\WindowsApps;C:\Users\Administrator\AppData\Roaming\npm
+  C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0\;C:\Windows\System32\OpenSSH\;D:\Program Files\Git\cmd;D:\Program Files\nodejs\;D:\mongodb\bin;C:\Users\37436\AppData\Local\Microsoft\WindowsApps;;D:\Program Files\JetBrains\WebStorm 2021.1.2\bin;;C:\Users\37436\AppData\Roaming\npm;D:\Users\37436\AppData\Local\Programs\Microsoft VS Code\bin
 
 Yarn version: 
-  1.22.11
+  1.22.10
 
 Node version: 
-  14.17.5
+  14.17.0
 
 Platform: 
   win32 x64
 
 Trace: 
-  SyntaxError: C:\web\myblog\mynewblog\package.json: Unexpected token } in JSON at position 343
+  Error: https://registry.npm.taobao.org/@%2fcomponents: Not found
-      at JSON.parse (<anonymous>)
+      at Request.params.callback [as _callback] (C:\Users\37436\AppData\Roaming\npm\node_modules\yarn\lib\cli.js:66988:18)
-      at C:\Users\Administrator\AppData\Roaming\npm\node_modules\yarn\lib\cli.js:1625:59
+      at Request.self.callback (C:\Users\37436\AppData\Roaming\npm\node_modules\yarn\lib\cli.js:140662:22)
-      at Generator.next (<anonymous>)
+      at Request.emit (events.js:376:20)
-      at step (C:\Users\Administrator\AppData\Roaming\npm\node_modules\yarn\lib\cli.js:310:30)
+      at Request.<anonymous> (C:\Users\37436\AppData\Roaming\npm\node_modules\yarn\lib\cli.js:141634:10)
-      at C:\Users\Administrator\AppData\Roaming\npm\node_modules\yarn\lib\cli.js:321:13
+      at Request.emit (events.js:376:20)
+      at IncomingMessage.<anonymous> (C:\Users\37436\AppData\Roaming\npm\node_modules\yarn\lib\cli.js:141556:12)
+      at Object.onceWrapper (events.js:482:28)
+      at IncomingMessage.emit (events.js:388:22)
+      at endReadableNT (internal/streams/readable.js:1336:12)
+      at processTicksAndRejections (internal/process/task_queues.js:82:21)
 
 npm manifest: 
   {
@@ -37,6 +42,7 @@ npm manifest:
       "style-loader": "^3.2.1",
       "vfonts": "^0.1.0",
       "vue": "^3.2.6",
+      "vue-router": "^4.0.11"
     },
     "devDependencies": {
       "@vitejs/plugin-vue": "^1.6.0",
@@ -328,6 +334,11 @@ Lockfile:
       "@vue/compiler-dom" "3.2.6"
       "@vue/shared" "3.2.6"
   
+  "@vue/devtools-api@^6.0.0-beta.14":
+    version "6.0.0-beta.15"
+    resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.0.0-beta.15.tgz#ad7cb384e062f165bcf9c83732125bffbc2ad83d"
+    integrity sha512-quBx4Jjpexo6KDiNUGFr/zF/2A4srKM9S9v2uHgMXSU//hjgq1eGzqkIFql8T9gfX5ZaVOUzYBP3jIdIR3PKIA==
+  
   "@vue/reactivity@3.2.6", "@vue/reactivity@^3.2.6":
     version "3.2.6"
     resolved "https://registry.nlark.com/@vue/reactivity/download/@vue/reactivity-3.2.6.tgz?cache=0&sync_timestamp=1629824253192&other_urls=https%3A%2F%2Fregistry.nlark.com%2F%40vue%2Freactivity%2Fdownload%2F%40vue%2Freactivity-3.2.6.tgz#b8993fa6f48545178e588e25a9c9431a1c1b7d50"
@@ -2636,10 +2647,12 @@ Lockfile:
       vscode-pug-languageservice "^0.27.8"
       vscode-typescript-languageservice "^0.27.8"
   
-  vue-router@4.0.0-alpha.4:
+  vue-router@^4.0.11:
-    version "4.0.0-alpha.4"
+    version "4.0.11"
-    resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-4.0.0-alpha.4.tgz#17569b948fa0e6eb344208471ec7dea78b7db402"
+    resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-4.0.11.tgz#cd649a0941c635281763a20965b599643ddc68ed"
-    integrity sha512-IRcf+im38Vja/7FMdiLhUjVRw+tzi/Larij6OYD2nn+0musntrGj/ZSAhO9ITCQgaeluKQJxUxyMvrNslds12w==
+    integrity sha512-sha6I8fx9HWtvTrFZfxZkiQQBpqSeT+UCwauYjkdOQYRvwsGwimlQQE2ayqUwuuXGzquFpCPoXzYKWlzL4OuXg==
+    dependencies:
+      "@vue/devtools-api" "^6.0.0-beta.14"
   
   vue-tsc@^0.2.2:
     version "0.2.3"