Fri May 26 08:36:00 UTC 2023 inscode

package.json

@@ -7,7 +7,9 @@
     "preview": "vite preview --port 4173"
   },
   "dependencies": {
+    "@vueuse/core": "^10.1.2",
     "guess": "^1.0.2",
+    "pinia": "^2.0.0-rc.10",
     "vue": "^3.2.37"
   },
   "devDependencies": {

src/App.vue

-<script setup>
-import HelloWorld from './components/HelloWorld.vue'
-import TheWelcome from './components/TheWelcome.vue'
-</script>
+
 
 <template>
   <header>
+    22232323
     <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
 
     <div class="wrapper">
@@ -16,7 +14,29 @@ import TheWelcome from './components/TheWelcome.vue'
     <TheWelcome />
   </main>
 </template>
-
+<script setup>
+import HelloWorld from './components/HelloWorld.vue'
+import TheWelcome from './components/TheWelcome.vue'
+import { ref, onMounted } from 'vue'
+onMounted(() => {
+  let arr = [4, 2, 8, 1, 5];
+  console.log(bubbleSort(arr)); // [1, 2, 4, 5, 8]
+  function bubbleSort(arr) {
+    var len = arr.length;
+    for (var i = 0; i < len - 1; i++) {
+      for (var j = 0; j < len - 1 - i; j++) {
+        if (arr[j] > arr[j + 1]) {
+          var temp = arr[j];
+          arr[j] = arr[j + 1];
+          arr[j + 1] = temp;
+        }
+      }
+    }
+    return arr;
+  }
+  bubbleSort()
+})
+</script>
 <style scoped>
 header {
   line-height: 1.5;

src/components/HelloWorld.vue

-<script setup>
+
+
+<template>
+  <div class="greetings">
+    222
+     Count:{{  count}}
+     <button @click="increment">Increment</button>
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { useStore } from 'pinia'
 defineProps({
   msg: {
     type: String,
     required: true
   }
 })
-</script>
 
-<template>
-  <div class="greetings">
-    <h1 class="green">{{ msg }}</h1>
-    <h3>
-      You’ve successfully created a project with
-      <a target="_blank" href="https://vitejs.dev/">Vite</a> +
-      <a target="_blank" href="https://vuejs.org/">Vue 3</a>.
-    </h3>
-  </div>
-</template>
+export default defineComponent({
+  setup(){
+    const store = useStore();
+    const count = store.count;
+    const increment = () =>{
+      store.count++;
+    };
+    return {
+      count,
+      increment
+    }
+  }
+})
 
+</script>
 <style scoped>
 h1 {
   font-weight: 500;

src/components/TheWelcome.vue

 <script setup>
+import { ref, onMounted } from 'vue'
 import WelcomeItem from './WelcomeItem.vue'
 import DocumentationIcon from './icons/IconDocumentation.vue'
 import ToolingIcon from './icons/IconTooling.vue'
 import EcosystemIcon from './icons/IconEcosystem.vue'
 import CommunityIcon from './icons/IconCommunity.vue'
 import SupportIcon from './icons/IconSupport.vue'
+
+
+
+onMounted(() => {
+  let arr = [4, 2, 8, 1, 5];
+  console.log(bubbleSort(arr)); // [1, 2, 4, 5, 8]
+  function bubbleSort(arr) {
+    var len = arr.length;
+    for (var i = 0; i < len - 1; i++) {
+      for (var j = 0; j < len - 1 - i; j++) {
+        if (arr[j] > arr[j + 1]) {
+          var temp = arr[j];
+          arr[j] = arr[j + 1];
+          arr[j + 1] = temp;
+        }
+      }
+    }
+    return arr;
+  }
+  bubbleSort()
+})
+
+
 </script>
 
 <template>
@@ -31,9 +55,7 @@ import SupportIcon from './icons/IconSupport.vue'
     <a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>. If you need to test
     your components and web pages, check out
     <a href="https://www.cypress.io/" target="_blank">Cypress</a> and
-    <a href="https://on.cypress.io/component" target="_blank"
-      >Cypress Component Testing</a
-    >.
+    <a href="https://on.cypress.io/component" target="_blank">Cypress Component Testing</a>.
 
     <br />
 

src/index.ts

+import { createPinia } from "pinia";
+const pinia = createPinia();
+
+export default pinia
\ No newline at end of file

src/main.js

 import { createApp } from 'vue'
 import App from './App.vue'
-
+import pinia from './index'
 import './assets/main.css'
 
-createApp(App).mount('#app')
+const app = createApp(App);
+app.use(pinia)
+app.mount('#app')
+
+