Polymer2.0安装与使用

来源：互联网发布：窗户漏风知乎编辑：程序博客网时间：2024/06/05 03:42

最近在公司做前端实习生，第一个任务就是研究一下polymer，网上的参考资料大多数都是1.0版本，而且资料也非常少，官网还需要翻墙，有人也做了一个中文网，但并不是完全翻译版本，学起来比较吃力。

Polymer官网上是这么介绍的：

Unlock the Power of Web Components.Polymer is a JavaScript library that helps you create custom reusable HTML elements, and use them to build performant, maintainable apps.

简单翻译就是：

释放组件的力量，Polymer是一个可以帮助你创建自定义的可重用的HTML元素的JavaScript库，可以用来构建高性能，可维护的app

所以说polymer主打的就是组件化，如果自己能先写好各个组件，那么在做前端设计时，就能直接调用，省时省力，这也是公司安排我研究polymer的目的。现在就来简单梳理一下polymer安装和使用的步骤。

安装步骤：

1.安装Git

下载地址：https://git-scm.com/downloads
安装步骤就是一直next

2.安装Node.js

下载地址：http://nodejs.cn/download/
这里最好是用最新版本的，否则可能不支持polymer

3.安装bower

在命令行中输入：

npm install -g bower

4.安装polymer CLI

在命令行中输入：

npm install -g polymer-cli

创建demo

1.安装polymer2.0

命令行中输入（需要进入demo根目录，可以创建一个空文件夹）：

bower install Polymer/polymer#^2.0.0

成功后会在demo文件夹里出现名为bower_components的文件夹

2.创建组件

用自己最顺手的IDE/文本编辑器创建demo-element.html
这个文件是用来创建组件的，所以格式与普通html文件不同，没有head、body，只用dom-module，这里因为是demo，所以写的都是必须写的内容，不能再精简了！

<link rel="import" href="/bower_components/polymer/polymer.html"><!--id为组件名--><dom-module id="search-bar">    <template>        <!--元素-->        <input type="text"/>        <button>search</button>    </template>    <script>        class SearchBar extends Polymer.Element {            //为元素命名，return的必须与上面id的名字一样            static get is() {                return "search-bar";            }        }        //注册元素，名字跟类名相同        customElements.define(SearchBar.is, SearchBar);    </script></dom-module>

3.使用组件

创建index.html

<!DOCTYPE html><html lang="en">    <head>        <meta charset="UTF-8">        <title>demo</title>        <!--用来装载-->        <script src="/bower_components/webcomponentsjs/webcomponents-loader.js"></script>        <!--引用自定义组件-->        <link rel="import" href="search.html">    </head>    <body>        <search-bar></search-bar>    </body></html>

4.开启服务

在命令行中输入（要在demo根目录）：

polymer serve --open

成功后会出现如下内容：
这里写图片描述

这时候浏览器会自动打开index页面，效果如图：
这里写图片描述

阅读全文

0 0