Эхлэл Бүгдийг харах Тусламж
Нэвтрэх
lovecoding
/
Web1020
10
0
Салаа 0
Файлууд Асуудлууд 0 Хуулах хүсэлтүүд 0 Мэдлэгийн сан
Эх сурвалжийг харах

vue3

e 1 сар өмнө
parent
12145f29e0
commit
51a34a55cf
20 өөрчлөгдсөн 425 нэмэгдсэн , 10 устгасан
Өөрчлөлтийг ялгаж харах Өөрчлөлтийн статистик харах
  1. 30 0
      13.Vue3/my-Pinia/.gitignore
  2. 33 0
      13.Vue3/my-Pinia/README.md
  3. 1 0
      13.Vue3/my-Pinia/env.d.ts
  4. 13 0
      13.Vue3/my-Pinia/index.html
  5. 28 0
      13.Vue3/my-Pinia/package.json
  6. BIN
      13.Vue3/my-Pinia/public/favicon.ico
  7. 14 0
      13.Vue3/my-Pinia/src/App.vue
  8. 86 0
      13.Vue3/my-Pinia/src/assets/base.css
  9. 1 0
      13.Vue3/my-Pinia/src/assets/logo.svg
  10. 35 0
      13.Vue3/my-Pinia/src/assets/main.css
  11. 48 0
      13.Vue3/my-Pinia/src/components/Count.vue
  12. 7 0
      13.Vue3/my-Pinia/src/main.ts
  13. 30 0
      13.Vue3/my-Pinia/src/store/count.ts
  14. 12 0
      13.Vue3/my-Pinia/tsconfig.app.json
  15. 11 0
      13.Vue3/my-Pinia/tsconfig.json
  16. 19 0
      13.Vue3/my-Pinia/tsconfig.node.json
  17. 18 0
      13.Vue3/my-Pinia/vite.config.ts
  18. 19 5
      13.Vue3/my-Router/src/App.vue
  19. 19 4
      13.Vue3/my-Router/src/router/index.ts
  20. 1 1
      13.Vue3/my-Router/src/views/Part1.vue

+ 30 - 0
13.Vue3/my-Pinia/.gitignore
Файл харах 

@@ -0,0 +1,30 @@
 
+# Logs
 
+logs
 
+*.log
 
+npm-debug.log*
 
+yarn-debug.log*
 
+yarn-error.log*
 
+pnpm-debug.log*
 
+lerna-debug.log*
 
+
 
+node_modules
 
+.DS_Store
 
+dist
 
+dist-ssr
 
+coverage
 
+*.local
 
+
 
+/cypress/videos/
 
+/cypress/screenshots/
 
+
 
+# Editor directories and files
 
