关于如何在JSP文件中使用element-ui组件

在 .jsp文件中，按照element-ui给的代码，写入jsp文件，网页没有变化效果

示例代码：

https://element.eleme.cn/#/zh-CN/component/form

<%--

Created by IntelliJ IDEA.

User: LENOVO

Date: 2020/10/26

Time: 14:50

To change this template use File | Settings | File Templates.

--%>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<!DOCTYPE html>

<meta charset="UTF-8">

<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

#app{

width:300px;

height:500px;

}

<div id="app">

<el-form ref="form" :model="form" label-width="80px">

<el-form-item label="活动名称">

<el-input v-model="form.name">

<el-form-item label="活动区域">

<el-select v-model="form.region" placeholder="请选择活动区域">

<el-option label="区域一" value="shanghai">

<el-option label="区域二" value="beijing">

<el-form-item label="活动时间">

<el-col :span="11">

<el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width:100%;">

<el-col class="line" :span="2">-

<el-col :span="11">

<el-time-picker placeholder="选择时间" v-model="form.date2" style="width:100%;">

<el-form-item label="即时配送">

<el-switch v-model="form.delivery">

<el-form-item label="活动性质">

<el-checkbox-group v-model="form.type">

<el-checkbox label="美食/餐厅线上活动" name="type">

<el-checkbox label="地推活动" name="type">

<el-checkbox label="线下主题活动" name="type">

<el-checkbox label="单纯品牌曝光" name="type">

<el-form-item label="特殊资源">

<el-radio-group v-model="form.resource">

<el-radio label="线上品牌商赞助">

<el-radio label="线下场地免费">

<el-form-item label="活动形式">

<el-input type="textarea" v-model="form.desc">

<el-button type="primary" @click="onSubmit">立即创建

<el-button>取消

<script src="https://unpkg.com/vue/dist/vue.js">

<script src="https://unpkg.com/element-ui/lib/index.js">

export default ({ -----------------------------------------------------修改点

el:'#app',

data() {

return {

form: {

name:'',

region:'',

date1:'',

date2:'',

delivery:false,

type: [],

resource:'',

desc:''

}

}

},

methods: {

onSubmit() {

console.log('submit!');

}

}

})

效果：

可以看到根本看不到任何样式

我们只需要在上面代码的修改点位置，把export default 修改成 new Vue，就可正常显示组件内容了。

<script src="https://unpkg.com/element-ui/lib/index.js">

new Vue({ ------------------------修改后

el:'#app',

data() {

return {

修改后的样式，可以成功看到引入的element-ui 组件