Typescript 을 사용 하여 Vue 구성 요 소 를 패키지 합 니 다.

1.프로젝트 구축 및 설정 초기 화

vue create ts_vue_btn

여 기 는vue CLI3사용자 정의 선택 서 비 스 를 사 용 했 고 저 는ts、stylus등 도 구 를 선 택 했 습 니 다.그리고 프로젝트 를 만 든 후에 프로젝트 에 들 어 갑 니 다.Vs code 편집기 에 단축 명령code .을 사용 하여 들 어 갑 니 다.code .없 으 면 편집기 의 bin 파일 디 렉 터 리 주 소 를 환경 변수의path에 넣 어야 합 니 다.그리고 편집기 에 들 어간 후에 설정 작업 영역 에 들 어가 서 인 자 를 마음대로 설정 합 니 다.예 를 들 어 글꼴 설정 을 추천 하고 누 르 십시오.여 기 는.vscode폴 더 를 만 들 기 위해 서 입 니 다.안에json파일 이 있 습 니 다.

우리 가 프로젝트 를 개발 할 때 프로젝트 폴 더 안의 파일 이 매우 많 고 시각 에 영향 을 줄 수 있다.그러면 이 파일 은 어떤 파일 을 숨 기 는 지 설정 하 는 것 입 니 다.삭제 하 는 것 이 아니 라 숨 기 는 것 입 니 다!다음은 제 가 직접 쓴 것 입 니 다.Vue cli 3 에서 생 성 된 항목 에 숨겨 야 할 파일 인자 입 니 다.

{
  "files.exclude": {
    "**/.git": true,
    "**/.svn": true,
    "**/.hg": true,
    "**/CVS": true,
    "**/.DS_Store": true,
    "**/README.md": true,
    "**/node_modules":true,
    "**/shims-tsx.d.ts": true,
    "**/shims-vue.d.ts": true,
    "**/.browserslistrc": true,
    ".eslintrc.js": true,
    "babel.config.js": true,
    "package-lock.json": true,
    ".gitignore": true,
    "tsconfig.json": true
  }
}

다음은 보 이 는 파일 디 렉 터 리 입 니 다.중요 하지 않 은 파일 과 폴 더 를 숨 기거 나 삭제 한 후에 보 았 습 니 다.

파일 판독(위 에서 아래로):
폴 더 또는 파일
하위 폴 더 나 파일 포함
속뜻
.vscode
settings.json
파일 설정 숨 기기
public
index.html、favicon.ico
정적 파일 저장 소
src
components 폴 더(구성 요소 저장),App.vue,Home.vue,main.js
항목 주요 폴 더
package.json
없다
프로젝트 의존 매개 변수 등
2.개발 실천
다음 그림 은 만 들 프로젝트 파일 디 렉 터 리 입 니 다.Vue 단추 구성 요 소 를 개발 합 니 다.

아래 그림 에서 보 듯 이 이것 이 바로 우리 가 개발 해 야 할 구성 요소 이다.

편집 시작:
1、App.vue

<template>
 <div id="app">
  <Home></Home> 
 </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';//                     
import Home from "@/Home.vue"; //       

//         Component   ，            ，          ，    components  ，        
@Component({
 components:{
  Home
 }
})
export default class App extends Vue {}
</script>

<style lang="stylus">

</style>

2、UIBtn.vue

<template>
 <!-- v-on="$listeners"     ，       ，       ，    $emit(),          -->
 <button
  class="ui-btn"
  @click="onBtnclick('success!')"
  :class="{
  'ui-btn-xsmall':xsmall,
  'ui-btn-small':small,
  'ui-btn-large':large,
  'ui-btn-xlarge':xlarge
 }"
 >
  <slot>Button</slot>
 </button>
</template>

<script lang="ts">
import { Component, Vue, Emit, Prop } from "vue-property-decorator"; //                     
@Component
export default class UIBtn extends Vue {
 @Prop(Boolean) private xsmall: boolean | undefined;
 @Prop(Boolean) private small: boolean | undefined;
 @Prop(Boolean) private large: boolean | undefined;
 @Prop(Boolean) private xlarge: boolean | undefined;
 // eslint-disable-next-line @typescript-eslint/no-empty-function
 @Emit("click") private emitclick(x: string) {}
 private mounted() {
  console.log(this.large);
 }
 private onBtnclick(x: string) {
  this.emitclick(x);
 }
}
</script>

<style scoped lang="stylus" >
resize(a, b, c) 
 padding a b 
 font-size c
.ui-btn 
 resize(12px, 20px, 14px)
 border 0 solid #000
 border-radius 4px
 outline none
 font-weight 500;
 letter-spacing 0.09em
 background-color #409eff
 color #fff
 cursor pointer
 user-select none
 &:hover
  filter brightness(120%)
 &:active
  filter brightness(80%)
 &.ui-btn-xsmall 
  resize(5px, 15px, 14px)
 &.ui-btn-small 
  resize(8px, 18px, 14px)
 &.ui-btn-large 
  resize(14px, 22px, 14px)
 &.ui-btn-xlarge 
  resize(16px, 24px, 14px)
</style>

3、Home.vue

<template>
 <div class="home-con">
   <div class="btn-group">
      <UIBtn class="btn" @click="resize('xsmall')">  </UIBtn>
      <UIBtn class="btn" @click="resize('small')"> </UIBtn>
      <UIBtn class="btn" @click="resize('normal')">  </UIBtn>
      <UIBtn class="btn" @click="resize('large')"> </UIBtn>
      <UIBtn class="btn" @click="resize('xlarge')">  </UIBtn>
   </div>
   <div class="btn-con">
      <UIBtn @click='onClick' 
      :xlarge="xlarge"
      :large="large"
      :small="small"
      :xsmall="xsmall"
      >    </UIBtn>
   </div>
   <div class="btn-pro">
      <UIBtn large >    </UIBtn>
   </div>  
 </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'; //                     
import UIBtn from '@/components/UIBtn.vue';
@Component({
  components:{
   UIBtn
  }
})
export default class Home extends Vue {
  // eslint-disable-next-line @typescript-eslint/no-inferrable-types
  private xlarge: boolean = false;
  // eslint-disable-next-line @typescript-eslint/no-inferrable-types
  private large: boolean = false;
  // eslint-disable-next-line @typescript-eslint/no-inferrable-types
  private xsmall: boolean = false;
  // eslint-disable-next-line @typescript-eslint/no-inferrable-types
  private small: boolean = false;
  private resize (name: string){
    console.log(name)
    switch (name) {
      case 'xsmall':
        this.xsmall=true;
        this.small=false;
        this.large=false;
        this.xlarge=false;
        break;
      case 'small':
        this.xsmall=false;
        this.small=true;
        this.large=false;
        this.xlarge=false;
        break;
      case 'normal':
        this.xsmall=false;
        this.small=false;
        this.large=false;
        this.xlarge=false;
        break;
      case 'large':
        this.xsmall=false;
        this.small=false;
        this.large=true;
        this.xlarge=false;
        break;
      case 'xlarge':
        this.xsmall=false;
        this.small=false;
        this.large=false;
        this.xlarge=true;
        break;
    }
  }
  private onClick(x: string) {
    console.log(x)
  }
}
</script>

<style lang="stylus" scoped>
.btn-group
  margin 50px 0
.btn
  margin 6px
.btn-pro
  margin-top 50px 
</style>

이 글 은 Typescript 을 사용 하여 Vue 구성 요 소 를 패키지 하 는 것 에 관 한 글 을 소개 합 니 다.더 많은 Typescript 패키지 Vue 구성 요소 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 많은 지원 을 바 랍 니 다!