@weig_3078/cli-demo 0.1.1 → 0.1.2

package/app1/src/main.ts

@@ -0,0 +1,14 @@
+import './assets/main.css'
+
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+
+import App from './App.vue'
+import router from './router'
+
+const app = createApp(App)
+
+app.use(createPinia())
+app.use(router)
+
+app.mount('#app')

package/app1/src/router/index.ts

@@ -0,0 +1,35 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import HomeView from '../views/HomeView.vue'
+import ChunkView from '../views/ChunkView.vue';
+import RateView from '../views/RateView.vue';
+
+const router = createRouter({
+    history: createWebHistory(import.meta.env.BASE_URL),
+    routes: [
+        {
+            path: '/',
+            name: 'home',
+            component: HomeView
+        },
+        {
+            path: '/rate',
+            name: 'rate',
+            component: RateView
+        },
+        {
+            path: '/chunk',
+            name: 'chunk',
+            component: ChunkView
+        },
+        {
+            path: '/about',
+            name: 'about',
+            // route level code-splitting
+            // this generates a separate chunk (About.[hash].js) for this route
+            // which is lazy-loaded when the route is visited.
+            component: () => import('../views/AboutView.vue')
+        }
+    ]
+});
+
+export default router

package/app1/src/stores/counter.ts

@@ -0,0 +1,12 @@
+import { ref, computed } from 'vue'
+import { defineStore } from 'pinia'
+
+export const useCounterStore = defineStore('counter', () => {
+  const count = ref(0)
+  const doubleCount = computed(() => count.value * 2)
+  function increment() {
+    count.value++
+  }
+
+  return { count, doubleCount, increment }
+})

package/app1/src/views/AboutView.vue

@@ -0,0 +1,92 @@
+<template>
+    <div class="about">
+        <table>
+          <thead>
+            <td><input type="checkbox" @change="checkAll"  />全选</td>
+            <td>ID</td>
+            <td>名字</td>
+            <td>年龄</td>
+          </thead>
+          <tbody>
+            <tr v-for="item in arrs" :key="item.id">
+              <td><input type="checkbox" :checked="checkedList.indexOf(item.id) !== -1 " :value="item.id" /></td>
+              <td>{{ item.id }}</td>
+              <td>{{ item.name }}</td>
+              <td>{{ item.age }}</td>
+            </tr>
+          </tbody>
+        </table>
+    </div>
+</template>
+<script setup lang="ts">
+import { reactive, ref } from 'vue';
+interface IUser {
+  id: number;
+  name: string;
+  checked: boolean;
+  age: number;
+}
+let checkedList = reactive<number[]>([])
+let arrs = reactive<IUser[]>([]);
+// for (let i = 0; i < 3000; i++) {
+//     arrs.push({
+//         id: i,
+//         name: `大伟${i}`,
+//         checked: false,
+//         age: Math.floor(Math.random() * 18)
+//     });
+// }
+
+
+
+let index = 0;
+function sliceTask() {
+  requestAnimationFrame(() => {
+        let target = index + 300;
+        for (; index < target; index++) {
+          arrs.push({
+            id: index,
+            name: `大伟${index}`,
+            checked: false,
+            age: Math.floor(Math.random() * 18)
+        });
+      }
+      if (index < 3000) {
+        sliceTask();
+      }
+  });
+  
+}
+sliceTask();
+
+
+function checkAll() {
+  // for (let i = 0; i < arrs.length; i++) {
+  //   checkedList.push(arrs[i].id);
+  // }
+  let index = 0;
+  function sliceCheck() {
+    requestAnimationFrame(() => {
+      let target = index + 300;
+      for(; index < target; index++) {
+        checkedList.push(arrs[index]?.id);
+      }
+      if (index < arrs.length) {
+        sliceCheck();
+      }
+    })
+  }
+  sliceCheck();
+}
+</script>
+<style>
+@media (min-width: 1024px) {
+    .about {
+        /* min-height: 100vh; */
+        display: flex;
+        align-items: center;
+    }
+}
+</style>
+
+ 