+.vscode/*
 
+!.vscode/extensions.json
 
+.idea
 
+*.suo
 
+*.ntvs*
 
+*.njsproj
 
+*.sln
 
+*.sw?
 
+
 
+*.tsbuildinfo

+ 33 - 0
13.Vue3/my-Pinia/README.md
Файл харах 

@@ -0,0 +1,33 @@
 
+# my-Pinia
 
+
 
+This template should help get you started developing with Vue 3 in Vite.
 
+
 
+## Recommended IDE Setup
 
+
 
+[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
 
+
 
+## Type Support for `.vue` Imports in TS
 
+
 
+TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types.
 
+
 
+## Customize configuration
 
+
 
+See [Vite Configuration Reference](https://vite.dev/config/).
 
+
 
+## Project Setup
 
+
 
+```sh
 
+npm install
 
+```
 
+
 
+### Compile and Hot-Reload for Development
 
+
 
+```sh
 
+npm run dev
 
+```
 
+
 
+### Type-Check, Compile and Minify for Production
 
+
 
+```sh
 
+npm run build
 
+```

+ 1 - 0
13.Vue3/my-Pinia/env.d.ts
Файл харах 

@@ -0,0 +1 @@
 
+/// <reference types="vite/client" />

+ 13 - 0
13.Vue3/my-Pinia/index.html
Файл харах 

@@ -0,0 +1,13 @@
 
+<!DOCTYPE html>
 
+<html lang="">
 
+  <head>
 
+    <meta charset="UTF-8">
 
+    <link rel="icon" href="/favicon.ico">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Vite App</title>
 
+  </head>
 
+  <body>
 
+    <div id="app"></div>
 
+    <script type="module" src="/src/main.ts"></script>
 
+  </body>
 
+</html>

+ 28 - 0
13.Vue3/my-Pinia/package.json
Файл харах 

@@ -0,0 +1,28 @@
 
+{
 
+  "name": "my-pinia",
 
+  "version": "0.0.0",
 
+  "private": true,
 
+  "type": "module",
 
+  "scripts": {
 
+    "dev": "vite",
 
+    "build": "run-p type-check \"build-only {@}\" --",
 
+    "preview": "vite preview",
 
+    "build-only": "vite build",
 
+    "type-check": "vue-tsc --build"
 
+  },
 
+  "dependencies": {
 
+    "pinia": "^3.0.1",
 
+    "vue": "^3.5.13"
 
+  },
 
+  "devDependencies": {
 
+    "@tsconfig/node22": "^22.0.0",
 
+    "@types/node": "^22.13.9",
 
+    "@vitejs/plugin-vue": "^5.2.1",
 
+    "@vue/tsconfig": "^0.7.0",
 
+    "npm-run-all2": "^7.0.2",
 
+    "typescript": "~5.8.0",
 
+    "vite": "^6.2.1",
 
+    "vite-plugin-vue-devtools": "^7.7.2",
 
+    "vue-tsc": "^2.2.8"
 
+  }
 
+}

BIN
13.Vue3/my-Pinia/public/favicon.ico
Файл харах


+ 14 - 0
13.Vue3/my-Pinia/src/App.vue
Файл харах 

@@ -0,0 +1,14 @@
 
+<template>
 
+  <div>
 
+    <Count/>
 
+  </div>
 
+</template>
 
+
 
+<script setup>
 
+import Count from './components/Count.vue'
 
+import { ref, reactive} from 'vue'
 
+
 
+</script>
 
+<style lang='scss' scoped>
 
+
 
+</style>

+ 86 - 0
13.Vue3/my-Pinia/src/assets/base.css
Файл харах 

@@ -0,0 +1,86 @@
 
+/* color palette from <https://github.com/vuejs/theme> */
 
+:root {
 
+  --vt-c-white: #ffffff;
 
+  --vt-c-white-soft: #f8f8f8;
 
+  --vt-c-white-mute: #f2f2f2;
 
+
 
+  --vt-c-black: #181818;
 
+  --vt-c-black-soft: #222222;
 
+  --vt-c-black-mute: #282828;
 
+
 
+  --vt-c-indigo: #2c3e50;
 
+
 
+  --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
 
+  --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
 
+  --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
 
+  --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
 
+
 
+  --vt-c-text-light-1: var(--vt-c-indigo);
 
+  --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
 
+  --vt-c-text-dark-1: var(--vt-c-white);
 
+  --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
 
+}
 
+
 
+/* semantic color variables for this project */
 
+:root {
 
+  --color-background: var(--vt-c-white);
 
+  --color-background-soft: var(--vt-c-white-soft);
 
+  --color-background-mute: var(--vt-c-white-mute);
 
+
 
+  --color-border: var(--vt-c-divider-light-2);
 
+  --color-border-hover: var(--vt-c-divider-light-1);
 
+
 
+  --color-heading: var(--vt-c-text-light-1);
 
+  --color-text: var(--vt-c-text-light-1);
 
+
 
+  --section-gap: 160px;
 
+}
 
+
 
