HTML CSS JAVASCRIPT PYTHON PYTHON2 JAVA C C++ C# SQL Excel Linux AI BOOTSTRAP PHP 教程库 参考手册 技术文章 测验 练习 HOWTO FAQ
❮ 上一节 下一节 ❯

Polymer - 安装

在您的系统中配置 Polymer 非常简单。以下是两种安装 Polymer 的方法。

  • Polymer CLI(命令行界面)
  • Bower

使用 Polymer CLI 安装 Polymer

步骤 1 − 使用以下 npm 命令安装 Polymer。

npm install -gpolymer-cli@next

步骤 2 −使用以下命令检查安装是否成功和版本。

polymer --version

如果安装成功，则版本将显示为 −

步骤 3 − 创建一个目录，并切换到该目录。

mkdirpolymer-js
cdpolymer-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 安装 Polymer

步骤 1 − 要使用 Bower 方法从头开始，请使用以下命令安装 Bower。

npm install -g bower

步骤 2 − 使用以下命令安装 Polymer。

npm install -gpolymer-cli@next

步骤 3 −使用以下命令检查 Polymer 是否安装成功以及版本。

polymer --version

如果安装成功，则版本将显示为 −

0.18.0-pre.13.

步骤 4 − 要从 bower 安装最新的 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>
// 它加载 polyfills

<link rel = "import" href = "/bower_components/polymer/polymer.html">
// 它导入 Polymer

步骤 6 −使用以下命令启动您的项目。

polymer serve

构建部署

要构建部署项目，polymer build 命令是一种更简单的方法，它将根据命令行标志缩小、编译或捆绑您的代码。

要创建适用于所有浏览器的通用构建，请使用以下命令。

polymer build --js-compile

上述命令将构建项目到 build/default，您可以使用以下命令启动此目录。

polymer serve build/default

Polymer 2.0 使用 ES6 和 HTML 自定义元素。为了最佳实践，最好在完全支持 ES6 的浏览器上使用 ES6，而将 ES5 编译到不支持 ES6 的旧浏览器。下表显示了适合您项目的最佳策略。

策略 最容易实现跨浏览器支持 最适合 WC v1 性能
服务器 任何服务器均可运行，包括静态服务器 需要差异化服务
已部署代码 ES5 转译 ES6
Polyfill 加载器 webcomponents-es5-loader.js webcomponents-loader.js
❮ 上一节 下一节 ❯