vue3-learn

npm -v

nvm -v

# 安装16.x.x版本nodejs
nvm install 16
# 切换16.x.x版本
nvm use 16
# 查看切换后的版本号
node -v
# 查看已安装(可切换)的版本
nvm list

npm install --global @vue/cli
# 查看vue帮助, 以确保安装成功
vue --help

# 创建名为vue3-learn骨架项目
vue create vue3-learn
# 脚手架会出现大量菜单供选择, 按照目前主流去选取: ts+less+eslint-standard

# 进入骨架项目
cd vue3-learn
# 为当前项目添加less支持
vue add less

npm run serve

npm run build

<!-- 来自骨架项目生成的.vue -->
<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
  </div>
</template>

<script lang="ts">
import { Options, Vue } from 'vue-class-component'
import HelloWorld from '@/components/HelloWorld.vue' // @ is an alias to /src

@Options({
  components: {
    HelloWorld
  }
})
export default class HomeView extends Vue {}
</script>

<style lang="less">

</style>

// src/router/index.ts
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    component: () => import('../views/AboutView.vue')
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

// default导出
const a = 123;
export default a; 
// import default, as是重新命令另一个变量来接收的意思, 以下两种写法是等效的
import a from 'a.ts';
import { default as a1 } from 'a.ts';
// export { default } from 等同于import了再export
export { default as a2 } from 'a.ts';

// 输出a, b 非default
export const a = 1;
export const b = 2;
// 获得非default的所有组成a3集合, 这里是{a,b}
import * as a3 from 'a.ts';
// 单项获取a
import { a as a4 } from 'a.ts';

/// 原声明类型: 可能是tsc生成的
interface OSS {
  name: string
  pathConfig: {
    [peth: string]: {
      enable: boolean
    }
  }
}
/// PS: OSS是一个TS声明的类型，拥有name和pathConfig两个属性，其中pathConfig是一个键值对对象类型，key的部分代号为path类型为string，value的也是个对象类型
// 此数据结构，大致是表示某些路径对应的文件是否被启用

// 页面调用时可能会，只会对pathConfig进行修改，而不需要总是传递整个OSS对象
// 当需要传递一个pathConfig类型是，ts会要求你必须指定pathConfig是什么类型；
// 如下所示，思考一下，??的部分，我们怎么表示这个类型？
function changePathConfig(path: string, pathConfigValue: ?? ):void {
  ///.....
}

/// 下面我们介绍两种办法：
/// 办法一：要求OSS单独把pathConfig属性新类类型
interface OSSPathConfigValue {
  enable: boolean
}
interface OSS {
  name: string
  pathConfig: {
    [peth: string]: OSSPathConfigValue
  }
}
/// 这样??的部分就是OSSPathConfig
/// 弊端：但是这么做非常困难，首先OSS如果是公用组件，原作者和调用方，很可能不是同一个人；第二作为公用组件，会因为调用方细粒不同度拆解成复用度不多，但非常细的各种属性类型，所有属性都要分别写类型，这是不现实的；


/// 办法二：调用方自己创建符合原属性接收的类型，可以这么做，是因为ts的类型校验只是检查成员的匹配，所以没有同源（必须来自OSS下的定，成为同源，java是同源的）的要求。
interface OSSPathConfigValue {
  enable: boolean
}
function changePathConfig(path: string, pathConfigValue: OSSPathConfigValue ):void {
  ///.....
}

// 定义当前.d.ts中xxx.vue的export输出的类型
declare module 'xxx.vue' {
  // 输出类型
  import type { DefineComponent } from 'vue'
  const component: DefineComponent<{}, {}, any>
  export default component
}

interface aaa {
  a: number;
}
// 当前.d.ts输出的类型
export default aaa;

// 原始dom操作
let name = 'abc';
document.getElementById('[name="show_name"]').value = name;
document.getElementById('[name="name"]').value = name;

