有关在vue2中使用@vue/composition-api与unplugin-vue2-script-setup使用记录说明

注：今天遇到一个问题，在此记录下

需要在已有项目（如uniapp和 @vue/composition-api结合使用中，添加如下功能）

<script setup>
import { defineProps, defineEmits } from '@vue/composition-api'

const props = defineProps({
  foo: String
})

const emit = defineEmits(['change', 'delete'])
// setup code
console.log(defineProps,defineEmits)//返回结果是undefined
</script>


//如截图 

所遇到的问题，直接在

<script setup>
import {onShow} from 'uni-composition-api'
onShow(()=>{
//逻辑体，会报如下截图的错误
})
</script>

去github上面询问了解决方案

<script setup>
import {onShow} from 'uni-composition-api'
onShow(()=>{
//这个在安装新插件，还没有测试过
})
</script>

解决问题来源处===>安装对应的依赖（unplugin-vue2-script-setup）

我这边使用的是Vue CLI 方式进行处理的

若未创建vue.config.js的话,请创建vue.config.js,得与src目录同级,

// vue.config.js
const ScriptSetup = require('unplugin-vue2-script-setup/webpack').default

module.exports = {
  parallel: false,  // disable thread-loader, which is not compactible with this plugin
  configureWebpack: {
    plugins: [
      ScriptSetup({ /* options */ }),
    ],
  },
}

复制完上面的代码进vue.config.js后，重启项目即可看到效果，使用unplugin-vue2-script-setup这个插件，请先安装

npm i -D unplugin-vue2-script-setup

文档说明：unplugin-vue2-script-setup链接

创建一个空白的.vue文件，使用如下操作

<script setup>
const props = defineProps({
  foo: String
})

const emit = defineEmits(['change', 'delete'])
// setup code
</script>

就可以看到效果，其他操作请看上面链接进行操作！