preface

Although it has been 2021.7 months, but there is still no project using vuE3 + VitE2. So Vue3 + SSR + Vite promised project actual combat can only be postponed.

I wanted to write this post because I’m not so good at Vue3+Vite2+Typesctripts (major corporate projects don’t use these things). So look out for yourself and fill in the gaps.

The main content

  1. Build vuE3 + VITE2 + TS project
  2. Vue3 Composition API in various ways
  3. Vue3 Life cycle display
  4. Integrate vuex@4 and vue-router@4
  5. Integrated axios
  6. . (If you think of anything you want to know, please leave a comment and I will update it in a follow-up article.)

Project structures,

You can refer to the official Vite documentation

Since WE are going to use TS in our project, we use the template vuE-TS

npm init vite@latest my-vue-app --template vue-ts
Copy the code

After the command is executed, we enter the project CD my-vue-app and execute NPM I && NPM run dev. Then open the browser and enter http://localhost:3000/ in the URL to see the effect

Composition API demo of various writing methods

We use vscode to open the project, which can be seen when we open SRC/app.vue

<script lang="ts">
import { defineComponent } from 'vue'
import HelloWorld from './components/HelloWorld.vue'

export default defineComponent({
  name: 'App'.components: {
    HelloWorld
  }
})
</script>
Copy the code

Actually, this is vue2 but vue3 is compatible. Next, change it to vue3 setup

<script lang="ts" setup>
import HelloWorld from './components/HelloWorld.vue'
</script>
Copy the code

There’s a lot less code, but the project still runs without errors. If you are careful, you may notice that the field name: ‘App’ is missing. This is the catch. Some custom components and other fields can only be written using export Default defineComponent({})

Then open the SRC/components/HelloWorld. Vue

<script lang="ts">
import { ref, defineComponent } from 'vue'
export default defineComponent({
  name: 'HelloWorld'.props: {
    msg: {
      type: String.required: true}},setup: () = > {
    const count = ref(0)
    return { count }
  }
})
</script>
Copy the code

After transforming

<script lang="ts" setup>
import { ref, defineProps } from "vue";
defineProps({
  msg: {
    type: String.required: true,}});const count = ref(0);
</script>
Copy the code

There are two more things we haven’t seen in VUe2 ref defineProps

props

Defineprops is supposed to be props, ref is supposed to be data.

Let’s start with a couple of other uses of defineprops

<script setup lang="ts">
import { ref, defineProps } from "vue";
type Props = {
  msg: String
}
defineProps<Props>()
const count = ref(0);
</script>
Copy the code

There should be another one, but this will run in error

<script setup="props" lang="ts">
import { ref, toRefs, defineComponent } from "vue";
const { msg } = toRefs(props)
const count = ref(0);
</script>

<script lang="ts">
import { ref, toRefs, defineComponent } from "vue";
// This is not a problem
export default defineComponent( {
  props: {
    msg: String
  },
  setup(props: any) { // This should be (props: props), but the props can't be referenced
    const {msg} = toRefs(props);
    
    const count = ref(0);
    return {msg, count}
  },
});
</script>
Copy the code

Ref, toRef, toRefs, reactive

So let’s start by looking at the ways in which ref and reactive are written

<template>
  <h1>{{ msg }}</h1>
  <p>{{ state.msg }}</p>
  <div v-for="item in list" :key="item.msg">
    {{ item.msg }}
  </div>
  <button type="button" @click="handleClick">count is: {{ count }}</button>
</template>
<script setup lang="ts">
import { ref, defineProps } from "vue";
type Props = {
  msg: String;
};
defineProps<Props>();
const count = ref(0);
const state = ref<Props>({ msg: "123" });
const list = ref<Props[]>();
console.log(count.value);
console.log(count);
list.value = [
  { msg: "item 1" },
  { msg: "item 2" },
  { msg: "item 3" },
  { msg: "item 4"},];const handleClick = () = > {
  count.value++;
};
</script>
Copy the code

In
you have to go through count.value to access the count variable. In
you don’t

So let’s look at reactive toRef toRefs in a few ways

<template>
  <div>
    <div v-for="item in data1.todoList" :key="item.id">
      {{ item }}
    </div>
    <button type="button" @click="handleClick">
      count is: {{ data2.count }} double count is: {{ data2.double }}
    </button>
    <p>tempCount is {{ tempCount }}</p>
    <p>count is {{ count }}</p>
    <p>double is {{ double }}</p>
  </div>
</template>
<script setup lang="ts">
import { reactive, onMounted, computed, toRef, toRefs } from "vue";
type Todo = {
  id: number;
  message: string;
  completed: boolean;
  time: string;
};
type State = {
  count: number;
  double: number;
};
const data1 = reactive({
  todoList: [] as Todo[],
});
const data2: State = reactive({
  count: 0.double: computed(() = > data2.count * 2)});const tempCount = toRef(data2, "count");
const { count, double } = toRefs(data2);
const handleClick = () = > {
  data2.count++;
};
onMounted(() = > {
  const todos: Todo[] = [
    {
      id: 1.message: "todo1".completed: true.time: "The 2021-7-15 07:00"}, {id: 2.message: "todo2".completed: false.time: "The 2021-7-15 07:00",},]; data1.todoList = todos; data1.todoList.push({id: 3.message: "todo3".completed: true.time: "The 2021-7-15 07:00"}); });</script>
Copy the code

Reactive and REF give me a subjective feeling that it is more convenient to declare reactive objects and ref to declare simple variables. They have a lot in common

At the end

This article first wrote here (the main beginning of the nonsense too much, afraid of the length is too long, see people tired), now write 1 and 2 points. I will update the watch watchEffect Context vue lifecycle in the next article.

The new author would like you to like 👍

Do you have any comments, suggestions, mistakes or other usages that I hope you can leave a comment and learn from each other

The project address

  1. github
  2. gitee