vue + 模板

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="t" tagdir="/WEB-INF/tags/" %>
<%
    String path = request.getContextPath();
    String webName = request.getServerName();
    String basePath = request.getScheme() + "://" + webName + ":" + request.getServerPort() + path;
%>
<html>
<head>
    <title>测试</title>
    <link href="<%=basePath%>/resources/lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="<%=basePath%>/resources/lib/bootstrap/font-awesome/css/font-awesome.css" rel="stylesheet">
    <link href="<%=basePath%>/resources/css/index.css" rel="stylesheet">
    <style>

    </style>
</head>
<body>
<div id="wrapper">
    <!--顶部导航栏部分-->
    <nav class="navbar">
        <div class="container-fluid" style="margin-top: -2px;">
            <div class="navbar-header">
                <img style="height:60px;" alt="image" src="resources/img/suning.png" />
                <span style="vertical-align:middle;display:inline-block;height:62px;line-height:80px">PCDN管理平台</span>
            <%--<a class="navbar-brand" title="logoTitle" href="#">Neo Yang</a>--%>
            </div>
            <div class="collapse navbar-collapse">
                <ul class="nav navbar-nav navbar-right">
                    <%--<li role="presentation">
                        <a href="#">当前用户:<span class="badge">TestUser</span></a>
                    </li>--%>
                    <li>
                        <a href="../login/logout" style="padding-top: 24px;"><span class="glyphicon glyphicon-lock"></span>退出登录</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div style="height:34px;background: #5FA2DD;">
        <div class="dropdown dropdown-menu-right">
            <button class="ml btn dropdown-toggle btn-primary" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                PCDN用户服务平台
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
                <li><a href="javascript:void(0);">PCDN用户服务平台</a></li>
                <li><a href="javascript:void(0);">共享CDN开发平台</a></li>
            </ul>
        </div>
    </div>

    <!-- 中间主体内容部分 -->
    <div class="pageContainer">
        <!-- 左侧导航栏 -->
        <div class="pageSidebar">
            <ul class="nav nav-stacked nav-pills">
                <li class=" ${selected == 'equipManage' ? 'active' :''} ">
                    <a href=""><i class="fa fa-tablet"></i> <span class="nav-label">设备管理</span></a>
                </li>
                <li class=" ${selected == 'versionManage' ? 'active' :''} ">
                    <a href=""><i class="fa fa-sitemap"></i> <span class="nav-label">版本升级管理</span></a>
                </li>
                <li class=" ${selected == 'trafficMonitor' ? 'active' :''} ">
                    <a href=""><i class="fa fa-chain"></i> <span class="nav-label">上传流量监控</span></a>
                </li>
                <li class=" ${selected == 'incomeMeasure' ? 'active' :''} ">
                    <a href=""><i class="fa fa-database"></i> <span class="nav-label">收入计量</span></a>
                </li>
                <li class=" ${selected == 'manageLog' ? 'active' :''} ">
                    <a href=""><i class="fa fa-warning"></i> <span class="nav-label">日志</span></a>
                </li>
            </ul>
        </div>
        <!-- 左侧导航和正文内容的分隔线 -->
        <div class="splitter"></div>
        <!-- 正文内容部分 -->
        <div class="pageContent">
            11111111111111
        </div>
    </div>
    <!-- 底部页脚部分 -->
    <div class="footer">
        <p class="text-center">
            2017 &copy; NeoYang.
        </p>
    </div>
</div>
</body>
<script src="<%=basePath%>/resources/lib/vue2.0/vue.js"></script>
<script src="<%=basePath%>/resources/lib/bootstrap/js/jquery-2.1.1.js"></script>
<script src="<%=basePath%>/resources/lib/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript">
    var vue = new Vue({
        el : "#wrapper",
        data : {
            msg : "ceshi",
            telephone : ""
        }
    });

    /*$(".nav li").click(function() {
        $(".active").removeClass('active');
        $(this).addClass("active");
    });*/
</script>
</html>

https://blog.csdn.net/xwxyjy/article/details/60142401

 

https://blog.csdn.net/mao834099514/article/details/79138484

 

https://blog.csdn.net/linzhiqiang0316/article/details/79176651

 

 /**
     * node -v
     * npm -v
     * npm set registry http://registry.npm.taobao.org
     * npm config delete proxy
     * npm i -g vue-cli
     */
E:\CDNSpace\pcdn\pcdn-web>npm install
npm WARN tar zlib error: unexpected end of file
npm ERR! cb() never called!

npm ERR! This is an error with npm itself. Please report this error at:
npm ERR!     <https://github.com/npm/npm/issues>

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\18064211\AppData\Roaming\npm-cache\_logs\2018-07-12T07_38_54_172Z-debug.log


https://blog.csdn.net/dyp330/article/details/80420749

 

Element UI DatePicker 日期选择器:
https://blog.csdn.net/zgrkaka/article/details/78491532
https://www.cnblogs.com/xjcjcsy/p/7977966.html

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue Cesium 模板是一个基于 Vue.js 和 Cesium.js 的开发模板,用于快速构建基于 Cesium 的三维地图应用程序。 Vue 是一个流行的 JavaScript 框架,用于构建用户界面。Vue 提供了响应式的数据绑定和组件化的架构,使得开发者可以轻松管理应用程序的状态和 UI 组件。在 Vue 中,可以通过组件的方式来封装和重用代码,增强了代码的可维护性和可扩展性。 而 Cesium 则是一个用于创建基于 WebGL 的交互式三维地图的 JavaScript 库。Cesium 提供了强大的功能和丰富的地理数据处理工具,能够展示三维建筑、地形、遥感影像等复杂的地理信息。Cesium 的优势在于其开放性和可扩展性,使得开发者可以自由地定制和扩展地图功能。 Vue Cesium 模板的作用是将 Vue 和 Cesium 整合在一起,提供了一套基础的项目架构和开发工具,使得开发者可以更快速地构建和部署三维地图应用程序。该模板已经集成了 Vue 和 Cesium 的相关依赖库,并提供了一些常用的示例代码和组件,方便开发者入门和学习。 使用 Vue Cesium 模板,开发者可以通过编写 Vue 组件,结合 Cesium 的 API,实现三维地图的数据展示、交互操作以及地理信息的可视化。开发者可以利用 Vue 的自定义指令、计算属性和事件机制,与 Cesium 的实体、图层和渲染引擎进行交互,实现丰富多样的地图功能。 总而言之,Vue Cesium 模板提供了一个简单、高效的开发方式,可以帮助开发者快速构建具有丰富交互和数据可视化功能的三维地图应用程序。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值