问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

element-plus浏览器直接引入怎么搞？

头像
请鹅出战
    328358119
    宁夏银川市

    1.html

    <head>
  <meta charset="UTF-8" />
  <!-- Import Vue 3 -->
  <script src="//unpkg.com/vue@3.3.4"></script>
  <!-- Import style -->
  <link rel="stylesheet" href="//unpkg.com/element-plus@2.3.4/dist/index.css" />
  <!-- Import component library -->
  <script src="//unpkg.com/element-plus@2.3.4"></script>
</head>

    2.main.js

    app.use(ElementPlus);

    3.axios.js

    // 这个要怎么搞？我axios里面用了这个组件。
import { ElMessage } from 'element-plus';
    vue3viteelement-plus
    阅读 2k
    avatarAI BotBETA
    // 在 axios.js 中，您需要导入 Element Plus 的相关模块以使用其中的一些组件。您已经导入了 ElMessage，这是正确的。然而，您需要实例化 Element Plus 和 Vue，以便能够使用这些组件。

// 首先，您需要在您的应用程序中实例化 Vue 和 Element Plus。
import { createApp } from 'vue';
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';

const app = createApp(App); // 假设这是您的 Vue 应用程序
app.use(ElementPlus);

// 然后，您可以在您的应用程序中使用 Element Plus 的组件。
import { ElMessage } from 'element-plus';

app.component('el-message', ElMessage);

    这里需要注意的是，ElMessage 是 Element Plus 中的一个组件，您需要在您的应用程序中注册它，才能在您的模板中使用它。如果您想在 axios 的请求中使用这个组件，那么您需要在 axios 的请求完成之后，使用这个组件的相关方法来显示消息。例如，您可以在 axios 的 .then() 方法中使用 this.$el.message.success('请求成功') 或 this.$el.message.error('请求失败') 来显示消息。当然，这里的 this.$el 是指您的 Vue 实例。

    2 个回答
    得票最新
    头像
    luxigaola
      15916

      你得在vite.config.js文件中配置element-plus

      export default defineConfig({
    resolve:{
        alias:{
            'element-plus':'//unpkg.com/element-plus@2.3.4'    
        }
    }
})

      然后在main.js中去import

      头像
      Undest
        2.4k2517

        官方给了一个例子:

        <html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <script src="https://unpkg.com/vue@next"></script>
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <!-- import JavaScript -->
    <script src="https://unpkg.com/element-plus"></script>
    <title>Element Plus demo</title>
  </head>
  <body>
    <div id="app">
      <el-button>{{ message }}</el-button>
    </div>
    <script>
      const App = {
        data() {
          return {
            message: "Hello Element Plus",
          };
        },
      };
      const app = Vue.createApp(App);
      app.use(ElementPlus);
      app.mount("#app");
    </script>
  </body>
</html>

        至于axios使用ElMessage,你就在回调里使用

         ElMessage.warning(message);

        这样的语句就可以了

        撰写回答
        你尚未登录，登录后可以
        • 和开发者交流问题的细节
        • 关注并接收问题和回答的更新提醒
        • 参与内容的编辑和改进，让解决方法与时俱进
        推荐问题