Vue3_语法糖—— ＜script setup＞以及unplugin-auto-import自动引入插件

<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>

里面的代码会被编译成组件 setup() 函数的内容。

相当于

<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>

使用语法糖插件可以简化import的步骤

unplugin-auto-import - npm

不使用时:

import { computed, ref } from 'vue'

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

使用时：

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

下载

cnpm i unplugin-auto-import --D

根据官网中不同打包工具的配置进行配置

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,
        },
      }),
    ],
  },
});