Acasă Explorează Ajutor
Autentificare
lovecoding
/
W250511
10
0
Bifurcare 0
Fisiere Probleme 0 Trageți solicitările 0 Wiki
Răsfoiți Sursa

vue3

zheng 1 săptămână în urmă
părinte
5cc7d072ee
comite
0d5b278f37
17 a modificat fișierele cu 467 adăugiri și 0 ștergeri
Vizualizare divizată Arată Statisticile Diff
  1. 36 0
      17.Vue3/project/.gitignore
  2. 42 0
      17.Vue3/project/README.md
  3. 1 0
      17.Vue3/project/env.d.ts
  4. 13 0
      17.Vue3/project/index.html
  5. 32 0
      17.Vue3/project/package.json
  6. BIN
      17.Vue3/project/public/favicon.ico
  7. 50 0
      17.Vue3/project/src/App.vue
  8. 86 0
      17.Vue3/project/src/assets/base.css
  9. 1 0
      17.Vue3/project/src/assets/logo.svg
  10. 35 0
      17.Vue3/project/src/assets/main.css
  11. 50 0
      17.Vue3/project/src/components/Demo1.vue
  12. 54 0
      17.Vue3/project/src/components/Demo2.vue
  13. 6 0
      17.Vue3/project/src/main.ts
  14. 12 0
      17.Vue3/project/tsconfig.app.json
  15. 11 0
      17.Vue3/project/tsconfig.json
  16. 19 0
      17.Vue3/project/tsconfig.node.json
  17. 19 0
      17.Vue3/project/vite.config.ts

+ 36 - 0
17.Vue3/project/.gitignore
Vizualizați fișierul 

@@ -0,0 +1,36 @@
 
+# 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
 
+
 
+# Editor directories and files
 
+.vscode/*
 
+!.vscode/extensions.json
 
+.idea
 
+*.suo
 
+*.ntvs*
 
+*.njsproj
 
+*.sln
 
+*.sw?
 
+
 
+*.tsbuildinfo
 
+
 
+.eslintcache
 
+
 
+# Cypress
 
+/cypress/videos/
 
+/cypress/screenshots/
 
+
 
+# Vitest
 
+__screenshots__/

+ 42 - 0
17.Vue3/project/README.md
Vizualizați fișierul 

@@ -0,0 +1,42 @@
 
+# project
 
+
 
+This template should help get you started developing with Vue 3 in Vite.
 
+
 
+## Recommended IDE Setup
 
+
 
+[VS Code](https://code.visualstudio.com/) + [Vue (Official)](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
 
+
 
+## Recommended Browser Setup
 
+
 
+- Chromium-based browsers (Chrome, Edge, Brave, etc.):
 
+  - [Vue.js devtools](https://chromewebstore.google.com/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd) 
+  - [Turn on Custom Object Formatter in Chrome DevTools](http://bit.ly/object-formatters)
 
+- Firefox:
 
+  - [Vue.js devtools](https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/)
 
+  - [Turn on Custom Object Formatter in Firefox DevTools](https://fxdx.dev/firefox-devtools-custom-object-formatters/)
 
+
 
+## 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
17.Vue3/project/env.d.ts
Vizualizați fișierul 

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

+ 13 - 0
17.Vue3/project/index.html
Vizualizați fișierul 

@@ -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>

+ 32 - 0
17.Vue3/project/package.json
Vizualizați fișierul 

@@ -0,0 +1,32 @@
 
+{
 
+  "name": "project",
 
+  "version": "0.0.0",
 
+  "private": true,
 
+  "type": "module",
 
+  "engines": {
 
+    "node": "^20.19.0 || >=22.12.0"
 
+  },
 
+  "scripts": {
 
+    "dev": "vite",
 
+    "build": "run-p type-check \"build-only {@}\" --",
 
+    "preview": "vite preview",
 
+    "build-only": "vite build",
 
+    "type-check": "vue-tsc --build"
 
+  },
 
+  "dependencies": {
 
+    "scss": "^0.2.4",
 
+    "vue": "^3.5.22"
 
+  },
 
+  "devDependencies": {
 
+    "@tsconfig/node22": "^22.0.2",
 
+    "@types/node": "^22.18.11",
 
+    "@vitejs/plugin-vue": "^6.0.1",
 
+    "@vue/tsconfig": "^0.8.1",
 
+    "npm-run-all2": "^8.0.4",
 
+    "typescript": "~5.9.0",
 
+    "vite": "^7.1.11",
 
+    "vite-plugin-vue-devtools": "^8.0.3",
 
+    "vite-plugin-vue-setup-extend": "^0.4.0",
 
+    "vue-tsc": "^3.1.1"
 
+  }
 
+}

BIN
17.Vue3/project/public/favicon.ico
Vizualizați fișierul


+ 50 - 0
17.Vue3/project/src/App.vue
Vizualizați fișierul 

@@ -0,0 +1,50 @@
 
+<!-- <template>
 
+  <div>
 
+    <p>你好</p>
 
+    <h1>{{ msg }}</h1>
 
+    <button @click="changeMsg">修改</button>
 
+  </div>
 
+</template>
 
+
 
+<script lang="ts" >
 
+export default {
 
+  // data() {
 
+  //   return {
 
+  //     msg:"111"
 
+  //   }
 
+  // },
 
+  // methods:{
 
+  //   changeMsg() {
 
+  //     this.msg = '222';
 
+  //   }
 
+  // }
 
+}
 
+</script>
 
+
 
+<style lang="scss" scoped>
 
+</style> -->
 
+
 
+
 
+<template>
 
+  <div>
 
+    <h1>首页</h1>
 
+    <Demo1></Demo1>
 
+    <hr>
 
+    <hr>
 
+    <Demo2></Demo2>
 
+  </div>
 
+</template>
 
+
 
+<script lang="ts" setup>
 
+import Demo1 from './components/Demo1.vue';
 
+import Demo2 from './components/Demo2.vue';
 
+// export default {
 
+//   // components:{
 
+//   //   Demo1
 
+//   // }
 
+// }
 
+
 
+</script>
 
+
 
+<style lang="scss" scoped>
 
+</style>

+ 86 - 0
17.Vue3/project/src/assets/base.css
Vizualizați fișierul 

@@ -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
17.Vue3/project/src/assets/logo.svg
Vizualizați fișierul 

@@ -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
17.Vue3/project/src/assets/main.css
Vizualizați fișierul 

@@ -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;
 
+  }
 
+}

+ 50 - 0
17.Vue3/project/src/components/Demo1.vue
Vizualizați fișierul 

@@ -0,0 +1,50 @@
 
+<template>
 
+  <div>
 
+    <h2>Demo1</h2>
 
+    <p>
 
+      {{ tips }}
 
+    </p>
 
+    <button @click="changeTips">修改</button>
 
+  </div>
 
+</template>
 
+
 
+<script lang="ts" setup name="hi">
 
+
 
+/**
 
+ * setup 不支持this
 
+ * ref 基本数据类型 
+ * 声明字段 自带value
 
+ * 修改需要.value
 
+ */
 
