Vue3 项目中使用setup()函数报错,script setup cannot contain ES module exports

当使用vue3+vite使用语法糖setup时,要注意写法.

第一种写法就是<script> 标签里面配置 setup,另一种是:export default 类里配置 setup() 方法,

我们只需要使用一种方法即可,混用了就会报错了。

解决: 第一种

<script setup>

import {ref} from 'vue'

import { Toast } from 'vant';

import Index from '../pages/Index.vue'

import Team from '../pages/Team.vue'

const onClickLeft = () => alert(1);

const onClickRight = () => alert(2);

const active = ref('index');

const onChange = (index) => Toast(`标签 ${index}`);

</script>

第二种:

<script>

import {ref} from 'vue'

import { Toast } from 'vant';

import Index from '../pages/Index.vue'

import Team from '../pages/Team.vue'

export default {

name: 'BasicLayout',

setup() {

const onClickLeft = () => alert(1);

const onClickRight = () => alert(2);

const active = ref('index');

const onChange = (index) => Toast(`标签 ${index}`);

return {

onClickLeft,

onClickRight,

onChange,

active

};

}

};

[plugin:vite:vue] [@vue/compiler-sfc] <script setup> cannot contain ES module exports. If you are using a previous version of <script setup>, please consult the updated RFC at https://github.com/vuejs/rfcs/pull/227. /Users/apple/Desktop/electron-app/src/renderer/src/App.vue 1 | <script setup lang="ts"> 2 | import { defineComponent, ref } from &#39;vue&#39; 3 | const ipcHandle = (): void => window.electron.ipcRenderer.send(&#39;ping&#39;) | ^ 4 | export default defineComponent({ | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 5 | setup() { | ^^^^^^^^^^^ 6 | const searchText = ref(&#39;&#39;) | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 7 | const results = ref<string[]>([]) | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 8 | const isSearched = ref(false) | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 9 | | ^ 10 | const handleSearch = () => { | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 11 | if (searchText.value) { | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 12 | // 模拟搜索结果 | ^^^^^^^^^^^^^^^^^ 13 | results.value = new Array(5).fill(searchText.value) | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 14 | isSearched.value = true | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 15 | } | ^^^^^^^ 16 | } | ^^^^^ 17 | | ^ 18 | return { searchText, results, isSearched, handleSearch } | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 19 | } | ^^^ 20 | }) | ^^ /Users/apple/Desktop/electron-app/src/renderer/src/App.vue at ScriptCompileContext.error (/Users/apple/Desktop/electron-app/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:19741:11) at Object.compileScript (/Users/apple/Desktop/electron-app/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:24493:11) at resolveScript (file:///Users/apple/Desktop/electron-app/node_modules/@vitejs/plugin-vue/dist/index.mjs:365:37) at genScriptCode (file:///U
最新发布
04-03
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值