使用typescript构建Vue2应用

一、vue项目初始化-引入typescript

使用typescript构建vue应用和使用js一样,都是通过vue-cli去初始化并创建一个vue项目,只不过使用typescript构建的时候要在脚手架问卷操作的时候勾选上typescript选项。 

二、typescript Vue项目比较

使用typescript构建的Vue项目发生了一些变化:
 main.js变成了main.ts,但是main.ts中的内容和main.js的内容是一模一样的
 router.js变成了router.ts,但是router.ts中的内容和router.js中的内容也是一模一样的
 store.js变成了store.ts,但是store.ts中的内容和store.ts中的内容也是一模一样的

因为typescript是JavaScript的超集,所以 ts完全兼容js

 新增了一个shims-vue.d.ts声明文件,这个文件的作用就是让typescript能够识别.vue文件,在引入"*.vue"文件的时候,会将其标识为一个Vue组件,才能对.vue文件进行类型校验,其具体内容如下:

declare module '*.vue' {import Vue from 'vue'export default Vue
}

 新增了一个shims-tsx.d.ts文件,其作用就是为了能够解析.tsx文件,对.tsx文件进行类型校验,其具体内容如下:

import Vue, { VNode } from 'vue'
declare global {namespace JSX {interface Element extends VNode {}interface ElementClass extends Vue {}interface IntrinsicElements {[elem: string]: any}}
}

 当然还会新增一个ts.config文件,这个是typescript的配置文件,具体内容这里不作解释,请参考tsconfig文件详解

三、.vue文件内容格式与写法

使用typescript来写Vue应用,最主要的就是.vue文件,.vue文件写法上与js有些不同并且 新增了一些装饰器,接着一步一步分析。

 虽然.vue文件的格式和写法上有了不同,但这不同只是<script></script>部分发生了变化,<template></template>和<style></style>和原来是一样的,一个最简单.vue文件仍然可以使用如下写法:
// HelloWorld.vue

<template><div>hello world</div>
</template>

 在写<script></script>部分,第一点不同就是,<script>标签上要加上lang语言属性,表示其中的内容为ts,如:

<script lang="ts">
</script>

 默认export上的不同,使用js的时候,我们是直接通过export default {}导出一个Vue组件对象即可,但是使用ts的时候,我们必须导出一个类class,类名为组件名,同时这个类必须继承Vue,如:

// import Vue from "vue";
import { Component, Vue } from 'vue-property-decorator'; // 引入Vue及一些装饰器
@Component
export default class App extends Vue { // 继承Vue并导出Vue组件}
以上就是<sciprt>内容最基本的写法,上面继承的Vue不是直接从"vue"模块中引入,而是从"vue-property-decorator"即vue属性装饰器模块中引入,当然 也可以通过vue模块引入import Vue from "vue",但是我们写.vue文件的时候 通常要引入一些装饰器,同时 这个装饰器类vue-property-decorator也提供了Vue,故可以直接从vue-property-decorator装饰器类上直接引入

 组件中data属性的写法,由于我们在.vue文件中声明了一个class,这个class就是Vue组件,我们可以直接在这个class中声明属性即可,这些声明的属性就是之前使用js写时的data属性中的数据,如:

export default class App extends Vue {public lists = [ // 这里就是之前Vue组件的data属性"Vue.js", "react.js", "Angular.js"]
}

 组件中的computed计算属性的写法,同样我们可以在class中声明get和set方法即可变成对应的computed属性,如:

export default class App extends Vue {public lists = [ // 这里就是之前Vue组件的data属性"Vue.js", "react.js", "Angular.js"]public get count() { // 通过get和set实现计算属性return this.lists.length;}
}

 组件中方法的声明更简单,直接在class中声明方法即可,如:

export default class App extends Vue {public say() {console.log("say");}
}

 @Component装饰器的使用,@Component装饰器就是用来标识当前这个类是一个Vue组件,@Component装饰器还可以传递对象作为参数,这个传递的对象就是Vue组件实例,所以所有之前用js写法的时候,Vue组件支持的所有选项都可以传入,如:

@Component({// 这里可以配置Vue组件支持的各种选项components: {HelloWorld},data() {return {a:1}},methods: {say(){console.log("say");}}
})
export default class App extends Vue {
}
@Component内容使用的是 Vue.extend()方法,用于扩展Vue Component并生成Vue组件,这里需要注意的就是, Vue最终会将class中定义的属性和@Component中定义的属性进行合并,如果二者中定义了同名的属性,那么 class中的优先级更高,即class中定义的会覆盖掉@Component中定义的同名属性,但是 data除外@Component中定义的同名的data数据会覆盖掉class中定义的同名data属性,如:
@Component({data() {bar: 1},methods: {say(){console.log("say::@Component");}}
})
export default class App extends Vue {public bar: number = 2; // 这里的bar会被@Component中定义的bar覆盖掉public say() { // 这里的say()方法会覆盖掉@Component中定义的say方法console.log("say::class");}
}
还有一点要注意的是, @Component装饰器千万不要漏写,必须在组件类class前修饰