+import {ref} from 'vue';
 
+let tips = ref('今天星期日');
 
+console.log(tips);
 
+function changeTips() {
 
+    // this.tips = 'haha';
 
+    tips.value = '哈哈';
 
+}
 
+</script>
 
+<!-- <script>
 
+export default {
 
+    name:"hi"
 
+}
 
+</script> -->
 
+<!-- <script>
 
+import { ref } from "vue";
 
+export default {
 
+  name:"hello",
 
+  setup() {
 
+    let tips = ref("哈哈");
 
+
 
+    function changeTips() {
 
+      // this.tips = 'haha';
 
+      tips.value = "你好";
 
+    }
 
+    return {
 
+      tips,changeTips
 
+    };
 
+  },
 
+};
 
+</script> -->
 
+<style lang="scss" scoped>
 
+</style>

+ 54 - 0
17.Vue3/project/src/components/Demo2.vue
Vizualizați fișierul 

@@ -0,0 +1,54 @@
 
+<template>
 
+  <div>
 
+    <h2>Demo2</h2>
 
+    <p>我叫{{ obj.name }},今年{{ obj.age }}岁,我有一个{{ obj.car.c1 }}和一个{{ obj.car.c2 }}</p>
 
+    <button @click="changePerson">修改整体</button>
 
+    <button @click="changeName">修改名字</button>
 
+    <button @click="changeCar1">修改第一辆车</button>
 
+    <button @click="changeCar">修改整体车</button>
 
+  </div>
 
+</template>
 
+
 
+<script lang="ts" setup>
 
+import {ref,reactive} from "vue" 
+let obj = reactive({
 
+    name:'小明',
 
+    age:10,
 
+    car:{
 
+        c1:'摩托车',
 
+        c2:"自行车"
 
+    }
 
+})
 
+console.log(obj,'obj')
 
+function changeName() {
 
+    obj.name = '小红';
 
+}
 
+function changePerson() {
 
+    // obj = {
 
+    //     name:'天天',
 
+    //     age: 7
 
+    // }
 
+    // obj.name = '天天';
 
+    // obj.age = 7;
 
+    Object.assign(obj,{
 
+        name:'天天',
 
+        age: 7,
 
+        car:{
 
+            c1:1,
 
+            c2:2
 
+        }
 
+    })
 
+}
 
+function changeCar1() {
 
+    obj.car.c1 = '摩托车1'
 
+}
 
+function changeCar() {
 
+    obj.car = {
 
+        c1:"花花",
 
+        c2:'图图'
 
+    }
 
+}
 
+</script>
 
+
 
+<style lang="scss" scoped>
 
+</style>

+ 6 - 0
17.Vue3/project/src/main.ts
Vizualizați fișierul 

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

+ 12 - 0
17.Vue3/project/tsconfig.app.json
Vizualizați fișierul 

@@ -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
17.Vue3/project/tsconfig.json
Vizualizați fișierul 

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

+ 19 - 0
17.Vue3/project/tsconfig.node.json
Vizualizați fișierul 

@@ -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"]
 
+  }
 
+}

+ 19 - 0
17.Vue3/project/vite.config.ts
Vizualizați fișierul 

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