Use TSX in Vue3

Vue3-tsx-demo

Introduction

vue3 will be officially launched soon, and now the beta version has been launched, and the corresponding project progress address can be clearly viewed on github

This time just try the programming experience of Vue3+Typescript+vite.

Create a vite project

I have tried to use Vue-CLI to create a project before, and then use vue-cli-plugin-vue-next , the created project uses ts and eslint, the experience effect is not particularly ideal, so I use vite to create a new project.

Thanks to vite for providing scaffolding out of the box

Scaffolding dependencies need to be installed before create

npm  install -g create-vite-app
## 或
yarn add -g create-vite-app
$ yarn create vite-app <project-name>
$ cd <project-name>
$ yarn
$ yarn dev

If you use npm, the github document also has an introduction to easily create a new vite project. If you want to experience the new features of vite, you can directly clone the master branch of the vite project and then

yarn
yarn build
yarn link

Project basic configuration

First add typescript module, eslint, pritter module to the project.

yarn add --dev typescript
yarn add eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin --dev

yarn add -D eslint eslint-plugin-vue@next

Configuring eslint refers to Using ESLint and Prettier in a TypeScript Project , eslint-plugin-vue basically follows the tutorial step by step, and many errors have been reported in the middle. Checking the documentation step by step solves those problems.

TSX rough experience

Although I haven’t written business react code, it’s a good programming experience to use tsx for the first time. Auto import, excellent code hints, including sufficiently simple component code, are all different usage habits from writing templates. .

Here are a few relatively simple use cases, such as passing props, click accumulator, computed double and other use cases. To say that there is something unaccustomed to, or the template used too much before, I always wanted to use double brackets to wrap the data, and some vue-specific attrs became unavailable without the template compilation link.

import { defineComponent } from 'vue';
export default defineComponent({
  name: 'Title',
  props: {
    name: {
      type: String,
      required: true,
    },
  },
  setup(props) {
    return () => <h1>{props.name}</h1>;
  },
});
import { defineComponent, computed, ref } from "vue";

export  default  defineComponent ( { 
    // A simple accumulator 
    name : 'Add' , 
    setup ( )  { 
        const  times  =  ref ( 0 ) 
        // use computed 
        const  doubleTimes  =  computed ( ( )  =>  {  return  times . value * 2  } ) 
        return  ( )  =>  < div > 
            < h2 > +1S < / h2>
            <button onClick={() => { times.value++ }}>Times+1</button>
            <div>{times.value}</div>
            <div>{doubleTimes.value}</div></div>
    }
})

Deep practice

Here is the use case of the comment app in the React small book by Huo Daha to see the difference between the writing of Vue3+TSX and react. The small React book directly uses the comment component structure of the actual combat use case to try to reproduce one React comments to achieve its components by vue3. according to the original structure is divided into, Comment, CommentApp, CommentInput, CommentListthese modules and the data processing method will mainly be placed CommentAppwithin the module.

Import  {  defineComponent ,  reactive  }  from  'VUE' ; 
Import  ComentInput  from  './CommentInput' ; 
Import  CommentList  from  './CommentList' ; 
Export  default  defineComponent ( { 
  name : 'CommentApp' , 
  Setup ( )  { 
    // reactive with the object to be packaged Make it responsive 
    const  commentDataList  =  reactive ( [ 
      {  username : 'Jerry' ,  content :'Hello'  } , 
      {  username : 'Tomy' ,  content : 'World'  } , 
      {  username : 'Lucy' ,  content : 'Good'  } , 
    ] ) ; 
    // Because I don't know how to receive the emit information in the parent component, so Use the transfer function props, 
    // handle comment adding information 
    function  handlePushComment ( data )  { 
      console . Log ( data ) ; 
      commentDataList . Push ( data ) ; 
    }
    return () => (
      <div class="wrapper">
        <ComentInput submitComment={handlePushComment} />
        <CommentList comments={commentDataList} />
      </div>
    );
  },
});

It is written that you have to check the JSX methods in react. It can be regarded as a practice of learning the use of react in Vue.

to sum up

At present, this project is still relatively rudimentary, and it is not considered suitable for use in the production environment. For example, vue-router-next and vuex and css modules have not been put into this practice. I will continue to improve this project in the future.

reference

Download Details:

Author: hyperMoss

Source Code: https://github.com/hyperMoss/vue-tsx

#vuejs #vue #javascript