Vue3组件库

Vue组件库

Vite+Vue3+Typescript+TSX

1、项目搭建

1.1、创建项目（yarn）

D:\WebstromProject>yarn create vite
yarn create v1.22.19
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...success Installed "create-vite@4.4.1" with binaries:- create-vite- cva
√ Project name: ... chenxing
√ Select a framework: » Vue
√ Select a variant: » TypeScriptScaffolding project in D:\WebstromProject\chenxing...Done. Now run:cd chenxingyarnyarn devDone in 6.95s.

1.2、基础依赖

1、@types/node

# @types/node
yarn add -D @types/node

2、Jsx

# @vitejs/plugin-vue-jsx
yarn add -D @vitejs/plugin-vue-jsx

3、eslint

# eslint、vite-plugin-eslint（vite运行的时候自动检测eslint规范）
yarn add -D eslint
yarn add -D vite-plugin-eslint

4、prettier

# prettier、eslint-config-prettier（关掉所有和Prettier冲突的ESLint的配置）、eslint-plugin-prettier（将Prettier的rules以插件的形式加入到 ESLint里面）
yarn add -D prettier eslint-config-prettier eslint-plugin-prettier

5、sass

# sass
yarn add -D sass

1.3、项目配置

1、关闭Option Api

import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'// https://vitejs.dev/config/
export default defineConfig({define: {// 关闭Vue Options Api__VUE_OPTIONS_API__: false},plugins: [vue()],
})

2、Jsx配置

import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsxPlugin from "@vitejs/plugin-vue-jsx";// https://vitejs.dev/config/
export default defineConfig({define: {// 关闭Vue Options Api__VUE_OPTIONS_API__: false},plugins: [vue(),vueJsxPlugin({})],
})

3、路径别名

src修改为examples，新增examples同级文件夹packages作为UI组件位置

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import vueJsxPlugin from "@vitejs/plugin-vue-jsx";
import * as path from "path";// https://vitejs.dev/config/
export default defineConfig({base: "./",define: {// 关闭Vue Options Api__VUE_OPTIONS_API__: false,},plugins: [vue(), vueJsxPlugin({})],resolve: {// 配置路径别名alias: {"@": path.resolve(__dirname, "./examples"),},},
});

1.4、eslint

1、初始化eslint

PS D:\WebstromProject\chenxing> npx eslint --init
You can also run this command directly using 'npm init @eslint/config'.
? How would you like to use ESLint? ...To check syntax only
> To check syntax and find problems
√ How would you like to use ESLint? · problems
√ What type of modules does your project use? · esm
√ Which framework does your project use? · vue
√ Does your project use TypeScript? · No / Yes
√ Where does your code run? · browser, node
√ What format do you want your config file to be in? · JavaScript
The config that you've selected requires the following dependencies:@typescript-eslint/eslint-plugin@latest eslint-plugin-vue@latest @typescript-eslint/parser@latest
√ Would you like to install them now? · No / Yes
√ Which package manager do you want to use? · yarn
Installing @typescript-eslint/eslint-plugin@latest, eslint-plugin-vue@latest, @typescript-eslint/parser@latest

2、.eslintrc.cjs

module.exports = {"env": {"browser": true,"es2021": true,"node": true},"extends": ["eslint:recommended","plugin:@typescript-eslint/recommended","plugin:vue/vue3-essential"],"overrides": [{"env": {"node": true},"files": [".eslintrc.{js,cjs}"],"parserOptions": {"sourceType": "script"}}],"parserOptions": {"ecmaVersion": "latest","parser": "@typescript-eslint/parser","sourceType": "module"},"plugins": ["@typescript-eslint","vue"],"rules": {}
}

3、package.json

{"name": "chenxing","private": true,"version": "0.0.0","type": "module","scripts": {"dev": "vite","build": "vue-tsc && vite build","preview": "vite preview","lint": "eslint . --ext .vue,.js,.ts,.jsx,.tsx --fix"},"dependencies": {"vue": "^3.3.4"},"devDependencies": {"@typescript-eslint/eslint-plugin": "^6.3.0","@typescript-eslint/parser": "^6.3.0","@vitejs/plugin-vue": "^4.2.3","@vitejs/plugin-vue-jsx": "^3.0.1","eslint": "^8.46.0","eslint-plugin-vue": "^9.17.0","typescript": "^5.0.2","vite": "^4.4.5","vite-plugin-eslint": "^1.8.1","vue-tsc": "^1.8.5"}
}

4、webstrom配置

在这里插入图片描述

1.5、prettier

1、.prettierrc.cjs

module.exports = {printWidth: 80, // 单行长度tabWidth: 2, // 缩进长度useTabs: false, // 使用空格代替tab缩进semi: true, // 句末使用分号singleQuote: false, // 使用单引号
}

2、.eslintrc.cjs

module.exports = {"env": {"browser": true,"es2021": true,"node": true},"extends": ["eslint:recommended","plugin:@typescript-eslint/recommended","plugin:vue/vue3-essential",'plugin:prettier/recommended','eslint-config-prettier'],"overrides": [{"env": {"node": true},"files": [".eslintrc.{js,cjs}"],"parserOptions": {"sourceType": "script"}}],"parserOptions": {"ecmaVersion": "latest","parser": "@typescript-eslint/parser","sourceType": "module"},"plugins": ["@typescript-eslint","vue"],"rules": {}
}

3、package.json

{"name": "chenxing","private": true,"version": "0.0.0","type": "module","scripts": {"dev": "vite","build": "vue-tsc && vite build","preview": "vite preview","lint": "eslint . --ext .vue,.js,.ts,.jsx,.tsx","prettier": "prettier --write ./**/*.{vue,ts,tsx,js,jsx,css,less,scss,json,md}"},"dependencies": {"vue": "^3.3.4"},"devDependencies": {"@types/node": "^20.4.10","@typescript-eslint/eslint-plugin": "^6.3.0","@typescript-eslint/parser": "^6.3.0","@vitejs/plugin-vue": "^4.2.3","@vitejs/plugin-vue-jsx": "^3.0.1","eslint": "^8.47.0","eslint-config-prettier": "^9.0.0","eslint-plugin-prettier": "^5.0.0","eslint-plugin-vue": "^9.17.0","prettier": "^3.0.1","sass": "^1.65.1","typescript": "^5.0.2","vite": "^4.4.5","vite-plugin-eslint": "^1.8.1","vue-tsc": "^1.8.5"}
}

4、webstrom配置

在这里插入图片描述

2、Button组件

2.1、基础组件

在package下新建components目录，components下新建button目录，button下新建src目录和index.ts文件，src目录下新建button.tsx和type.ts

1、button.tsx

import { defineComponent, toRefs } from "vue";
import { PropsType, propsType } from "./type";
import "../style/index.scss";export default defineComponent({name: "XButton",props: propsType,setup(props: PropsType, { slots }) {const { type } = toRefs(props);console.log(type);return () => {return (<div class={`button button-${type.value}`}>{slots.default ? slots.default() : "Button"}</div>);};},
});

2、type.ts

import { ExtractPropTypes, PropType } from "vue";// buttonType
type type = "default" | "success" | "warning" | "fail";// props参数类型
export const propsType = {type: {type: String as PropType<type>,default: "default",},
};export type PropsType = ExtractPropTypes<typeof propsType>;

3、index.ts

import XButton from "./src/button";
import { App } from "vue";export default {install(app: App) {app.component(XButton.name, XButton);},
};

2.2、样式

src同级新建chenxing.scss（通用样式抽离），src同级新建style目录，style下新建index.scss

1、chenxing.scss

$fontSize: var(--font-size, 14px);
$fontColor: #3c3c3c;
$lineHeight: 1.2rem;
$border-radius: var(--border-radius, 2px);// 基础样式
* {margin: 0; // 清除所有元素外边距padding: 0; // 清除所有元素内边距outline: none; // 清除所有元素轮廓线box-sizing: border-box !important; // 规定盒子模型。content-box：宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框；border-box：为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。font-family: system-ui; // html基准字体font-size: $fontSize; // html基准字体大小color: $fontColor; // html基准字体颜色line-height: $lineHeight; // html基准行高
}:not(i) {&:before,&:after {margin: 0; // 清除所有元素外边距padding: 0; // 清除所有元素内边距outline: none; // 清除所有元素轮廓线box-sizing: border-box !important; // 规定盒子模型。content-box：宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框；border-box：为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。}
}html,
body {position: relative; // html,body相对定位，防止body直接子节点乱飞
}

2、index.scss

@import "packages/components/chenxing";$button-types: (success: var(--button-success, green),warning: var(--button-warning, yellow),fail: var(--button-fail, red));.button {display: inline-block;border-radius: 5px;padding: .75rem 1rem;@each $type, $color in $button-types {&.button-#{$type} {background-color: $color;color: #ffffff;}}
}

2.3、尺寸

1、index.tsx

import { defineComponent, toRefs } from "vue";
import { PropsType, propsType } from "./type";
import "../style/index.scss";export default defineComponent({name: "XButton",props: propsType,setup(props: PropsType, { slots }) {const { type, size } = toRefs(props);console.log(type, size);return () => {return (<div class={`button button-${type.value} button-${size.value}`}>{slots.default ? slots.default() : "Button"}</div>);};},
});

2、type.ts

import { ExtractPropTypes, PropType } from "vue";// buttonType
type type = "default" | "success" | "warning" | "fail";// buttonSize
type size = "small" | "proper" | "large";// props参数类型
export const propsType = {type: {type: String as PropType<type>,default: "default",},size: {type: String as PropType<size>,default: "proper",},
};export type PropsType = ExtractPropTypes<typeof propsType>;

3、index.scss

@import "packages/components/chenxing";$buttonTypes: (success: green,warning: yellow,fail: red
);$buttonSizes: (small: .25rem .75rem,proper: .75rem 1rem,large: 1rem 1.25rem,
);.button {display: inline-block;border-radius: 5px;// default typebackground-color: blue;color: #ffffff;// default sizefont-size: $fontSize;padding: .75rem 1rem;margin: .25rem .5rem;// $button-types@each $type, $color in $buttonTypes {&.button-#{$type} {background-color: $color;color: #ffffff;}}// $button-sizes@each $size, $padding in $buttonSizes {&.button-#{$size} {padding: $padding;}}
}

2.4、块/行内

1、index.tsx

import { defineComponent, toRefs } from "vue";
import { PropsType, propsType } from "./type";
import "../style/index.scss";export default defineComponent({name: "XButton",props: propsType,setup(props: PropsType, { slots }) {const { type, size, disable, display } = toRefs(props);console.log(type, size, disable, display);return () => {return (<divclass={`button button-${type.value} button-${size.value} button-${display.value}>{slots.default ? slots.default() : "Button"}</div>);};},
});

2、type.ts

import { ExtractPropTypes, PropType } from "vue";type type = "default" | "success" | "warning" | "fail";type size = "small" | "proper" | "large";type display = "inline" | "block";// props参数类型
export const propsType = {type: {type: String as PropType<type>,default: "default",},size: {type: String as PropType<size>,default: "proper",},display: {type: String as PropType<display>,default: "inline-block",},
};export type PropsType = ExtractPropTypes<typeof propsType>;

3、index.scss

@import "packages/components/chenxing";$buttonTypes: (success: green,warning: yellow,fail: red
);$buttonSizes: (small: .25rem .75rem,proper: .75rem 1rem,large: 1rem 1.25rem,
);$buttonDisplay: (inline: inline-block, block: block);.button {border-radius: 5px;// default typebackground-color: blue;color: #ffffff;// default sizefont-size: $fontSize;padding: .75rem 1rem;margin: .25rem .5rem;// default displaydisplay: inline-block;// type@each $type, $color in $buttonTypes {&.button-#{$type} {background-color: $color;color: #ffffff;}}// size@each $size, $padding in $buttonSizes {&.button-#{$size} {padding: $padding;}}// display@each $display, $displayItem in $buttonDisplay {&.button-#{$display} {display: $displayItem;}}
}

2.5、禁用

1、index.tsx

import { defineComponent, toRefs } from "vue";
import { PropsType, propsType } from "./type";
import "../style/index.scss";export default defineComponent({name: "XButton",props: propsType,setup(props: PropsType, { slots }) {const { type, size, disable, display } = toRefs(props);console.log(type, size, disable, display);const Display = disable.value ? "disable" : "";return () => {return (<divclass={`button button-${type.value} button-${size.value} button-${display.value} ${Display}`}>{slots.default ? slots.default() : "Button"}</div>);};},
});

2、type.ts

import { ExtractPropTypes, PropType } from "vue";type type = "default" | "success" | "warning" | "fail";type size = "small" | "proper" | "large";type display = "inline" | "block";// props参数类型
export const propsType = {type: {type: String as PropType<type>,default: "default",},size: {type: String as PropType<size>,default: "proper",},display: {type: String as PropType<display>,default: "inline-block",},disable: {type: Boolean,default: false,},
};export type PropsType = ExtractPropTypes<typeof propsType>;

3、index.scss

@import "packages/components/chenxing";$buttonTypes: (success: green,warning: yellow,fail: red
);$buttonSizes: (small: .25rem .75rem,proper: .75rem 1rem,large: 1rem 1.25rem,
);$buttonDisplay: (inline: inline-block, block: block);.button {border-radius: 5px;// default typebackground-color: blue;color: #ffffff;// default sizefont-size: $fontSize;padding: .75rem 1rem;margin: .25rem .5rem;// default displaydisplay: inline-block;// type@each $type, $color in $buttonTypes {&.button-#{$type} {background-color: $color;color: #ffffff;}}// size@each $size, $padding in $buttonSizes {&.button-#{$size} {padding: $padding;}}// display@each $display, $displayItem in $buttonDisplay {&.button-#{$display} {display: $displayItem;}}// disable&.disable {pointer-events: none;opacity: .3;}
}

2.6、使用

main.ts

import { createApp } from "vue";
import "./style.css";
import App from "./App.vue";
// import XButton from "../packages/components/button";
import Chenxing from "../packages/components";createApp(App).use(Chenxing).mount("#app");

App.vue

<script setup lang="ts">
import XButton from "../packages/components/button/src";
</script><template><XButton>按钮</XButton><XButton type="success">按钮</XButton><XButton type="warning">按钮</XButton><XButton type="fail">按钮</XButton><br /><XButton type="success" size="small">按钮</XButton><XButton type="warning" size="proper">按钮</XButton><XButton type="fail" size="large">按钮</XButton><br /><XButton disable type="success">按钮</XButton><XButton :disable="true" type="warning">按钮</XButton><XButton :disable="false" type="fail">按钮</XButton><br /><XButton :disable="false" type="fail" display="block">按钮</XButton>
</template><style scoped></style>

3、组件统一注册

components下新建index.ts

3.1、index.ts

// 导入button组件
import { App } from "vue";
import XButton from "./button/src/button";// 组件列表
const components = [XButton];export default {install(app: App) {components.forEach((component) => {app.component(component.name, component);});},
};

3.2、使用

1、main.ts

import { createApp } from "vue";
import "./style.css";
import App from "./App.vue";
// import XButton from "../packages/components/button";
import Chenxing from "../packages/components";createApp(App).use(Chenxing).mount("#app");

2、App.vue

<script setup lang="ts">
import XButton from "../packages/components/button/src/button";
</script><template><XButton></XButton>
</template><style scoped></style>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/38031.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

UNIAPP中开发企业微信小程序

UNIAPP中开发企业微信小程序

概述 需求为使用uni-app开发企业微信小程序。希望可以借助现成的uni-app框架&#xff0c;快速开发。遇到的问题是uni-app引入jweixin-1.2.0.js提示异常: Reason: TypeError: Cannot read properties of undefined (reading ‘title’)。本文中描述了如何解决该问题&#xff0c…
阅读更多...
IntelliJIDEA安装lombok插件

IntelliJIDEA安装lombok插件

写在前面&#xff1a; 当我们创建POJO类时&#xff0c;都会毫不犹豫的让开发工具对域变量生成set&#xff0c;get方法&#xff0c;虽然不是我们自己手动添加&#xff0c;但每个类都要做重复的生成操作&#xff0c;而且当变量名或者是修饰符改变了&#xff0c;我们就要删除set&…
阅读更多...
大数据量模糊查询优化（流去重，流分批，建树操作）

大数据量模糊查询优化（流去重，流分批，建树操作）

大数据量模糊查询优化&#xff08;流去重&#xff0c;流分批&#xff0c;建树操作&#xff09; 前言一、java8 流是什么二、本次优化涉及操作1.流去重2.流分批3.hutool树工具类建树4.全部代码 总结 前言 有时候会进行大数据量查询后的建树操作&#xff0c;如果直接使用sql语句…
阅读更多...
K8S之存储卷

K8S之存储卷

K8S之存储卷 一、emptyDir emptyDir&#xff1a;可实现Pod中的容器之间共享目录数据&#xff0c;但emptyDir存储卷没有持久化数据的能力&#xff0c;存储卷会随着Pod生命周期结束而一起删除二、hostPath hostPath&#xff1a;将Node节点上的目录/文件挂载到Pod容器的指定目录…
阅读更多...
TypeScript 关于对【泛型】的定义使用解读

TypeScript 关于对【泛型】的定义使用解读

目录 概念导读泛型函数多个泛型参数泛型约束泛型别名泛型接口泛型类总结&#xff1a; 概念导读 泛型&#xff08;Generics&#xff09;是指在定义函数、接口或类的时候&#xff0c;不预先指定具体的类型&#xff0c;而在使用的时候再指定类型的一种特性。使用泛型 可以复用类型…
阅读更多...
Oracle切割字符串的方法，SQL语句完成。

Oracle切割字符串的方法，SQL语句完成。

Oracle用正则的方式循环切割字符串 需求&#xff1a;有一个这样子的 Str “‘CNJ-520-180500000001|CNJ-520-181200000001|CNJ-520-190300000001|CNJ-520-190100000001|CNJ-520-181200000002’” &#xff0c;然后我需要拿到每一个单号&#xff0c;每一个单号都要走一遍固定的…
阅读更多...
“MongoDB基础知识【超详细】

“MongoDB基础知识【超详细】

"探索MongoDB的无边之境&#xff1a;沉浸式数据库之旅" 欢迎来到MongoDB的精彩世界&#xff01;在这个博客中&#xff0c;我们将带您进入一个充满创新和无限潜力的数据库领域。无论您是开发者、数据工程师还是技术爱好者&#xff0c;MongoDB都将为您带来一场令人心动…
阅读更多...
如何实现安全上网

如何实现安全上网

l 场景描述 政府、军工、科研等涉密单位或企业往往要比其他组织更早接触高精尖的技术与产品&#xff0c;相对应的数据保密性要求更高。常规的内外网物理隔离手段&#xff0c;已经满足不了这些涉密单位的保密需求&#xff0c;发展到现在&#xff0c;需求已经演变成既要保证网络…
阅读更多...
记一次Kafka重复消费解决过程

记一次Kafka重复消费解决过程

起因&#xff1a;车联网项目开发&#xff0c;车辆发生故障需要给三个系统推送消息&#xff0c;故障上报较为频繁&#xff0c;所以为了不阻塞主流程&#xff0c;采用了使用kafka。消费方负责推送并保存推送记录&#xff0c;但在一次压测中发现&#xff0c;实际只发生了10次故障&…
阅读更多...
“深入探究JVM内部机制：理解Java虚拟机的工作原理“

“深入探究JVM内部机制：理解Java虚拟机的工作原理“

标题&#xff1a;深入探究JVM内部机制&#xff1a;理解Java虚拟机的工作原理 摘要&#xff1a;本文将深入探究Java虚拟机&#xff08;JVM&#xff09;的内部机制&#xff0c;帮助读者理解JVM的工作原理。我们将介绍JVM的组成部分、类加载过程、内存管理和垃圾回收机制&#xf…
阅读更多...
带你了解ChatGPT

带你了解ChatGPT

目录 什么是ChatGPT 从ChatGPT角度看聊天机器人的历史 聊天机器人的早期历史 ChatGPT的出现 ChatGPT和其他聊天机器人的比较 总结 ChatGPT相比其他聊天机器人的优势在哪里 1. 自然语言处理能力更强 2. 编程能力高&#xff0c;应用领域广泛 3. 可以满足个性化需求 4.…
阅读更多...
Golang实现完整聊天室（内附源码）

Golang实现完整聊天室（内附源码）

项目github地址&#xff1a; 由于我们项目的需要&#xff0c;我就研究了一下关于websocket的相关内容&#xff0c;去实现一个聊天室的功能。 经过几天的探索&#xff0c;现在使用Gin框架实现了一个完整的聊天室消息实时通知系统。有什么不完善的地方还请大佬指正。 用到的技术…
阅读更多...
使用自己的数据利用pytorch搭建全连接神经网络进行回归预测

使用自己的数据利用pytorch搭建全连接神经网络进行回归预测

使用自己的数据利用pytorch搭建全连接神经网络进行回归预测 1、导入库2、数据准备3、数据拆分4、数据标准化5、数据转换6、模型搭建7、模型训练8、模型预测9、完整代码 1、导入库 引入必要的库&#xff0c;包括PyTorch、Pandas等。 import numpy as np import pandas as pd f…
阅读更多...
tp6 RabbitMQ

tp6 RabbitMQ

1、composer 安装 AMQP 扩展 composer require php-amqplib/php-amqplib 2、RabbitMQ 配置 在 config 目录下创建 rabbitmq.php 文件 <?php return [host>,port>5672,user>,password>,vhost>,exchange_name > ,queue_name > ,route_key > ,cons…
阅读更多...
中国生产了5.07亿台，库存高达近4亿台？国产手机彻底卖不动了？

中国生产了5.07亿台，库存高达近4亿台？国产手机彻底卖不动了？

统计数据显示今年上半年中国的手机产量达到5.07亿台&#xff0c;国内市场手机出货量仅有1.24亿台&#xff0c;都出现了下滑&#xff0c;那么中国手机的产量比销量多出了3.83亿台&#xff0c;这些手机都成为了库存&#xff1f; 中国手机市场确实不如早年那么辉煌&#xff0c;201…
阅读更多...
【FAQ】安防监控视频EasyCVR平台分发的FLV视频流在VLC中无法播放

【FAQ】安防监控视频EasyCVR平台分发的FLV视频流在VLC中无法播放

众所周知&#xff0c;TSINGSEE青犀视频汇聚平台EasyCVR可支持多协议方式接入&#xff0c;包括主流标准协议国标GB28181、RTSP/Onvif、RTMP等&#xff0c;以及厂家私有协议与SDK接入&#xff0c;包括海康Ehome、海大宇等设备的SDK等。在视频流的处理与分发上&#xff0c;视频监控…
阅读更多...
P12-Retentive NetWork-RetNet挑战Transformer

P12-Retentive NetWork-RetNet挑战Transformer

论文地址:https://arxiv.org/abs/2307.08621 目录 Abstract 一.Introduction 二.Retentive Networks 2.1Retention 2.2Gated Multi-Scale Retention 2.3Overall Architecture of Retention Networks 2.4Relation to and Differences from Previous Methods 三.Experime…
阅读更多...
Codeforces Round 892 (Div. 2)（VP)

Codeforces Round 892 (Div. 2)（VP)

A //b里放最小值&#xff0c;其他值放c。如果最大值最小值&#xff0c;则无解。 void solve() {int n; cin >> n;vi a(n); liter(x, a) cin >> x; sort(all(a));if (a[0] a[n - 1]){print(-1); return;}vi b, c;for (int i 0; i < sz(a); i){if (a[i] a[0])…
阅读更多...
小米基于 Flink 的实时计算资源治理实践

小米基于 Flink 的实时计算资源治理实践

摘要&#xff1a;本文整理自小米高级软件工程师张蛟&#xff0c;在 Flink Forward Asia 2022 生产实践专场的分享。本篇内容主要分为四个部分&#xff1a; 发展现状与规模框架层治理实践平台层治理实践未来规划与展望 点击查看原文视频 & 演讲PPT 一、发展现状与规模 如上图…
阅读更多...
【03】基础知识：typescript中的函数

【03】基础知识：typescript中的函数

一、typescript 中定义函数的方法 函数声明法 function test1(): string {return 返回类型为string }function test2(): void {console.log(没有返回值的方法) }函数表达式/匿名函数 const test3 function(): number {return 1 }二、typescript 中 函数参数写法 1、typesc…
阅读更多...
最新文章

Copyright @ 2022~2023