Vue3_grammatical sugar - <script setup> and unplugin-auto-import automatically introduce plugins

<script setup>

import { ref , onMounted} from 'vue';
    let obj = ref({
      a: 1,
      b: 2,
    }); 
    let changeObj = ()=>{
      console.log(obj)
      obj.value.c = 3 //ref写法
    }
    onMounted(()=>{
      console.log(obj)
    })
    

</script>

The code inside will be compiled into  setup() the content of the component function.

equivalent to

<script>

import { ref } from 'vue';

export default {    
    setup(){
        let obj = ref({
              a: 1,
              b: 2,
        }); 
        let changeObj = ()=>{
              console.log(obj)
              obj.value.c = 3 //ref写法
        }
        return {obj,changeObj}
    }
    mounted() {
        console.log(this.obj) 
    }
   
    
}
</script>

Using the syntax sugar plug-in can simplify the import steps

unplugin-auto-import - npm

When not in use:

import { computed, ref } from 'vue'

const count = ref(0)
const doubled = computed(() => count.value * 2)

when using it:

const count = ref(0)
const doubled = computed(() => count.value * 2)

download

cnpm i unplugin-auto-import --D

Configure according to the configuration of different packaging tools in the official website

Project configuration created by vue-cli:

//vue.config.js
const { defineConfig } = require("@vue/cli-service");

module.exports = defineConfig({
  configureWebpack: {
    plugins: [
      require('unplugin-auto-import/webpack')({
        imports: ['vue', 'vue-router', 'vuex'],
        eslintrc: {
          enabled: false, // 默认false, true启用。生成一次就可以，避免每次工程启动都生成
          filepath: './.eslintrc-auto-import.json', // 生成json文件,eslintrc中引入
          globalsPropValue: true,
        },
      }),
    ],
  },
});