 props属性的写法,使用ts写Vue组件的时候,如果要在组件上定义props属性,那么必须通过@Prop()装饰器,其实就是在定义组件data属性的时候用@Prop()装饰器进行修饰,如果没有通过@Propp()进行修饰,那么定义的属性就是组件的data属性可以给@Prop()传递一个配置对象,可以定义传递属性的default、required、type等属性,如:

import { Component, Vue, Prop } from 'vue-property-decorator';
@Component // 不要忘了用@Component修饰组件class哟
export default class HelloWorld extends Vue {@Prop() public bar!: string; // 这里定义的是props属性public foo = "foo"; // 这里定义的是data属性@Prop({type: String, default:"foo", required: true}) public foo!: string;
}
</script>
需要注意的是,public foo!: string, 这里声明的string类型是不起作用的,要限定父组件传入的foo属性的数据类型, 必须在@Prop()装饰器内限定数据类型,否则无效

 @Emit()装饰器的使用,在子组件发射自定义事件的时候通常会通过this.$emit("say")的方式,但是typescript提供了一个@Emit()装饰器,用于修饰一个方法,当这个方法被执行的时候,就会在方法执行完成后发射一个同方法名的事件出去,当然,这是在没有给@Emit()传递参数的情况下,如果给@Emit()传递了参数,那么就会发射指定参数的事件,如:

export default class HelloWorld extends Vue {@Emit()  // 在say()方法执行完成后会发射一个同方法名的say事件public say() {}@Emit("speak")  // 这里给@Emit()传递了参数,则会发射speak事件public say() {}
}