// vmdom操作
<template>
  <div>
    <!-- 核心代码: v-model捆绑变量name -->
    <input type="input" name="show_name" v-model="name" />
    <input type="hidden" name="name" v-model="name" />
    <button type="button" @click="setName">设置值</button>
  </div>
</template>
<script lang="ts" setup>
  import { ref } from 'vue'
  const name = ref('abc');
  function setName() {
  // 核心代码: 修改值, 内部自动去影响视图
    name.value = 'abc';
  }
</script>

// less多级样式
.parent {
  font-size: 16px;
  
  .sub1 {
    color: red;
  }
  
  .sub2 {
    color: green;
  }
}
// 对应原始css
.parent {
  font-size: 16px;
}
.parent .sub1 {
  color: red;
}
.parent .sub2 {
  color: green;
}

// 1. setup方式: 推荐-按需加载
<script lang="ts" setup>
/// 不用提供 export default ...
</script>

// 2. 函数方式: 不推荐-代码量太大, 全部都要写
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
  ...
});
</script>
// 3. 装饰器方式: 推荐-声明与实现分开, 装饰器将在后续章节有介绍.
<script lang="ts">
import { Options, Vue } from 'vue-class-component';
import aComponent from 'aComponent.vue';

@Options({
  components: {
    aComponent,
  },
})
export default class App extends Vue{}
</script>

<!-- 父组件:调用方 -->
<template>
  <div>
    <sub-component propA="123" @change="someFunction" />
  </div>
</template>
<script lang="ts">
function someFunction(id: number) {
  /// 响应子组件上抛事件
}
</script>

<!-- 子组件:被调用方 -->
<script lang="ts">
import { defineProps, defineEmits, computed, watchEffect, withDefaults, ref  } from 'vue';
// 下面是定义props属性, 两种等价写法
// 推荐写法
const props=withDefaults(
  defineProps<{ 
    propA: string
  }>(),
  {
    propA: 'abc',
  }
);
// or
const props = defineProps({
  propA: {
    type: String,
    default: 'abc'
  }
})
//==============

// 下面是上抛事件emit, 两种写法
const emit = defineEmits<{
  (e: 'change', id: number): void
  (e: 'update', value: string): void
}>()
// or 推荐写法
const emit = defineEmits<{
  change: [id: number] // 具名元组语法
  update: [value: string]
}>()
//=============

// 自动计算变量title, 参与计算b发生改变而改变 
const b = ref(0);
const title = computed(() => {
  return '标题为:'+ b;
})

// 监控watchEffect, 参与计算c发生改变时, watchEffect函数会触发
const c = ref(1);
watchEffect(() => {
  console.log(c);
});
</script>

<script lang="ts">
// 定义aProps属性
import { defineProps } from 'vue'

defineProps({
  aProps: {
    type: String,
    default: '',
  }
});
</script>

// 调用组件时传参, "123"
<template>
  <div>
    <aComponent aProps="123" />
  </div>
</template>
<script lang="ts">
import { Component } from 'vue-class-component';
import aComponent from 'aComponent.vue';

@Component({
  components: {
    aComponent,
  },
})
</script>

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    component: () => import('../views/AboutView.vue')
  }
]

// Pinia定义
// store/others.ts
import { defineStore } from "pinia";
import Pinia from "./index";

export const otherStore = defineStore("other", {
  state: () => ({
    counter: 1,
  }),
  getters: {
    doubleCount: (state) => state.counter * 2,
  },
  actions: {
    increment() {
      this.counter++;
    },
  },
});

// 使用Pinia的方式
import { otherStore } from "@store/other"

const other = otherStore();
console.log(other.doubleCount);
other.increment();

<script lang="ts">
import { Component, Prop } from 'vue-class-component'
import HelloWorld from '@/components/HelloWorld.vue' // @ is an alias to /src

@Component({
  components: {
    HelloWorld,
  },
})
export default class HomeView {
  @Prop(String)
  msg!: string
}
</script>

