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.
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
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.
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>
}
})
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
, CommentList
these modules and the data processing method will mainly be placed CommentApp
within 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.
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.
Author: hyperMoss
Source Code: https://github.com/hyperMoss/vue-tsx
#vuejs #vue #javascript