+@media (prefers-color-scheme: dark) {
 
+  :root {
 
+    --color-background: var(--vt-c-black);
 
+    --color-background-soft: var(--vt-c-black-soft);
 
+    --color-background-mute: var(--vt-c-black-mute);
 
+
 
+    --color-border: var(--vt-c-divider-dark-2);
 
+    --color-border-hover: var(--vt-c-divider-dark-1);
 
+
 
+    --color-heading: var(--vt-c-text-dark-1);
 
+    --color-text: var(--vt-c-text-dark-2);
 
+  }
 
+}
 
+
 
+*,
 
+*::before,
 
+*::after {
 
+  box-sizing: border-box;
 
+  margin: 0;
 
+  font-weight: normal;
 
+}
 
+
 
+body {
 
+  min-height: 100vh;
 
+  color: var(--color-text);
 
+  background: var(--color-background);
 
+  transition:
 
+    color 0.5s,
 
+    background-color 0.5s;
 
+  line-height: 1.6;
 
+  font-family:
 
+    Inter,
 
+    -apple-system,
 
+    BlinkMacSystemFont,
 
+    'Segoe UI',
 
+    Roboto,
 
+    Oxygen,
 
+    Ubuntu,
 
+    Cantarell,
 
+    'Fira Sans',
 
+    'Droid Sans',
 
+    'Helvetica Neue',
 
+    sans-serif;
 
+  font-size: 15px;
 
+  text-rendering: optimizeLegibility;
 
+  -webkit-font-smoothing: antialiased;
 
+  -moz-osx-font-smoothing: grayscale;
 
+}

+ 1 - 0
13.Vue3/my-Pinia/src/assets/logo.svg
Файл харах 

@@ -0,0 +1 @@
 
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>

+ 35 - 0
13.Vue3/my-Pinia/src/assets/main.css
Файл харах 

@@ -0,0 +1,35 @@
 
+@import './base.css';
 
+
 
+#app {
 
+  max-width: 1280px;
 
+  margin: 0 auto;
 
+  padding: 2rem;
 
+  font-weight: normal;
 
+}
 
+
 
+a,
 
+.green {
 
+  text-decoration: none;
 
+  color: hsla(160, 100%, 37%, 1);
 
+  transition: 0.4s;
 
+  padding: 3px;
 
+}
 
+
 
+@media (hover: hover) {
 
+  a:hover {
 
+    background-color: hsla(160, 100%, 37%, 0.2);
 
+  }
 
+}
 
+
 
+@media (min-width: 1024px) {
 
+  body {
 
+    display: flex;
 
+    place-items: center;
 
+  }
 
+
 
+  #app {
 
+    display: grid;
 
+    grid-template-columns: 1fr 1fr;
 
+    padding: 0 2rem;
 
+  }
 
+}

+ 48 - 0
13.Vue3/my-Pinia/src/components/Count.vue
Файл харах 

@@ -0,0 +1,48 @@
 
+<template>
 
+  <div>
 
+    <h1>这是一个计数器</h1>
 
+    <p>初始值：{{ count }},变大：{{ bigCount }}</p>
 
+    <p>打招呼：{{ hi }},大写：{{ newHello }}</p>
 
+    <select v-model.number="num">
 
+        <option value="1">1</option>
 
+        <option value="2">2</option>
 
+        <option value="3">3</option>
 
+        <option value="4">4</option>
 
+        <option value="5">5</option>
 
+    </select>
 
+    <button @click="handleAdd">增加</button>
 
+    <button @click="handleReduce">减少</button>
 
+  </div>
 
+</template>
 
+
 
+<script setup>
 
+import {useCountStore} from '@/store/count.ts';
 
+import { ref, reactive,computed} from 'vue'
 
+import {storeToRefs} from 'pinia'
 
+const counter = useCountStore();
 
+console.log(counter)
 
+let num = ref("1")
 
+let {count,hi,bigCount,newHi,newHello} = storeToRefs(counter);
 
+
 
+// let bigCount = computed(()=>{
 
+//     console.log(count.value)
 
+//    return count.value*10
 
+// })
 