npm install --save-dev prerender-spa-plugin vue-meta-info

const path = require('path');
const PrerenderSPAPlugin = require('prerender-spa-plugin');
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;
module.exports = {
    //publicPath: '/', //打包路径，使用相对路径生成的dist文件夹下的index可以打开
    configureWebpack: {
      plugins: [
         new PrerenderSPAPlugin({
        // 生成文件的路径，也可以与webpakc打包的一致。
        // 下面这句话非常重要！！！
        // 这个目录只能有一级，如果目录层次大于一级，在生成的时候不会有任何错误提示，在预渲染的时候只会卡着不动。
         staticDir: path.join(__dirname,'dist'),
           // 对应自己的路由文件，比如a有参数，就需要写成 /a/param1。
          routes: [
            '/', 
            '/home',
            '/article',
            '/download',
            '/message',
          ],
          // 这个很重要，如果没有配置这段，也不会进行预编译
         renderer: new Renderer({
          injectProperty: '__PRERENDER_INJECTED',
          inject: {
            foo: 'bar'
          },
           // 在 app.vue  onMounted函数中 document.dispatchEvent(new Event('custom-render-trigger'))，两者的事件名称要对应上。
          renderAfterDocumentEvent: 'custom-render-trigger',
          renderAfterTime: 6000,
          headless: false
         })
       }),
      ]
   },
}

function setup() {
    onMounted(() => {
      document.dispatchEvent(new Event('custom-render-trigger'))
    })
}

