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

通过vuecli框架构建前后端分离项目是目前主流的方式，但是普通web项目依然存在普通java web项目引入vue.js 和elementui组件vuecli前后端分离项目和普通web项目 html引入vuejs的区别Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，本身是一个nodejs项目普通web项目引入vuejs就是只能使用vue的mvvm(双向绑定的功能)，什么rou

影子2401

5538人浏览 · 2021-06-26 14:31:55

影子2401 · 2021-06-26 14:31:55 发布

通过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>

4.访问url http://127.0.0.1:8083/pes01/index 查看效果

hello word demo测试没问题，就使用vuejs的mvvm特性和elementui的组件开发普通web项目了

5.正式使用是 vue elemenui资源下载好本地引入

目前是通过CDN引入的，去CDN下载需要时间，而且可能资源版本会升级，导致不兼容，可以下载到本地项目，静态引入

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}$/, //不连续的两位字母// /^