First, build the project and initial configuration

vue create ts_vue_btn
Copy the code

Here we usevue CLI3Custom service selection, I choseTs, stylusSuch tools. Then, after creating the project, enter the project. Using shortcut Commandscode .Enter the Vs Code editor (if notcode ., need to put the editorBin File directory addressPut it in an environment variablepath). Then, after I go to the editor, I go to the Settings workspace and set a random parameter, such as the recommended size, click below. This is to generate.vscodeThe folder. There’s ajsonFile.

When we were developing a project, there were a lot of files in the project folder, which sometimes affected the vision. So this file is set to what file hide, notice only hide, not delete! The following is a file parameter that I wrote myself in Vue CLI3 to generate a project that needs to be hidden.

{
    "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}}Copy the code

Here is what I see after I hide or delete some irrelevant files and folders.Document Interpretation (from top down) :

Folders or files Contains subfolders or files meaning
.vscode settings.json Hide file Settings
public Index.html, favicon. Ico Static file storage
src Components folder, app.vue, home.vue, main.js Project main folder
package.json There is no Project dependency parameters, etc
Second, development practice
Below is the project file directory that needs to be created. Here we develop a Vue button component.
As shown in the picture below, this is what we’re going to useTypescriptDeveloped components.
* * * * *
##### Start editing:
1, App. Vue
<template>
  <div id="app">
   <Home></Home> 
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';// Some of the classes or decorators needed to write class-style components
import Home from "@/Home.vue"; // Import page components

// We need to use the Component decorator. This decorator is used to register components. The parameter inside is an object with a Component property value of the imported Component name
@Component({
  components:{
    Home
  }
})
export default class App extends Vue {}
</script>

<style lang="stylus">

</style>

Copy the code
2, UIBtn. Vue
<template>
  <! -- Listeners can use $listeners on this class, but don't use $listeners () on other sites -->
  <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"; // Some of the classes or decorators needed to write class-style components
@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.09 em
  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>
Copy the code
3, Home. Vue
<template>
  <div class="home-con">
      <div class="btn-group">
           <UIBtn class="btn" @click="resize('xsmall')">Super small</UIBtn>
           <UIBtn class="btn" @click="resize('small')">small</UIBtn>
           <UIBtn class="btn" @click="resize('normal')">normal</UIBtn>
           <UIBtn class="btn" @click="resize('large')">big</UIBtn>
           <UIBtn class="btn" @click="resize('xlarge')">Very large</UIBtn>
      </div>
      <div class="btn-con">
           <UIBtn @click='onClick' 
           :xlarge="xlarge"
           :large="large"
           :small="small"
           :xsmall="xsmall"
           >The main button</UIBtn>
      </div>
      <div class="btn-pro">
            <UIBtn large >Style button</UIBtn>
      </div>    
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'; // Some of the classes or decorators needed to write class-style components
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>
Copy the code

Welcome to pay attention to my public account “front-end history robbery Road”

​

Reply keyword e-books, you can get nearly 12 front-end popular e-books.

​

Reply keywords little Red Book 4th edition, you can get the latest “JavaScript advanced Programming” (4th edition) ebook.

​

You can also add me to wechat. I have wooed many IT bigwigs and created a technical exchange and article sharing group. Welcome to join.

​

  • Author: Vam’s Golden Bean Road

  • Main area: front-end development

  • My wechat account is Maomin9761

  • Wechat public number: the front end of the road through robbery

​