const router = createRouter({
  //history: createWebHashHistory(process.env.BASE_URL),
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default defineComponent({
  name: "Home",
  metaInfo: {
    //改变当前路由的title
    title: "前端小阳仔",
    //改变当前路由的link
    meta: [
      {
        name: "keyWords",
        content:
          "前端博客,前端技术,技术博客,前端小知识,前端作品,前端导航,前端小阳仔,前端框架",
      },
      {
        name: "description",
        content:
          "原创前端技术博客，致力于分享前端学习路上的第一手资料。专注web前端开发、移动端开发、前端工程化、前端职业发展，做最有价值的前端技术学习网站。",
      },
    ],
    link: [
      {
        rel: "前端小阳仔",
        href: "https://code-nav.top/myblog/home",
      },
    ],
  }
});

<button onclick="macroClick()">点击事件</button>

function macroClick() {
  // todo 代码块1
  new Promise(function (resolve, reject) {
    // todo 代码块2
    resolve();
  }).then(function () {
    // todo 代码块3
  })
  // todo 代码块4
}


/////////////
/// 顺序：1 -> 2 -> 4 -> 3

<button onclick="macroClick2(); macroClick1();">点击事件</button>

function macroClick1() {
  // todo 代码块1
  new Promise(function (resolve, reject) {
    // todo 代码块2
    resolve();
  }).then(function () {
    // todo 代码块3
  })
  // todo 代码块4
}
async function macroClick2() {
  // todo 代码5
  await new Promise(function (resolve, reject) {
    // todo 代码块6
    resolve();
  }).then(function () {
    // todo 代码块7
  })
  // todo 代码8
}

/////////////
/// 顺序：1 -> 2 -> 4 -> 5 -> 6 -> 7 -> 8 -> 3 

interface MyAttention {
    "auid": string,//"10781982",
    "icon": string,//"http://www.myccmtv.cn/images/default/noface.gif",
    "product_name": string, //"维C使1",
    "sign_info": string,//"纽崔莱（上海）医药服务有限公司",
    "update_num": string,// "5",
    "attent_time": string,//"2023-11-08 17:22:36",
    "product_url": string,//"专区跳转链接，待定"
}

interface MyAttention1 {
  "auid": string,//"10781982",
  "icon": string,//"http://www.myccmtv.cn/images/default/noface.gif",
  "product_name": string, //"维C使1",
  "sign_info": string,//"纽崔莱（上海）医药服务有限公司",
  "update_num": string,// "5",
  "attent_time": string,//"2023-11-08 17:22:36",
  "product_url": string,//"专区跳转链接，待定"
}

/// 声明变量a为MyAttention类型
const a: MyAttention = {
  "auid": "10781982",
  "icon": "http://www.myccmtv.cn/images/default/noface.gif",
  "product_name": "维C使1",
  "sign_info": "纽崔莱（上海）医药服务有限公司",
  "update_num": "5",
  "attent_time": "2023-11-08 17:22:36",
  "product_url": "专区跳转链接，待定"
}

/// 使用MyAttention1类型的b来接收a
const b: MyAttention1 = a;

function isMyAttention1 (a) {
  if (typeof a['auid'] === 'string' &&
    typeof a['icon'] === 'string' &&
    typeof a['product_name'] === 'string' &&
    typeof a['sign_info'] === 'string' &&
    typeof a['update_num'] === 'string' &&
    typeof a['attent_time'] === 'string' &&
    typeof a['product_url'] === 'string'
  ) {
    return true
  }

  return false
}

// type类型别名
type aliasType = number;

// interface定义对象类型
interface ObjectType extends Number {
  id: number,
  avatar: string,
}

// 内置类型
// Record - 当作key，value来理解对象的属性
type StringStringMap = Record<string, string>

// 联合类型
type MyUnionType = string | number; // 任选其一，非黑即白

// 交叉类型
type MyIntersectionType = MyUnionType & StringStringMap; // 属性签名融合后，存在灰度

// Partial - 全部属性签名变成非必填
type par = Partial<{
  username: string,
  nickname?: string,
}>// 结果是 { username?, nicknaeme? }

// Required - 全部属性签名变成必填，与Partial相反，省略不讲

// Readonly - 全部属性变为只读，省略不讲

// Pick - 抽取指定名字的属性签名
type pi = Pick<{ a: string, b?: string, c?: string }, "a" | "b">;// { a , b }

// typeof - 把属性当作map解析取value的联合类型
type OT = { a: string, b: number }
type Tyof = typeof OT;// { string | number }

// keyof - 与typeof相似，获取的是key的联合类型，省略不讲

// 字面量类型枚举约束
type ChooseName = 'a' | 'b' | 'c' | 'd'; // 仅允许赋值
const n: ChooseName = 'f';// 错误f不在允许值范围

// 内置条件类型: 
// Exclude - 从一个类型中排除另一个类型，同样也是指属性签名
type Exclude<T, U> = T extends U ? never : T;
type R3 = Exclude<'a' | 'b' | 'c' | 'd', 'a' | 'b' | 'c'>; // R3: 'd'

// Extract - 从一个类型抽取出另一个类型，相同的部分
type Extract<T, U> = T extends U ? T : never;
type R4 = Extract<'a' | 'b' | 'c' | 'd', 'a' | 'b' | 'c'>; // R4: 'a' | 'b' | 'c

// NonNullable - 从类型中那种必填属性
type NonNullable<T> = T extends null | undefined ? never : T;
type R5 = NonNullable<'a' | null | undefined | 'd'>; // R5: 'a' | 'd'

// ReturnType - 从函数类型中拿走返回值类型
type ReturnType<T> = T extends (...args: any[]) => infer R ? R : T;
function getUser() {
  return {
    name: '张三',
    age: 10
  }
}
type ReturnUser = ReturnType<typeof getUser>; // type ReturnUser = {name: string;age: number;}


// Parameters - 从函数类型中拿走参数列表类型
type Parameters<T> = T extends (...args: infer P) => any ? P : never;
function getPerson(a: string, b: number) {
  return {
    name: '李四',
    age: 18
  }
}
type ParamsType = Parameters<typeof getPerson>; // type ParamsType = [a: string, b: number]