ploymer (一) 第一个demo

最新推荐文章于 2024-03-17 09:32:24 发布

li905663280

最新推荐文章于 2024-03-17 09:32:24 发布

阅读量676

点赞数

本文链接：https://blog.csdn.net/li905663280/article/details/68937233

版权

ploymer (一) 第一个demo

安装node
安装bower

npm install -g bower

初始项目

创建文件夹demo
bower install polymer
增加index.html

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- 这是一个基础版的兼容库 -->
    <script src="./bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
    <!-- 将rel修改为import可以引入另外一个HTML，它将会被执行 -->
    <link rel="import" href="./template/template.html">
    <link rel="import" href="./template/pictureFrame.html">
</head>
<body>
    <proto-element></proto-element>
    <picture-frame>
  <p>听说你要学前端。</p>
</picture-frame>
</body>

增加template和pictureFrame

template.html

<link rel="import" href="../bower_components/polymer/polymer.html">
<script>
  Polymer({
    is: "proto-element",
    ready: function() {
      this.textContent = "I'm ploymer!"
    }
  });
</script>

pictureFrame.html

<link rel="import" href="../bower_components/polymer/polymer.html">
<dom-module id="picture-frame">

  <template>
    <style>
      div {
        display: inline-block;
        background-color: #ccc;
        border-radius: 8px;
        padding: 4px;
      }
    </style>
    <div>
      <content></content>
    </div>
  </template>

  <script>
    Polymer({
      is: "picture-frame",
    });
  </script>

</dom-module>

项目文件结构

这里写图片描述

发布项目到tomcat

修改tomcat的conf/server.xml

<Host appBase="webapps" autoDeploy="true" name="localhost" unpackWARs="true">
    <Context docBase="E:/help/work/ploymer/demo" path="" debug="0"  reloadable="true"/>
  </Host>

运行tomcat

http://localhost:8080/

这里写图片描述

li905663280

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
ploymer (一) 第一个demo

ploymer (一) 第一个demo安装node安装bower npm install -g bower初始项目创建文件夹demobower install polymer增加index.html<head> <meta charset="UTF-8"> <title>Document</title>  <scri
复制链接

扫一扫