+function handleAdd() {
 
+    console.log(num.value)
 
+    // 1.方法
 
+    counter.addCount(num.value)
 
+    // 2.数据
 
+    // counter.count+=num.value;
 
+    // 3.调用
 
+    // counter.$patch({
 
+    //     count:counter.count + num.value
 
+    // })
 
+}
 
+function handleReduce() {
 
+    
+}
 
+</script>
 
+<style lang='scss' scoped>
 
+
 
+</style>

+ 7 - 0
13.Vue3/my-Pinia/src/main.ts
Файл харах 

@@ -0,0 +1,7 @@
 
+import { createApp } from 'vue'
 
+import {createPinia} from 'pinia'
 
+import App from './App.vue'
 
+const app = createApp(App)
 
+const pinia = createPinia()
 
+app.use(pinia)
 
+app.mount("#app")

+ 30 - 0
13.Vue3/my-Pinia/src/store/count.ts
Файл харах 

@@ -0,0 +1,30 @@
 
+import {defineStore} from 'pinia';
 
+
 
+export const useCountStore = defineStore('count1',{
 
+    // 1.数据存储 类似于data
 
+    state() {
 
+        return {
 
+            count: 666,
 
+            hi:'hello'
 
+        }
 
+    },
 
+    // 2.计算属性 类似于computed
 
+    getters:{
 
+        bigCount:(state)=>state.count * 10,
 
+        // newHi:(state)=>{
 
+        //    return state.hi.toUpperCase();
 
+        // }
 
+        newHello() {
 
+          return  this.hi.toUpperCase()
 
+        }
 
+    },
 
+    // 3.方法 类似于methods
 
+    actions:{
 
+        addCount(val:number) {
 
+            this.count += val;
 
+        },
 
+        reduceCount() {
 
+
 
+        }
 
+    }
 
+})

+ 12 - 0
13.Vue3/my-Pinia/tsconfig.app.json
Файл харах 

@@ -0,0 +1,12 @@
 
+{
 
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
 
+  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
 
+  "exclude": ["src/**/__tests__/*"],
 
+  "compilerOptions": {
 
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
 
+
 
+    "paths": {
 
+      "@/*": ["./src/*"]
 
+    }
 
+  }
 
+}

+ 11 - 0
13.Vue3/my-Pinia/tsconfig.json
Файл харах 

@@ -0,0 +1,11 @@
 
+{
 
+  "files": [],
 
+  "references": [
 
+    {
 
+      "path": "./tsconfig.node.json"
 
+    },
 
+    {
 
+      "path": "./tsconfig.app.json"
 
+    }
 
+  ]
 
+}

+ 19 - 0
13.Vue3/my-Pinia/tsconfig.node.json
Файл харах 

@@ -0,0 +1,19 @@
 
+{
 
+  "extends": "@tsconfig/node22/tsconfig.json",
 
+  "include": [
 
+    "vite.config.*",
 
+    "vitest.config.*",
 
+    "cypress.config.*",
 
+    "nightwatch.conf.*",
 
+    "playwright.config.*",
 
+    "eslint.config.*"
 
+  ],
 
+  "compilerOptions": {
 
+    "noEmit": true,
 
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
 
+
 
+    "module": "ESNext",
 
+    "moduleResolution": "Bundler",
 
+    "types": ["node"]
 
+  }
 
+}

+ 18 - 0
13.Vue3/my-Pinia/vite.config.ts
Файл харах 

@@ -0,0 +1,18 @@
 
+import { fileURLToPath, URL } from 'node:url'
 
+
 
+import { defineConfig } from 'vite'
 
+import vue from '@vitejs/plugin-vue'
 
+import vueDevTools from 'vite-plugin-vue-devtools'
 
+
 
+// https://vite.dev/config/
 
+export default defineConfig({
 
+  plugins: [
 
+    vue(),
 
+    vueDevTools(),
 
+  ],
 
+  resolve: {
 
+    alias: {
 
+      '@': fileURLToPath(new URL('./src', import.meta.url))
 
+    },
 
+  },
 
+})

