1. The difference between vue2 and vue3
1.1 vue is an object in vue3, which can be imported using on-demand
import {createApp} from 'vue ’
1.2 Import Differences
vue-router3.0 used in vue2 imports the constructor new VueRouter()
vue-router4.0 used in vue3 imports the object createRouter()
1.3 Syntax
vue2 syntax can be used in vue3, except for filters that cannot be used
2. vue3 scaffolding
There are three modes of routing in scaffolding: history, hash mode hash, abstract mode abstract
2.1 Scaffolding Configuration
vue create projectname----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Next, we will introduce the precautions for defineProps and defineEmits when using magic sugar syntax when vue3 is built.
In Vue 3.2+, you can use <script setup> to write components instead of the traditional script tag, which provides a cleaner syntax to write Composition API code.
In <script setup>, you need to pay attention to using defineProps and defineEmits:
- If you explicitly import defineProps, the following wanning will be prompted at compile time
<script steup>
import { defineProps } from 'vue';
...
</script>The development environment will prompt when compiling
[@vue/compiler-sfc] `defineProps` is a compiler macro and no longer needs to be imported.
The reason is that in <script setup> defineProps and defineEmits are now compiler macros, meaning you no longer need to explicitly import them from the 'vue' package. These macros are automatically available in the context of <script setup> .
- If you do not export explicitly, it may prompt the following error
ERROR Failed to compile with 1 error [eslint] 40:1 error 'defineProps' is not defined no-undef
To solve the above problem, you do not repeat imports and not prompt warning during compilation. You can add a line of configuration in it:
...
"eslintConfig": {
"root": true,
"env": {
"node": true,
"vue/setup-compiler-macros": true #Add this line of configuration },
...This is the article about the precautions for defineProps and defineEmits when using magic sugar syntax when vue3 is built. For more related contents of vue3 defineProps and defineEmits, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!