Polymer - Cài đặt

Thật dễ dàng để cấu hình Polymer trong hệ thống của bạn. Sau đây là hai cách để cài đặt Polymer.

Polymer CLI (Giao diện dòng lệnh)
The Bower

Cài đặt Polymer bằng Polymer CLI

Step 1 - Cài đặt Polymer bằng lệnh npm sau.

npm install -g polymer-cli@next

Step 2 - Kiểm tra cài đặt thành công và phiên bản bằng lệnh sau.

polymer --version

Nếu nó đã được cài đặt thành công, thì nó sẽ hiển thị phiên bản là:

Step 3 - Tạo một thư mục với tên bạn chọn và chuyển sang thư mục đó.

mkdir polymer-js 
cd polymer-js

Step 4- Để khởi tạo dự án của bạn, hãy chạy lệnh sau trong thư mục polyme-jsdirectory của bạn .

polymer init

Sau khi thực hiện lệnh trên, nó sẽ hiển thị như sau:

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

Step 5 - Chọn ứng dụng polyme-2-từ các tùy chọn đã cho ở trên.

Bây giờ, hãy bắt đầu dự án của bạn bằng lệnh sau.

polymer serve

Cài đặt Polymer bằng Bower

Step 1 - Để bắt đầu lại từ đầu bằng phương pháp Bower, hãy cài đặt Bower bằng lệnh sau.

npm install -g bower

Step 2 - Cài đặt Polymer bằng lệnh sau.

npm install -g polymer-cli@next

Step 3 - Kiểm tra cài đặt thành công và phiên bản của Polymer, sử dụng lệnh sau.

polymer --version

Nếu nó đã được cài đặt thành công, thì nó sẽ hiển thị phiên bản là:

0.18.0-pre.13.

Step 4 - Để cài đặt bản phát hành Polymer 2.0 RC mới nhất từ bower, hãy sử dụng lệnh sau.

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

Step 5 - Tạo một index.html và thêm mã sau vào thẻ <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

Step 6 - Bắt đầu dự án của bạn bằng lệnh sau.

polymer serve

Xây dựng để Triển khai

Để xây dựng dự án của bạn để triển khai, polymer build lệnh là một cách dễ dàng hơn, sẽ rút gọn, biên dịch hoặc gói mã của bạn tùy thuộc vào các cờ dòng lệnh.

Để tạo một bản dựng chung hoạt động trên tất cả các trình duyệt, hãy sử dụng lệnh sau.

polymer build --js-compile

Lệnh trên sẽ xây dựng dự án để xây dựng / mặc định và bạn có thể khởi động thư mục này bằng cách sử dụng lệnh sau.

polymer serve build/default

Polymer 2.0 sử dụng ES6 và HTML Custom Elements. Để thực hành tốt nhất, bạn nên sử dụng ES6 cho các trình duyệt có hỗ trợ ES6 đầy đủ và biên dịch ES5 sang các trình duyệt cũ không hỗ trợ ES6. Bảng sau đây cho thấy chiến lược tốt nhất cho dự án của bạn.

Chiến lược	Dễ dàng nhất để hỗ trợ nhiều trình duyệt	Tối ưu nhất cho hiệu suất WC v1
Người phục vụ	Mọi máy chủ đều hoạt động, kể cả những máy chủ tĩnh	Khẩu phần khác biệt được yêu cầu
Mã đã triển khai	ES5 chuyển	ES6
Bộ nạp Polyfill	webcomponents-es5-loader.js	webcomponents-loader.js