Polymer App 工具箱 是组件,工具和模板的一个集合,用来使用 Polymer 构建渐进式 Web App。

按照以下说明,使用 App 工具箱模板,在不到 15 分钟内安装、创建和部署一个项目。

Polymer CLI 是 Polymer 项目的一个一体化命令行工具。在本教程中,您使用 Polymer CLI 初始化,服务和构建您的项目。 您还可以使用它来进行代码检查和测试,但本教程不会涵盖这些主题。

To work with Polymer CLI, you will need a Node.js version supported by the Polymer toolset, npm, Git, and Yarn. For full installation instructions, see the Polymer CLI documentation.

Once you have the prerequisites set up, install Polymer CLI:

npm install -g polymer-cli
  1. Create a new project folder to start from.

     mkdir my-app
     cd my-app
    
  2. 使用 App 模板初始化您的项目

     polymer init
    

    Press the down arrow until polymer-3-starter-kit is highlighted and press the enter / return key to select.

Polymer CLI downloads and installs dependencies, and creates an app from the polymer-3-starter-kit template.

App 工具箱模板不需要任何构建步骤即可开始开发。您可以使用 Polymer CLI 服务应用,并且您所做的文件更改将通过刷新浏览器立即可见。

要服务您的项目:

polymer serve

The output of the polymer serve command tells you where your app is served. In a web browser, open the URL shown at applications. For example:

~/my-app > polymer serve
info: [cli.command.serve]    Files in this directory are available under the following URLs
      applications: http://127.0.0.1:8081
      reusable components: http://127.0.0.1:8081/components/polymer-starter-kit/

下图是项目中的文件和目录的简要摘要。

images/
index.html             # main entry point into your app
manifest.json          # app manifest configuration
node_modules           # installed npm dependencies used in your app
package-lock.json      # dependency management file generated by npm
package.json           # npm metadata file
polymer.json           # Polymer CLI configuration 
service-worker.js      # auto-generated service worker
src/                   # app-specific elements
  my-app.js            # top-level element
  my-icons.js          # app icons
  my-view1.js          # sample views or "pages"
  my-view2.js
  my-view3.js
  my-view404.js        # sample 404 page
  shared-styles.js     # sample shared styles
sw-precache-config.js  # service worker pre-cache configuration
test/                  # unit tests

您的 App 现已建立并在本机运行。接下来,了解如何向您的 App 添加页面。

下一步:创建页面