普通java web项目引入vue.js 和elementui组件

最新推荐文章于 2024-07-11 09:13:21 发布

影子2401

最新推荐文章于 2024-07-11 09:13:21 发布

阅读量5.4k

点赞数 5

分类专栏： java 文章标签： vue springboot

本文链接：https://blog.csdn.net/qq445829096/article/details/117474138

版权

java 专栏收录该内容

46 篇文章 1 订阅

订阅专栏

通过vuecli框架构建前后端分离项目是目前主流的方式，但是普通web项目依然存在普通java web项目引入vue.js 和elementui组件

vuecli前后端分离项目和普通web项目 html引入vuejs的区别

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，本身是一个nodejs项目

普通web项目引入vuejs就是只能使用vue的mvvm(双向绑定的功能)，什么router路由都是没有的

项目介绍：我这边是springboot项目引入了thymeleaf 框架

访问index路由会调整到index.html页面

1.index.html引入 vue.js

vue官网查看 html引入方式

2.index.html引入element样式

element官网查询html引入方式

发现elementui官网给的 hello world demo 已经引入了vue.js 第一步vue官网引入就不用了

3.直接把html 的demo复制到项目index.html

vue elementui需要的资源都引入了

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
  <div id="app">
    <el-button @click="visible = true">Button</el-button>
    <el-dialog :visible.sync="visible" title="Hello world">
      <p>Try Element</p>
    </el-dialog>
  </div>
</body>
  <!-- import Vue before Element -->
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <!-- import JavaScript -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: function() {
        return { visible: false }
      }
    })
  </script>
</html>