I. Design objectives of Vue3.0

  • Smaller/Faster – Vue 3.0 has roughly halved in size to just 10kB
  • Enhance TypeScript support
  • Enhance API design consistency – easy to read
  • Improve their maintainability
  • Open up more low-level functionality

Vue3. X uses function-based API to organize code, making it easier and more efficient to compress code. Due to the modification of component declaration, logic is completed in the way of Function composition, which naturally integrates with typescript. (Components in vue2.x pass in a set of options declaratively, so using typeScript in 2.x requires a decorator called vue-class-component.)

/ / vue2. X to use ts need such processing, see the official document for https://cn.vuejs.org/v2/guide/typescript.html < script lang = "ts" > import Vue from 'Vue' import Component from 'vue-class-component' @Component export default class App extends Vue {} </script>Copy the code

What’s good about typescript

1. Increase code readability and maintainability

  • Most functions know what they do by looking at their type definitions
  • Static type checking to reduce runtime errors

2. The community is active and all the cattle are using it

  • With the vue3 boom, typescript will go mainstream in the future. Learn

Build vue3.x + typescript + vuue – Router environment

1, global installation vuE-CLI

npm install -g @vue/cli
Copy the code

2. Initialize vUE project

vue create vue-next-project
Copy the code

After typing the command here, you need to select Manually select features, or at least select the Babel typescript router (vuex depends on whether you need it). The diagram below:

Not clear vuE-CLI can refer to the article

3. Upgrade to vuE3. X project

cd vue-next-project
vue add vue-next
Copy the code

This command will automatically upgrade vue2.x to vue3.x, including dependencies in the project and template code replacement, such as vue-router vuex

The tsconfig.json configuration file can be configured according to your own and project needs.

The next step is to make it easy to support typescript. (Template CLI hasn’t perfected typescript template code yet)

  • willshims-vue.d.tsModify the contents of the file, this step should be fewer errors.
// declare module "*.vue" {
//   import Vue from 'vue';
//   export default Vue;
// }
declare module "*.vue" {
    import {defineComponent} from 'vue'
    const Component: ReturnType<typeof defineComponent>;
    export default Component
}
Copy the code
  • Use requirements declaration in componentscript lang="ts"And then usedefineComponent Just wrap it up.
<script lang="ts"> import { defineComponent, ref, onMounted, onUpdated, onUnmounted, } from "vue"; export default defineComponent({ name: "hello world", props: {}, setup(props: any) { const count = ref(0); const increase = (): void => { count.value++; }; function test(x: number): string { return props.toString(); } test(1); // test('number'); OnMounted (() => {console.log("mounted vue3 typescript"); }); onUpdated(() => { console.log("updated vue3 typescript"); }); onUnmounted(() => { console.log("onUnmounted vue3 typescript"); }); Return {count, increase}; }}); </script>Copy the code

Life cycle correspondence

Attached are the official tips for learning Vue-Next and typescript

  • composition-api
  • typescript
  • Typescript tutorial

5. If you don’t want to build, you can also pull the Github demo directly

Vue3 + typescript environment

Other type articles