package/app1/src/views/ChunkView.vue

@@ -0,0 +1,45 @@
+<template>
+    <div>
+        <h1>chunk data</h1>
+    </div>
+</template>
+<script setup lang="ts">
+async function loadText() {
+    const url = 'https://dawei-test-110.oss-cn-beijing.aliyuncs.com/test.txt?Expires=1720715989&OSSAccessKeyId=TMP.3KdbmjMMEpcCwJVjgYZUCwSqt36ujP2gF9tRxe68MAWSNFeWTHk5SK7XwMmHQxQUr3soXiK3T3N19j2FBXhd7YTHgXrfAR&Signature=UUO9FBM7tXZOUjw2GL3Hn24zKlI%3D&response-content-type=text%2Fplain%3Bcharset%3Dutf-8%3B';
+    const res = await fetch(url);
+    const reader = res?.body?.getReader();
+    // const { value, done } = await reader.read();
+
+
+    // 新建一个文本解码器
+    const decoder = new TextDecoder();
+    // 使用 decoder.decode 将读取的切片数据传入进去，就会得到文本数据
+    // const text = decoder.decode(value);
+    // 打印一下 text，看看是否转化文本数据
+    // console.log("text >>> ", text);
+
+    // console.log(value, done);
+
+
+    // 为方便测试，我们声明一个变量，代表第几次读取 text 的值
+    let num = 0;
+  // for 无限定条件永远循环
+    for (;;) {
+    // 每一次循环都读取一次数据
+    const { value, done } = await reader!.read();
+    // 如果完成了直接退出
+    if (done) {
+        break;
+    }
+    // 为完成读取文本
+    const text = decoder.decode(value);
+    // 输出 text
+    console.log(`${num++} text >>> `, text);
+
+    // const text = await res.text();
+    // console.log(text);
+}
+}
+loadText();
+
+</script>

package/app1/src/views/HomeView.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import Watermark from '../components/Watermark.vue';
+</script>
+<template>
+  <div>
+    <Watermark text="大伟">
+        <div class="content">
+          文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容
+          文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容
+        </div>
+    </Watermark>
+  </div>
+</template>

package/app1/src/views/RateView.vue

@@ -0,0 +1,24 @@
+<template>
+    <div class="rate">
+        <Rate :value="5" />
+        <Rate :value="4" />
+        <Rate :value="3" />
+        <Rate1 :value="2" theme="blue" />
+        <Rate2 :value="score" theme="red" @update-rate="update" />
+    </div>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+import Rate from '../components/Rate.vue';
+import Rate1 from '../components/Rate1.vue';
+import Rate2 from '../components/Rate2.vue';
+let score = ref(2);
+const update = (value: number) => {
+    score.value = value;
+}
+</script>
+<style scoped>
+    .rate {
+        margin: 0 auto;
+    }
+</style>

package/app1/test/a.js

@@ -0,0 +1,16 @@
+var a = 1;
+var b = 'dawei';
+const c = true;
+
+// 基本类型和引用类型的声明和赋值
+// 内存模型  调用栈，堆
+
+// 例如
+var test = 1;
+
+var newtest = test;
+
+test = test + 1;
+
+// 内存是一块
+// 性能优化是一块？

package/app1/tsconfig.app.json

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

package/app1/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    },
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.vitest.json"
+    }
+  ],
+  "compilerOptions": {
+    "module": "NodeNext"
+  }
+}

package/app1/tsconfig.node.json

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

package/app1/tsconfig.vitest.json

@@ -0,0 +1,11 @@
+{
+  "extends": "./tsconfig.app.json",
+  "exclude": [],
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.vitest.tsbuildinfo",
+
+    "lib": [],
+    "types": ["node", "jsdom"]
+  }
+}

package/app1/vite.config.ts

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

package/app1/vitest.config.ts

