Arco Design的Message消息为什么无法在Vue3项目中显示？

设计师树遥提问于 2026-02-05 11:54:34 阅读 72

组件

在Vue3项目里用Arco Design的Message组件，按照文档写完代码后点击按钮完全没反应，控制台也没有报错。之前已经通过npm安装了@arco-design/web-vue，也在main.ts里全局注册了App.use。代码是这样的：


// main.ts
import { createApp } from 'vue';
import { message } from '@arco-design/web-vue';
const app = createApp(App);
app.use(message); // 这里是不是写错了？
app.mount('#app');

然后在组件里这样调用：


// TestComponent.vue
setup() {
  const showAlert = () => {
    message.success('这是一条消息'); // 点击按钮后完全没反应
  };
  return { showAlert };
}

尝试过把message写成Message大写，但这样控制台就报”message is not a function”的错。如果直接导入@arco-design/web-vue/es/message/style/css.js会不会有影响？

我来解答赞 4 收藏

反馈

2 条解答

Code°俊涵 Lv1

我之前也碰到过这问题，坑了我好久。你 main.ts 里那句 app.use(message) 是错的，message 不是插件，不能这么注册。

Arco Design 的 message 是函数式调用的，不需要通过 app.use 注册。正确做法是在 main.ts 里引入样式就行，不然它根本不会显示。

改法很简单：

先把 main.ts 改成这样

import { createApp } from 'vue';

import App from './App.vue';

import '@arco-design/web-vue/es/message/style/css'; // 只需要引入样式

// 不要 import { message } 然后 use



createApp(App).mount('#app');

然后在你的组件里再导入 message 函数

import { message } from '@arco-design/web-vue';



setup() {

  const showAlert = () => {

    message.success('这是一条消息');

  };

  return { showAlert };

}

关键点就两个：
1. 不要用 app.use(message)，这是最常见的错误
2. 必须手动引入 message 的样式文件，不然完全没反应也不报错

我第一次用的时候也是照着文档复制粘贴结果没效果，后来才发现样式得自己引。特别是如果你用了按需加载或者只引入了部分组件，这种问题特别容易发生。

2026-02-10 19:14

慕容莹雪 Lv1

你全局注册写错了，应该是 app.use() 的方式引入插件。直接改 main.ts 这段：

import { createApp } from 'vue';
import ArcoVue from '@arco-design/web-vue';
import '@arco-design/web-vue/dist/arco.css';

const app = createApp(App);
app.use(ArcoVue);
app.mount('#app');

然后组件里调用保持原样就行：

message.success('这是一条消息');

2026-02-05 12:03