jsp中使用vue，jsp中使用elementUI

jsp中使用vue，jsp中使用element UIjsp中是无法直接使用element UI的，因为elementUI是基于Vue的，所以必须先集成Vue首先要导入以下文件，这边建议下载而不是直接使用链接这里有一点必须注意，vue.js必须在element的上面，因为element是基于vue的<link rel="stylesheet" href="https://unpkg.com/e

第五龙宇

7695人浏览 · 2021-05-12 10:32:30

第五龙宇 · 2021-05-12 10:32:30 发布

jsp中使用vue，jsp中使用element UI

jsp中是无法直接使用element UI的，因为elementUI是基于Vue的，所以必须先集成Vue

首先要导入以下文件，这边建议下载而不是直接使用链接

这里有一点必须注意，vue.js必须在element的上面，因为element是基于vue的

    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="element/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="element/axios.js"></script>
    <script src="element/qs.js"></script>

有很多人不知道去哪里下载这些文件，我这边附上我自己的资源，你也可以直接去官网下载

资源：jsp中使用vue，使用elementui的资源包，免费提供下载

这些资源还有一种使用方法，直接使用链接，这样就不需要导入到本地，但可能会出现资源更新时无法使用的问题
我上面的导入其中elementui直接使用了链接，因为导入到本地后会出现某些样式无法使用的问题，可以解决，但太麻烦了，我直接就使用了https的形式引入

经过我的实测，实际上用https的形式几乎没什么影响

下载并导入了这些文件，那么就可以正式开始使用vue和elementui了

使用样式代码如下：

<body>
	<div id="app">
	    <el-table :data="list">
	    //这个是elementui的表格
	    </el-table> 
	</div>
</body>
<script>
//直接写在<script>里面就好了
	new Vue({
	        el: '#app',
	        data(){
	            return {
	          		list:[]
	            }
	        },
	        methods: {
	        },
	        created:function(){
	        //钩子函数
	        }
	    });
</script>

好了，完成了

我创建了一个技术交流微信群

加我微信，拉你进群，备注来意

在这里插入图片描述

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^