@@ -0,0 +1,14 @@
+import { fileURLToPath } from 'node:url'
+import { mergeConfig, defineConfig, configDefaults } from 'vitest/config'
+import viteConfig from './vite.config'
+
+export default mergeConfig(
+  viteConfig,
+  defineConfig({
+    test: {
+      environment: 'jsdom',
+      exclude: [...configDefaults.exclude, 'e2e/**'],
+      root: fileURLToPath(new URL('./', import.meta.url))
+    }
+  })
+)

package/app1/z/346/226/207/346/241/243//345/255/246/344/271/240/347/274/226/347/250/213/346/234/254/350/264/250.md

@@ -0,0 +1,129 @@
+学习前端 框架
+最重要的是不要把重心放到 html css js  vue react 上
+如果说
+
+你觉得学框架 就是学他的各种api的使用
+那太简单了
+直接看他的官方api就完事了
+
+ 
+你会发现你把官方的api看完了，或者类似的视频课程手把手带你写代码，你实现了一遍
+ 
+ 让你自己独立去做其他的功能，你还是自己做不出来
+ 
+
+ 
+
+所以我讲课也是一样， 视频教程，不可能把所有的功能都讲完，
+
+这个是讲不完的， 也是学不完的
+
+
+更重要的是 让你体验到
+一个程序是怎么开发出来的，
+也就是说要让你触碰到写代码编程的 的本质
+
+什么是编程，代码
+ 本质到底是啥
+
+编程的本质其实就是交流 
+
+是人和计算机之间的交流的过程
+
+提升编程能力，编码水平，
+其实
+就是提升与计算机之间的 交流沟通能力
+
+交流沟通 思维就是 编码 思维
+
+而沟通结果的好坏
+不在乎你迟早用的多华丽
+字眼有多生僻
+句子有多长多复杂
+
+你看那些框架的源码
+每一行都平平无奇
+
+但是把这些单个的代码组合起来，就能实现一个很牛的功能，或者框架，或者库
+ 
+提升自己的技术水平，编码思维，
+并没想象的那么复杂
+
+你只需要知道关键点是什么
+是你要深刻的理解对方是吧
+
+学前端你要理解浏览器语言框架
+
+你理解的越深刻
+沟通的效果就会越好
+沟通的成本就会越低
+而不在乎你 学了多少语法规则
+不是说这些东西不重要
+但他们绝对不是最关键的
+
+如果你不能充分的理解对方
+你学再多的词汇也组织不起来
+还是不知道该怎么去表达
+
+这就是为什么我们的课程
+特别强调原理的原因
+你只有懂了浏览器是如何来看待你的
+代码的框架是如何来运作的
+
+你才能真正的消除
+跟他们之间的沟通障碍
+
+我们杜英呢
+是专门做前端就业和再次体系的机构
+我们培养过数万的学员
+在此呢
+借这个机会宣传一下我们的产品
+我们的整个课程是袁老师主讲的
+也就是我本人
+
+内容的深度广度
+授课能力
+技术水平都在这摆着了
+
+你自行判断
+无论你是0基础到就业
+还是在职提薪
+
+袁老师都能够帮到你
+至少能够省下你几年的功夫
+还能够确保你高薪就业
+
+我培养的学员里边
+最高的是在美国
+年薪18万
+换算成人民币的话就是100多万
+
+但这个是个例哈
+在我们这学的比较优秀的话
+基本上是在30万到50万之间
+中等一点的话基本上就是二三十万就
+
+这么个情况呃
+我不太清楚你具体是什么情况啊
+但是给你提升个10万20万的年薪
+不是什么复杂的问题
+
+你说句嚣张的话
+在咱们it这个行业里边
+但凡是出了名的企业
+一定有我们陆一的学员
+
+如果没有
+
+那一定是这家企业还不够出名
+而且呢我们本身的课程呢
+并不贵其实买不买无所谓的
+你可以多来了解了解
+
+跟着袁老师学
+你可以说半只脚已经踏入了一线大厂
+就在我们这个行业里面
+知识就是你的核心竞争力
+我们这有你需要的一切
+欢迎随时来找我们
+