問題: HTML で要素 UI + vue3 が導入されていますが、el ボタンの効果が表示されません。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- import Vue before Element -->
<!-- <script src="https://unpkg.com/vue@2/dist/vue.js"></script>-->
<script src="js/vue3.3.8/vue.global.js"></script>
<!-- import JavaScript -->
<!-- <script src="js/elementUI/index.js"></script>-->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<!-- import CSS -->
<link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
</head>
<body>
<div id="app">
<!-- 双大括号语法,可以直接拿到下面data中return 里面的数据 -->
{
{message}}
<el-button type="success">成功按钮</el-button>
<el-progress type="circle" :percentage="20"></el-progress>
</div>
</body>
<script>
const { createApp, ref } = Vue
createApp({
setup() {
const message = ref('Hello vue!')
return {
message
}
}
}).mount('#app')
</script>
</html>
実行エラー:
Index.min.js:1 Uncaught TypeError: 未定義のプロパティを読み取れません ('$isServer' の読み取り)
[Vue warn]: コンポーネントの解決に失敗しました: el-button
これがネイティブ カスタム要素である場合は、compilerOptions.isCustomElement を介してコンポーネントの解決から必ず除外してください。
<アプリ>
問題分析:
vue2だと正常に動作しますが、vue3は要素UIに対応していないはずです。
Element UI は Vue2.x ベースのインターフェイス フレームワークであり、Element Plus は Vue3.x ベースのインターフェイス フレームワークです。
解決する
vue3 の場合は、代わりに要素 Plus を使用してください。
ソースコード:
注: vue をマウントする前に、elementplus をロードする必要があります
app.use(ElementPlus)
<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 type="primary">{
{ message }}</el-button>
<el-progress :percentage="20" type="circle"></el-progress>
</div>
<script>
const {createApp, ref} = Vue
const app = createApp({
setup() {
const message = ref('Hello vue!')
return {
message
}
}
})
app.use(ElementPlus)
app.mount('#app')
</script>
</body>
</html>
特定のバージョンを指定します。
<link rel="スタイルシート" href="https://unpkg.com/browse/[email protected]/dist/index.css">
<script src='https://unpkg.com/[email protected]/dist/index.full.js'></script>