 @Watch()装饰器的使用,其拥有监听组件中数据的变化,就相当于$watch,需要给其传递一个字符串参数,表示其监听的是哪个数据的变化,如:

@Watch("foo") // 监听this.foo的变化
public add(newValue: number, oldValue: number) {console.log(`newValue is ${newValue}, oldValue is ${oldValue}`);
}

四、vuex中的变化

vuex中的数据是存放在state属性上的,如果要限定state中数据的属性和类型,那么我们必须在创建store对象的时候定义一个接口限定一下数据类型,如:

interface IState {lists: string[]
}
export default new Vuex.Store<IState>({state: {lists: ["vue"] // 定义了state的数据结构,必须要有lists属性,并且属性值为string[]}
});
获取vuex中的数据时候, 还是可以通过this.$store.state.lists获取到,但是我们也可以通过装饰器获取到,要使用 vuex的装饰器,我们需要安装 vuex-class,如:
import {State, Mutation, Action} from "vuex-class";
export default class App extends Vue {// 将从vuex中获取到的lists数据保存到组件的lists属性上@State("lists") public lists!: string[];@Mutation("say") // 在say()方法前修饰,当say()方法执行的时候就会提交一个say mutationpublic say() {console.log("say1");}@Action("speak") // 在speak()方法前修饰,当speak()方法执行的时候就会提交一个speak actionpublic speak(){}public mounted () {this.say();this.speak();}
}

vue-class-component 是尤大大推出的vue对typescript支持的装饰器(库)vue

vue-class-component强调了几点用法:git

一、methods能够直接声明为类成员方法
二、computed属性能够声明为类属性访问器
三、data数据能够声明为类属性
四、data render 和全部Vue生命周期挂钩也能够直接声明为类成员方法,但不能在实例自己上调用它们。在声明自定义方法时,应避免使用这些保留名称。

五.使用方法

官网demo
<script>
import Vue from 'vue'
import Component from 'vue-class-component'@Component({props: {propMessage: String}
})
export default class App extends Vue {// 初始化数据 data能够声明成类属性形式msg = 123// 使用propshelloMsg = 'Hello, ' + this.propMessage// 生命周期钩子声明  保留名称mounted () {this.greet()}// computed属性能够声明成类方法形式get computedMsg () {return 'computed ' + this.msg}// method方法能够声明成类方法形式greet () {alert('greeting: ' + this.msg)}
}
</script>
复制代码

createDecorator

createDecorator能够自定义装饰器,须要接受一个回调函数做为第一个参数,包括如下几个参数github

options:对象参数, key ,paramsIndex
// decorators.js
import { createDecorator } from 'vue-class-component'export const NoCache = createDecorator((options, key) => {// component options should be passed to the callback// and update for the options object affect the componentoptions.computed[key].cache = false
})
import { NoCache } from './decorators'@Component
class MyComp extends Vue {// computed属性不会再被缓存@NoCacheget random () {return Math.random()}
}
复制代码
Component.registerHooks

自定义钩子vue-router

// class-component-hooks.js
import Component from 'vue-class-component'// 注册钩子name
Component.registerHooks(['beforeRouteEnter','beforeRouteLeave','beforeRouteUpdate' // for vue-router 2.2+
])
// MyComp.js
import Vue from 'vue'
import Component from 'vue-class-component'@Component
class MyComp extends Vue {beforeRouteEnter (to, from, next) {console.log('beforeRouteEnter')next() // needs to be called to confirm the navigation}beforeRouteLeave (to, from, next) {console.log('beforeRouteLeave')next() // needs to be called to confirm the navigation}
}
复制代码

箭头函数

this为undefined, 本来使用箭头函数的this实际上指向的是vue实例, 可是将箭头函数定义为类属性并在其中访问它,则它将不起做用,this指向的是vue实例的代理typescript

@Component
class MyComp extends Vue {foo = 123bar = () => {this.foo = 456}
}

只要将函数定义为方法,就会自动生成vue实例缓存

@Component
class MyComp extends Vue {foo = 123bar () {// Correctly update the expected property.this.foo = 456}
}
类属性的undefined没有作出处理

对于一些属性的初始值应该用null或者data钩子进行处理bash

@Component
class MyComp extends Vue {// 不会进行处理foo = undefined// 会进行处理bar = nulldata () {return {// 会进行处理baz: undefined}}
}

vue-property-decorator

这个组件完全依赖于vue-class-component.它具备以下几个属性:

  • @Component (完全继承于vue-class-component)
  • @Emit
  • @Inject
  • @Provice
  • @Prop
  • @Watch
  • @Model
  • Mixins (在vue-class-component中定义);

使用

当我们在vue单文件中使用TypeScript时,引入vue-property-decorator之后,script中的标签就变为这样:

<script lang="ts">import {Vue, Component} from 'vue-property-decorator';@Component({})export default class "组件名" extends Vue{ValA: string = "hello world";ValB: number = 1;}
</script>

等同于

<script lang="es6">import Vue from 'vue';export default {data(){return {ValA: 'hello world',ValB: 1}}}
</script>
  • 总结: 对于data里的变量对顶,我们可以直接按ts定义类变量的写法写就可以

那么如果是计算属性呢? 这就要用到getter了.

 

<script lang="ts">import {Vue, Component} from 'vue-property-decorator';@Component({})export default class "组件名" extends Vue{get ValA(){return 1;}}
</script>

等同于

<script lang="es6">import Vue from 'vue';export default {computed: {ValA: function() {return 1;}}}
</script>

 

  • 总结: 对于Vue中的计算属性,我们只需要将该计算属性名定义为一个函数,并在函数前加上get关键字即可.

原本Vue中的computed里的每个计算属性都变成了在前缀添加get的函数.


@Emit

关于Vue中的事件的监听与触发,Vue提供了两个函数$emit$on.那么在vue-property-decorator中如何使用呢?
这就需要用到vue-property-decorator提供的@Emit属性.

<script lang="ts">import {Vue, Component, Emit} from 'vue-property-decorator';@Component({})export default class "组件名" extends Vue{mounted(){this.$on('emit-todo', function(n) {console.log(n)})this.emitTodo('world');}@Emit()emitTodo(n: string){console.log('hello');}}
</script>

运行上面的代码会打印 'hello' 'world', 为什么呢? 让我们来看看它等同于什么

<script lang="es6">import Vue from 'vue';export default {mounted(){this.$on('emit-todo', function(n) {console.log(n)})this.emitTodo('world');},methods: {emitTodo(n){console.log('hello');this.$emit('emit-todo', n);}}}
</script>

可以看到,在@Emit装饰器的函数会在运行之后触发等同于其函数名(驼峰式会转为横杠式写法)的事件, 并将其函数传递给$emit.
如果我们想触发特定的事件呢,比如在emitTodo下触发reset事件:

<script lang="ts">import {Vue, Component, Emit} from 'vue-property-decorator';@Component({})export default class "组件名" extends Vue{@Emit('reset')emitTodo(n: string){}}
</script>

 

我们只需要给装饰器@Emit传递一个事件名参数reset,这样函数emitTodo运行之后就会触发reset事件.

  • 总结:在Vue中我们是使用$emit触发事件,使用vue-property-decorator时,可以借助@Emit装饰器来实现.@Emit修饰的函数所接受的参数会在运行之后触发事件的时候传递过去.
    @Emit触发事件有两种写法
  1. @Emit()不传参数,那么它触发的事件名就是它所修饰的函数名.
  2. @Emit(name: string),里面传递一个字符串,该字符串为要触发的事件名.

@Watch

我们可以利用vue-property-decorator提供的@Watch装饰器来替换Vue中的watch属性,以此来监听值的变化.

Vue中监听器的使用如下:

export default{watch: {'child': this.onChangeValue// 这种写法默认 `immediate`和`deep`为`false`,'person': {handler: 'onChangeValue',immediate: true,deep: true}},methods: {onChangeValue(newVal, oldVal){// todo...}}
}

那么我们如何使用@Watch装饰器来改造它呢? 

import {Vue, Component, Watch} from 'vue-property-decorator';@Watch('child')
onChangeValue(newVal: string, oldVal: string){// todo...
}@Watch('person', {immediate: true, deep: true})
onChangeValue(newVal: Person, oldVal: Person){// todo...
}
  • 总结: @Watch使用非常简单,接受第一个参数为要监听的属性名 第二个属性为可选对象.@Watch所装饰的函数即监听到属性变化之后的操作.

@Prop

我们在使用Vue时有时会遇到子组件接收父组件传递来的参数.我们需要定义Prop属性.

比如子组件从父组件接收三个属性propA,propB,propC.

  • propA类型为Number
  • propB默认值为default value
  • propC类型为String或者Boolean

 

export default {props: {propA: {type: Number},propB: {default: 'default value'},propC: {type: [String, Boolean]},}
}

我们使用vue-property-decorator提供的@Prop可以将上面的代码改造为如下: 

 

<script lang="ts">import {Vue, Component, Prop} from 'vue-property-decorator';@Component({})export default class "组件名" extends Vue{@Prop(Number) propA!: number;@Prop({default: 'default value'}) propB!: string;@propC([String, Boolean]) propC: string | boolean;}
</script>

这里 !和可选参数?是相反的, !告诉TypeScript我这里一定有值.

  • 总结: @Prop接受一个参数可以是类型变量或者对象或者数组.@Prop接受的类型比如NumberJavaScript的类型,之后定义的属性类型则是TypeScript的类型.

Mixins

在使用Vue进行开发时我们经常要用到混合,结合TypeScript之后我们有两种mixins的方法.

一种是vue-class-component提供的.

//定义要混合的类 mixins.ts
import Vue from 'vue';
import  Component  from 'vue-class-component';@Component  // 一定要用Component修饰
export default class myMixins extends Vue {value: string = "Hello"
}
// 引入
import  Component  {mixins}  from 'vue-class-component';
import myMixins from 'mixins.ts';@Component
export class myComponent extends mixins(myMixins) {// 直接extends myMinxins 也可以正常运行created(){console.log(this.value) // => Hello}
}

第二种方式是在@Component中混入.

我们改造一下mixins.ts,定义vue/type/vue模块,实现Vue接口

// mixins.ts
import { Vue, Component } from 'vue-property-decorator';declare module 'vue/types/vue' {interface Vue {value: string;}
}@Component
export default class myMixins extends Vue {value: string = 'Hello'
}

混入 

import { Vue, Component, Prop } from 'vue-property-decorator';
import myMixins from '@static/js/mixins';@Component({mixins: [myMixins]
})
export default class myComponent extends Vue{created(){console.log(this.value) // => Hello}
}
  • 总结: 两种方式不同的是在定义mixins时如果没有定义vue/type/vue模块, 那么在混入的时候就要继承mixins; 如果定义vue/type/vue模块,在混入时可以在@Componentmixins直接混入.

@Model

Vue组件提供model: {prop?: string, event?: string}让我们可以定制propevent.
默认情况下,一个组件上的v-model 会把 value用作 prop且把 input用作 event,但是一些输入类型比如单选框和复选框按钮可能想使用 value prop来达到不同的目的。使用model选项可以回避这些情况产生的冲突。

  • 下面是Vue官网的例子
Vue.component('my-checkbox', {model: {prop: 'checked',event: 'change'},props: {// this allows using the `value` prop for a different purposevalue: String,// use `checked` as the prop which take the place of `value`checked: {type: Number,default: 0}},// ...
})
<my-checkbox v-model="foo" value="some value"></my-checkbox>

上述代码相当于:

<my-checkbox:checked="foo"@change="val => { foo = val }"value="some value">
</my-checkbox>

foo双向绑定的是组件的checke, 触发双向绑定数值的事件是change

使用vue-property-decorator提供的@Model改造上面的例子.

import { Vue, Component, Model} from 'vue-property-decorator';@Component
export class myCheck extends Vue{@Model ('change', {type: Boolean})  checked!: boolean;
}

总结, @Model()接收两个参数, 第一个是event值, 第二个是prop的类型说明, 与@Prop类似, 这里的类型要用JS的. 后面在接着是prop和在TS下的类型说明. 

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

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

相关文章

大白话介绍循环神经网络

循环神经网络实质为递归式的网络&#xff0c;它在处理时序任务表现出优良的效果&#xff0c;毕竟递归本来就是一步套一步的向下进行&#xff0c;而自然语言处理任务中涉及的文本天然满足这种时序性&#xff0c;比如我们写字就是从左到右一步步来的鸭&#xff0c;刚接触深度学习…

基于hadoop+spark的大规模日志的一种处理方案

概述: CDN服务平台上有为客户提供访问日志下载的功能,主要是为了满足在给CDN客户提供服务的过程中,要对所有的记录访问日志,按照客户定制的格式化需求以小时为粒度(或者其他任意时间粒度)进行排序、压缩、打包,供客户进行下载,以便进行后续的核对和分析的诉求。而且CDN…

xlsx xlsx-style 使用和坑记录

1 安装之后报错 npm install xlsx --savenpm install xlsx-style --save Umi运行会报错 自己代码 import XLSX from "xlsx"; import XLSXStyle from "xlsx-style";const data [["demo1","demo2","demo3","demo4&quo…

好烦,怎么输入拼音的过程也会触发input事件!!!

说在前面 &#x1f388;input输入框大家应该都很熟悉了吧&#xff0c;不知道大家有没有遇到过这样的一种情况&#xff1a;如上图&#xff0c;在中文输入过程中&#xff0c;输入的拼音也会触发input框的input事件&#xff0c;有些时候我们并不希望在中文输入的过程中拼音触发inp…

基于OpenCV灰度图像转GCode的双向扫描实现

基于OpenCV灰度图像转GCode的双向扫描实现 引言激光雕刻简介OpenCV简介实现步骤 1.导入必要的库2. 读取灰度图像3. 图像预处理4. 生成GCode 1. 简化版的双向扫描2. 优化版的双向扫描 5. 保存生成的GCode6. 灰度图像双向扫描代码示例 总结 系列文章 ⭐深入理解G0和G1指令&…

292.Nim游戏

桌子上有一堆石头。 轮流进行自己的回合&#xff0c; 你作为先手 。 每一回合&#xff0c;轮到的人拿掉 1 - 3 块石头。 拿掉最后一块石头的人就是获胜者。 假设你们每一步都是最优解。请编写一个函数&#xff0c;来判断你是否可以在给定石头数量为 n 的情况下赢得游戏。如果可…

Matomo 访问图形显示异常

近期我们的把 PHP 系统完全升级后&#xff0c;访问 Matomo 的站点有关访问的曲线无法显示。 出现的情况如下图&#xff1a; 我们可以看到图片中有关的访问曲线无法显示。 如果具体直接访问链接的话&#xff0c;会有下面的错误信息。 问题和解决 出现上面问题的原因是缺少 ph…

在WebGL中创建动画

前言 在搭建WebGL开发环境中介绍了如何开始使用webgl进行绘制。 本篇文章介绍如何在WebGL中创建动画 动画的定义 动画是一种通过快速显示一系列图像(或帧)模拟运动的技术。 动画的分类 网页上的动画基本分为三类&#xff1a; 声明式动画&#xff0c;如CSS动画和SVG动画&a…

我的创作128纪念日

机缘 起初我写博客是为了记录自己的学习过程,现在也是如此 实战项目中的经验分享日常学习过程中的记录通过文章进行技术交流通过文章加深学习和复习 收获 在创作过程中 获得了400多位粉丝的关注感谢大家的支持阅读数量也达到了3w在博客上认识仲秋大佬,感谢大佬对我的指导,我…

成都软件产业优势明显

是的&#xff0c;成都非常适合软件产业的发展。以下是一些原因&#xff1a; 人才储备丰富&#xff1a;成都拥有众多高等院校和科研机构&#xff0c;为软件产业提供了丰富的人才储备。这些机构培养了大量的软件人才&#xff0c;为成都软件产业的发展提供了有力支持。政策支持&a…

C# 继承的详细介绍和使用

文章目录 前言一、C# 继承的概念&#xff1a;二、继承的基本使用方法三、继承在项目中的具体应用示例四、继承的类型1.公有继承&#xff08;Public Inheritance&#xff09;&#xff1a;2.保护继承&#xff08;Protected Inheritance&#xff09;&#xff1a;3.私有继承&#x…

Java实现康复中心管理系统 JAVA+Vue+SpringBoot+MySQL

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 普通用户模块2.2 护工模块2.3 管理员模块 三、系统展示四、核心代码4.1 查询康复护理4.2 新增康复训练4.3 查询房间4.4 查询来访4.5 新增用药 五、免责说明 一、摘要 1.1 项目介绍 基于JAVAVueSpringBootMySQL的康复中…

Intellij IDEA各种调试+开发中常见bug

Intellij IDEA中使用好Debug&#xff0c;主要包括如下内容&#xff1a; 一、Debug开篇 ①、以Debug模式启动服务&#xff0c;左边的一个按钮则是以Run模式启动。在开发中&#xff0c;我一般会直接启动Debug模式&#xff0c;方便随时调试代码。 ②、断点&#xff1a;在左边行…

如何在 Microsoft Azure 上部署和管理 Elastic Stack

作者&#xff1a;来自 Elastic Osman Ishaq Elastic 用户可以从 Azure 门户中查找、部署和管理 Elasticsearch。 此集成提供了简化的入门体验&#xff0c;所有这些都使用你已知的 Azure 门户和工具&#xff0c;因此你可以轻松部署 Elastic&#xff0c;而无需注册外部服务或配置…

C语言基础(五)——联合

联合 引言联合的声明联合的声明typedef命名联合 设置联合的值C89&#xff08;标准&#xff09;方式使用.操作符进行指定初始化 联合的内存布局联合的使用场景节省内存资源实际应用案例分析 总结 引言 在学习C语言基础时&#xff0c;联合和结构体是两个经常被拿来比较的概念。虽…

NuxtJs安装Sass后出现ERROR:Cannot find module ‘webpack/lib/RuleSet‘

最近了解NuxtJs时&#xff0c;发现问题比较多&#xff0c;对于初学者来说是件比较头痛的事。这次是安装sass预处理器&#xff0c;通过命令安装后&#xff0c;出现了ERROR&#xff1a;Cannot find module webpack/lib/RuleSet 错误&#xff0c;于是根据之前经验&#xff0c;对版…

Python统计分析——参数估计

参考资料&#xff1a;用python动手学统计学 所谓参数就是总体分布的参数。 1、导入库 # 导入用于数值计算的库 import numpy as np import pandas as pd import scipy as sp from scipy import stats # 导入用于绘图的库 from matplotlib import pyplot as plt import seabor…

vue前端+nodejs后端通信-简单demo

本文记录vue前端nodejs后端通讯最简单的方法&#xff0c;供广大网友最快速进入全栈开发。 技术架构 前端 vue axios 后端 nodejs express 一、前端部分-搭建VUE 项目 vue create Vnodenpm run serve 启动&#xff1b; 具体操作步骤&#xff0c;请自行百度&#xff0c;这里没…

minitouch王者荣耀按键百分比

minitouch王者荣耀按键百分比 3 技能英雄 原图 2376 x 1104 xy说明x百分比y百分比23761104总分辨率160444金币0.0673400673400670.402173913043478296440物品10.1245791245791250.398550724637681296566物品20.1245791245791250.51268115942029470864摇杆0.1978114478114480…

51单片机之LED灯模块篇

御风以翔 破浪以飏 &#x1f3a5;个人主页 &#x1f525;个人专栏 目录 点亮一盏LED灯 LED的组成原理 LED的硬件模型 点亮一盏LED灯的程序设计 LED灯闪烁 LED流水灯 独立按键控制LED灯亮灭 独立按键的组成原理 独立按键的硬件模型 独立按键控制LED灯状态 按键的抖动 独立按键…