Element Plus CDN引入组件异常的问题
我想开发一个本地web应用，为了简单部署，选择使用CDN方式引入Element Plus。官网的table组件样式是这样的，nice：
问题，我的table样式是这样的，只能显示1列，不知道什么原因：
完整代码：
<!DOCTYPE html>
<html lang="zh-CN" style="height: 100%">
<head>
<!-- style -->
<link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
<!-- Vue 3 -->
<script src="//unpkg.com/vue@3"></script>
<!-- component library -->
<script src="//unpkg.com/element-plus"></script>
</head>
<body>
<div id="app">
<el-table :data="tableData">
<el-table-column prop="date" label="Date" width="180" />
<el-table-column prop="name" label="Name" width="180" />
<el-table-column prop="address" label="Address" />
</el-table>
</div>
<script type="text/javascript">
const App = {
data() {
return {
tableData: [
{
date: '2016-05-03',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-04',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-01',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
}
]
}
},
mounted() { },
methods: {}
}
const app = Vue.createApp(App);
app.use(ElementPlus);
app.mount("#app");
</script>
</body>
</html>
不知道什么问题，如何解决，请各位大佬指教，谢谢。
你最好npm install这样安装依赖在生产环境上面 Js_Aaron 发表于 2022-9-30 08:42
你最好npm install这样安装依赖在生产环境上面
cil引入我知道是没有问题的，但我现在的情况，希望使用cdn。
所以cdn有办法吗？
Vue is not defined我运行显示这个 meng234885 发表于 2022-9-30 09:11
Vue is not defined我运行显示这个
我在vscode本地服务器运行的。
http://127.0.0.1:5500 建议还是配套是vue脚手架吧，支持更好。如果plus加了很多新语法，更多的支持Typescript，可以考虑降低版本使用element ui meng234885 发表于 2022-9-30 09:11
Vue is not defined我运行显示这个
改一下cdn引入地址就行。
<!-- Import style -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-plus/dist/index.css" />
<!-- Import Vue 3 -->
<script src="https://unpkg.com/vue@3.2.40/dist/vue.global.js"></script>
<!-- Import component library -->
<script src="https://cdn.jsdelivr.net/npm/element-plus"></script> 改成这种写法<el-table-column prop="date" label="Date" width="180" ></el-table-column>https://vuejs.org/guide/essentials/component-basics.html#dom-template-parsing-caveats 与楼上一致，换闭合标签写法就行了
<div id="app">
<el-table :data="tableData">
<el-table-column prop="date" label="Date" width="180"></el-table-column>
<el-table-column prop="name" label="Name" width="180"></el-table-column>
<el-table-column prop="address" label="Address"></el-table-column>
</el-table>
</div> http://e.anyoupin.cn/ceshi/jstest/element/ele-tab-menu.php
参考一下
页:
[1]