+ 19 - 5
13.Vue3/my-Router/src/App.vue
Файл харах 

@@ -8,14 +8,28 @@
 
       <RouterLink replace active-class="active" :to="{
 
         name:'wode'
 
       }">我的</RouterLink> -->
 
-      <RouterLink replace active-class="active" to="/part1">demo1</RouterLink>
 
-      <RouterLink replace active-class="active" to="/part2">demo2</RouterLink>
 
+      <RouterLink replace active-class="active" to="/Part1">demo1</RouterLink>
 
+      <RouterLink replace active-class="active" to="/Part2">demo2</RouterLink>
 
     </div>
 
     <!-- 占位符 -->
 
     <div class="main">
 
-      <KeepAlive>
 
-        <RouterView></RouterView>
 
-      </KeepAlive>
 
+        <!-- <RouterView></RouterView> -->
 
+      <!-- <RouterView v-slot="{Component}">
 
+        <component :is="Component"></component>
 
+      </RouterView> -->
 
+      
+      <RouterView v-slot="{ Component, route }">
 
+        <KeepAlive>
 
+          <component :is="Component"  v-if="route.meta.keepAlive"></component>
 
+        </KeepAlive>
 
+        <component :is="Component"  v-if="!route.meta.keepAlive"></component>
 
+      </RouterView>
 
+      <!-- <router-view v-slot="{ Component,route }">
 
+      <keep-alive>
 
+        <component :is="Component"  v-if="route.meta.keepAlive" />
 
+      </keep-alive>
 
+      <component :is="Component"  />
 
+    </router-view> -->
 
     </div>
 
   </div>
 
 </template>

+ 19 - 4
13.Vue3/my-Router/src/router/index.ts
Файл харах 

@@ -9,7 +9,7 @@ import {
 
 import Home from "../views/Home.vue";
 
 import List from "../views/List.vue";
 
 import My from "../views/My.vue";
 
-import Part1 from "../views/part1.vue";
 
+import Part1 from "../views/Part1.vue";
 
 import Part2 from "../views/Part2.vue";
 
 // import Detail from "";
 
 // 1.创建
 
@@ -28,6 +28,9 @@ const router = createRouter({
 
       path: "/home",
 
       // 这个页面用的元素
 
       component: Home,
 
+      meta:{
 
+        keepAlive: false,
 
+      }
 
     },
 
     {
 
       path: "/list",
 
@@ -37,6 +40,9 @@ const router = createRouter({
 
           // 二级或多级 子路由 没有/
 
           // path: "detail/:id/:user",
 
           path: "/detail",
 
+          meta:{
 
+            keepAlive: false,
 
+          },
 
           component: () => import("../views/Detail.vue"),
 
           name: "xiangqing",
 
           // 1.全部接收
 
@@ -57,16 +63,25 @@ const router = createRouter({
 
       path: "/my",
 
       component: My,
 
       name: "wode",
 
+      meta:{
 
+        keepAlive: false,
 
+      }
 
     },
 
     {
 
-      path: "/part1",
 
-      component: Part1,
 
+      path: "/Part1",
 
       name: "Part1",
 
+      component: Part1,
 
+      meta:{
 
+        keepAlive: false,
 
+      }
 
     },
 
     {
 
-      path: "/part2",
 
+      path: "/Part2", 
       component: Part2,
 
       name: "Part2",
 
+      meta:{
 
+        keepAlive: true,
 
+      }
 
     },
 
   ],
 
 });

+ 1 - 1
13.Vue3/my-Router/src/views/Part1.vue
Файл харах 

@@ -17,7 +17,7 @@
 
   </div>
 
 </template>
 
 
-<script setup lang="ts">
 
+<script setup lang="ts" name='Part1'>
 
 import Demo1 from "./components/Demo1.vue";
 
 import Demo2 from './components/Demo2.vue';
 
 import { ref, reactive, onMounted, onUnmounted } from "vue";