HTML,bootstrap等引入vue,elementui 等；bootstrap 引入elementui

最新推荐文章于 2024-01-29 21:50:33 发布

诸葛延昌

最新推荐文章于 2024-01-29 21:50:33 发布

阅读量3k

点赞数 1

分类专栏： element 文章标签： elementui vue html bootstrap java

本文链接：https://blog.csdn.net/qq_34462698/article/details/112171009

版权

element 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

在非vue项目引用elementUI样式,

注意:数据定义 data: function () {} 而非data: () {}

方法一(通过 CDN 的方式加载)

在这里插入图片描述
引用地址

		<!-- 必须先引入vue，  后使用element-ui -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
		<!--引入 element-ui 的样式，-->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<!-- 引入element 的组件库-->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>

样例代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
		<!-- 必须先引入vue，  后使用element-ui -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
		<!--引入 element-ui 的样式，-->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<!-- 引入element 的组件库-->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
	<body>
		<div id = 'app'>
			<el-input v-model="create" placeholder="请输入内容"></el-input>
			<el-input v-model="value" placeholder="请输入内容"></el-input>
			<el-button type="success" @click='setValue()'>成功按钮</el-button>
		</div>
		<script type="text/javascript">
			new Vue({
				el: '#app',
				data: function () {
					return{
						create:'默认值', 
						value:'默认值', 
					}
				},
				created() {
					this.create='初始化';
				},
				methods: {
					setValue(){
						this.value='新值';
					},
				},
			})
		</script>
	</body>
</html>

方法二(本地引入)

在这里插入图片描述

目录结构
在这里插入图片描述

资源下载(名字随意-尽量带上版本号)
vue@2.6.12.js:下载 https://cdn.jsdelivr.net/npm/vue/dist/vue.js
element-ui@2.4.11.js:下载 https://unpkg.com/element-ui@2.4.11/lib/index.js
element-ui@2.13.1.css:下载 https://unpkg.com/element-ui@2.4.11/lib/theme-chalk/index.css
fonts 文件下放icon资源
下载 https://unpkg.com/browse/element-ui@2.10.1/lib/theme-chalk/fonts/
全部代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<script type="text/javascript" src="js/vue@2.6.12.js"></script>
	<script type="text/javascript" src="js/element-ui@2.4.11.js"></script>
	<link rel="stylesheet" type="text/css" href="css/element-ui@2.13.1.css"/>
	<body>
		<div id = 'app'>
			<el-input v-model="create" placeholder="请输入内容"></el-input>
			<el-input v-model="value" placeholder="请输入内容"></el-input>
			<el-button type="success"  icon="el-icon-search" @click='setValue()'>本地引用</el-button>
		</div>
		<script type="text/javascript">
			new Vue({
				el: '#app',
				data: function () {
					return{
						create:'默认值', 
						value:'默认值', 
					}
				},
				created() {
					this.create='初始化';
				},
				methods: {
					setValue(){
						this.value='新值';
					},
				},
			})
		</script>
	</body>
</html>

本资源涉及到的代码免费资源下载

诸葛延昌

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML,bootstrap等引入vue,elementui 等；bootstrap 引入elementui

在非vue项目引用elementUI样式,方法一(通过 CDN 的方式加载)引用地址  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>  <link rel="stylesheet" href="https://un
复制链接

扫一扫