3

我一直在使用“element-ui”，现在正在使用新版本的 Vue3。似乎他们发布了一个名为“element-plus”的新版本，但教程没有更新。

import Vue from 'vue';  // not working in Vue3
import ElementUI from 'element-plus';
import 'element-ui/lib/theme-chalk/index.css';
...

Vue.use(ElementUI);  // no "Vue" in Vue3 anymore
...
createApp(App).mount('#app') // the new project creation

https://element-plus.org/#/en-US/component/quickstart

任何人都设法做对并且有效吗？

4

2 回答 2

1

如果您使用的是 vue 3，则需要createApp从 'element-plus/...' 文件夹中导入 css。然后你app使用导入的 vue 函数实例化你的实例，基本上你将主应用程序组件作为参数传递给函数：

import { createApp } from 'vue'
import App from './YourMainApp.vue'

import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'
    
let app = createApp(App)
app.use(ElementPlus)
    
app.mount('#app')
于 2021-08-06T07:39:39.997 回答
0

你也可以很容易地做到这一点，而无需任何 js 捆绑器。

这是一个示例：

var Main = {
    data() {
      return {
          message: 'Hello World!'
      }
    },
    methods: {
        click()  {
          console.log('click()');
        }          
    }
};
const app = Vue.createApp(Main);
app.use(ElementPlus);
app.mount("#app")
<html>
<head>
<link rel="stylesheet" href="//unpkg.com/element-plus/theme-chalk/index.css">
</head>
<body>
<script src="//unpkg.com/vue@next"></script>
<script src="//unpkg.com/element-plus/dist/index.full.js"></script>
<div id="app">
    <el-button type="primary" size="medium" @click="click">{{message}}</el-button>
</div>
</body>
</html>

于 2021-09-23T10:08:45.887 回答