Polymer - 安装

在系统中配置Polymer很容易.以下是安装Polymer的两种方法.

  • Polymer CLI(命令行界面)

  • Bower

使用Polymer CLI安装聚合物

步骤1 : 使用以下npm命令安装Polymer.

 
 npm install -g polymer-cli @ next


第2步 : 使用以下命令检查安装和版本是否成功.

 
 polymer --version


如果已成功安装,则会显示版本为 :

步骤3 : 使用您选择的名称创建一个目录并切换到该目录.

 
 mkdir polymer-js 
 cd polymer-js


第4步 : 要初始化项目,请在 polymer-jsdirectory 中运行以下命令.

 
 polymer init


执行上述命令后,它将显示类似于此项的内容;

C:\polymer-js>polymer init 
? Which starter template would you like to use? 
   1) polymer-1-element - A simple Polymer 1.0 element template 
   2) polymer-2-element - A simple Polymer 2.0 element template 
   3) polymer-1-application - A simple Polymer 1.0 application template 
   4) polymer-2-application - A simple Polymer 2.0 application 
   5) polymer-1-starter-kit - A Polymer 1.x starter application template, with 
      navigation and "PRPL pattern" loading 
   6) polymer-2-starter-kit - A Polymer 2.x starter application template, with 
      navigation and "PRPL pattern" loading 
   7) shop - The "Shop" Progressive Web App demo
   Answer: 4


第5步 : 从上面给出的选项中选择polymer-2-application.

现在,使用以下命令启动项目.

polymer serve


使用Bower安装聚合物

第1步 : 号;要使用Bower方法从头开始,请使用以下命令安装Bower.

 
 npm install -g bower


第2步 : 使用以下命令安装Polymer.

 
 npm install -g polymer-cli @ next


第3步 : 使用以下命令检查Polymer的成功安装和版本.

 
 polymer --version


如果已成功安装,则会显示版本为 :

 
 0.18.0-pre.13 .


第4步 : 要从凉亭安装最新的Polymer 2.0 RC版本,请使用以下命令.

 
 bower install Polymer/polymer#^ 2.0.0-rc. 3


第5步 : 创建 index.html 文件,并在< head>中添加以下代码标签.

<script src = "/bower_components/webcomponentsjs/webcomponentsloader.js"></script> 
// it loads the polyfills 

<link rel = "import" href = "/bower_components/polymer/polymer.html"> 
// it import Polymer


第6步 : 使用以下命令启动项目.

polymer serve


建筑for deployment

要构建项目以进行部署,聚合物构建命令是一种更简单的方法,它将根据命令行缩小,编译或捆绑代码标记.

要创建适用于所有浏览器的通用版本,请使用以下命令.

polymer build --js-compile


上面的命令将构建项目以构建/默认,您可以使用以下命令启动此目录.

polymer serve build/default


Polymer 2.0使用ES6和HTML自定义元素.对于最佳实践,最好将ES6用于支持完全ES6的浏览器,并将ES5编译为不支持ES6的旧浏览器.下表显示了项目的最佳策略.

策略最简单的跨浏览器支持最适合WC v1性能
服务器任何服务器都有效,包括静态的需要差异化服务
已部署的代码ES5已编译ES6
Polyfill Loaderwebcomponents-es5-loader.jswebcomponents-loader.js