在写简单的html页面时想使用vue和Element中的页面及方法又不想创建一个vue项目则可以单独引用其中的js与css即可实现效果
先创建一个文件夹添加js、css文件夹
image.png
其中css文件element.css 与fonts中的.ttf、.woff文件是Element的icon,缺少的话页面就没有图标(版本使用的是2.4.11)
js中 vue.jselement.js这两个就是基础,axios.js、axios.min.js是发请求调用后端接口需要的组件,不需要动态数据的可以不添加(以上就是需要的所有包,其他功能需要自己扩展)

index.html就是要写的页面
首先需要在head中引入样式

<head>
  <meta charset="UTF-8">
  <!--引入 element-ui 的样式-->
  <link rel="stylesheet" type="text/css" href="css/element.css">
  <!-- 必须先引入vue  后使用element-ui -->
  <script src="js/vue.js"></script>
  <!-- 引入element 的组件库-->
  <script src="js/element.js"></script>
  <!-- 引入axios 的组件库 上面为在线的包-->
  <!-- <script src="https://unpkg.com/axios/dist/axios.min.js"></script> -->
  <script src="js/axios.min.js"></script>
</head>

然后在body中写页面,参考Eleme中的样式,最后在script中编写js代码

<script>
 var vm = new Vue({
      el: '#app',
      data: function() {
        return {
            tableData: [] ,            
        }
      },
      methods: {
        onSubmit:function () {
		axios.get('http://ip地址:端口/路由',{
                    params:{参数:参数值}
                }).then(function(data){
                    vm.tableData=data.data;
                 })
        }
    }
    })
</script>

特别注意的是在script中由于不是vue项目没有全局注册vue所有要使用vue中的方法时需要在new Vue()时赋值,然后由赋值的变量名来代替this.xx,上面代码中就是使用vm接受对象然后用vm.xx来找到变量进行赋值,其他操作同理。

使用axios发送请求时就是代码中的例子具体请参考axios get带参数的请求方法

此时发送请求可能会有跨域问题,由于前端不是vue工程 网上的前端配置跨域的方案不太合,适所以由后端来解决配置拦截器(后台使用java)
参考链接:https://blog.csdn.net/weixin_45735355/article/details/117983549
将这个类加入到项目中就可以了

示例:代码
image.png