在您的系统中配置Polymer很容易。以下是安装Polymer的两种方法。
- Polymer CLI(命令行界面)
- The Bower
使用Polymer CLI安装Polymer
步骤1-使用以下npm命令安装Polymer。
npm install -g polymer-cli@next
步骤2-使用以下命令检查安装和版本是否成功。
polymer --version
如果安装成功,它将显示为-
步骤3-使用您选择的名称创建目录,然后切换到该目录。
mkdir polymer-js cd polymer-js
步骤4-要初始化您的项目,请在polymer-js目录中运行以下命令。
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-使用以下命令安装聚合物。
npm install -g polymer-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> // it loads the polyfills <link rel = "import" href = "/bower_components/polymer/polymer.html"> // it import Polymer
步骤6-使用以下命令启动您的项目。
polymer serve
建立部署
要构建要部署的项目,聚合物构建命令是一种更简单的方法,它将根据命令行标志来最小化,编译或捆绑您的代码。
要创建适用于所有浏览器的通用版本,请使用以下命令。
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 |
作者:terry,如若转载,请注明出处:https://www.web176.com/polymer/2341.html