반응형
element-ui(현재는 element-plus)를 Vue3 프로젝트에 추가하려면 어떻게 해야 합니까?
"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/컴포넌트/퀵스타트
누가 제대로 하려고 노력했는데 효과가 있나요?
vue 3을 사용하는 경우 Import해야 합니다.createApp또한 'css-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')
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>언급URL : https://stackoverflow.com/questions/64134028/how-to-add-element-ui-now-called-element-plus-to-vue3-project
반응형
'programing' 카테고리의 다른 글
| nuxt 사용 시 핫 새로고침을 끌 수 있습니까? (0) | 2022.08.17 |
|---|---|
| Linux에서 C 프로그래밍 언어의 헤더 파일을 찾으려면 어떻게 해야 하나요? (0) | 2022.08.17 |
| Jackson JSON을 사용하여 JSON 문자열을 맵으로 변환하는 방법 (0) | 2022.08.17 |
| 계산된 속성에 예기치 않은 부작용이 있습니다. (0) | 2022.08.17 |
| VueX 및 NuxtJ의 지속 상태s (0) | 2022.08.16 |