【前端笔记】HTML 纯文件 整理 使用 Vue2 + element-ui + axios + qs + 字节cdn
收藏下,方便用的到时,来此复制下.
该版本为 vue2 版本的,需要vue3版本的可以参考下这篇(点击查看)
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/element-ui/2.15.7/theme-chalk/index.min.css"
type="text/css" rel="stylesheet" />
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.13/vue.min.js"
type="application/javascript"></script>
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/element-ui/2.15.7/index.min.js"
type="application/javascript"></script>
<script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/axios/0.26.0/axios.min.js"
type="application/javascript"></script>
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/qs/6.10.3/qs.min.js"
type="application/javascript"></script>
</head>
<style>
body {
padding: 0;
margin: 0;
}
</style>
<body>
<div id="app">
<el-tabs>
<el-tab-pane label="信息概览">信息概览</el-tab-pane>
<el-tab-pane label="配置管理">配置管理</el-tab-pane>
</el-tabs>
</div>
<script>
var app = new Vue({
el: '#app',
data: {},
methods: {}
})
</script>
</body>
</html>
特别注意
如果出现 组件样式 无法正常显示, 比如 el-radio-group 的选项 的样式,
组件代码:
<el-radio-group v-model="radio3" size="small">
<el-radio-button label="test1" value="test1" />
<el-radio-button label="test2" value="test2" disabled />
</el-radio-group>
改为 标准标签 试下:
<el-radio-group v-model="radio3" size="small">
<el-radio-button label="test1" value="test1"></el-radio-button>
<el-radio-button label="test2" value="test2" disabled /></el-radio-button>
</el-radio-group>