angular2 +Polymer 环境搭建

最新推荐文章于 2024-05-05 12:54:04 发布

insistWY

最新推荐文章于 2024-05-05 12:54:04 发布

阅读量485

点赞数

分类专栏：前端 angular 文章标签： angular polymer

前端同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

angular

1 篇文章 0 订阅

订阅专栏

安装angular-cli(推荐使用淘宝镜像,不然忒慢)

cnpm install -g angular-cli

新建项目

ng new qz

测试环境搭建有无问题

cd qz
ng build
ng test
ng serve
输入localhost:4200

因为Polymer 是使用bower来管理依赖，所以我们的环境中还需要安装bower

cnpm install -g bower

安装完毕后，初始化bower

bower init

一路默认就行，需要注意的一点是，bower的安装目录是在bower_components,但是我们环境的静态资源目录是在src/assets下，所以需要修改bower_components的默认路径,修改方法为:
新建一个文件.bowerrc放在项目的根目录下，其内容为:

.bowerrc

{
  "directory" : "src/assets/bower_components"
}

安装我们需要的Polymer组件

bower install –save paper-elements vaadin-combo-box

在app/index.html里添加以下代码(引用别的组件也是一样)

<head>
  ...

  <script src="assets/bower_components/webcomponentsjs/webcomponents.min.js"></script>
  <script>
    window.Polymer = {
      dom: 'shadow'
    };
  </script>
  <link rel="import" href="assets/bower_components/paper-styles/color.html">
  <link rel="import" href="assets/bower_components/paper-styles/typography.html">
  <link rel="import" href="assets/bower_components/vaadin-combo-box/vaadin-combo-box.html">
  <link rel="import" href="assets/bower_components/paper-input/paper-input.html">
</head>

这里我遇到一个坑，没有填平！！如下:
因为在angular启动之前需要进行Polymer的加载和注册，所以官方给出解决办法是:新建src/main-polymer.ts，内容为:

document.addEventListener('WebComponentsReady', () => {
  require('./main.ts');
});

修改angular-cli.json

“main”: “main.ts”, 改成 “main”: “main-polymer.ts”

我的运行会报错，所以我并没有修改angular-cli.json

坑解决： angular-cli: 1.0.0-beta.22-1 变成 1.0.0-beta.21

安装polymer在angular2中的依赖

cnpm install –save @vaadin/angular2-polymer

在app.module.ts中引入

import { BrowserModule } from '@angular/platform-browser';
import { NgModule ,CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { PolymerElement } from '@vaadin/angular2-polymer';
@NgModule({
  declarations: [
    AppComponent,
    PolymerElement('vaadin-combo-box'),
    PolymerElement('paper-input')
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]//自定义样式的
})
export class AppModule { }

src/app/app.component.html

<h1>{{title}}</h1>
<vaadin-combo-box [label]="myLabel" [(value)]="myValue" [items]="myItems"></vaadin-combo-box>
<paper-input [(value)]="myValue"></paper-input>

src/app/app.component.ts

import { Component } from @angular/core';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
})
export class AppComponent {
  title = 'app works!';
  myLabel = 'Select a number';
  myValue = '4';
  myItems = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
}

src/index.html

<head>
  ...
  <style is="custom-style">
    body {
      @apply(--paper-font-body1);
    }
  </style>
</head>

src/app/app.component.css

paper-input,
vaadin-combo-box {
  background: var(--paper-grey-200);
  padding: 8px;
}

官网地址:https://vaadin.com/docs/-/part/elements/angular2-polymer/ng-cli-webpack.html

insistWY

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angular2 +Polymer 环境搭建

安装angular-cli(推荐使用淘宝镜像,不然忒慢) cnpm install -g angular-cli新建项目 ng new qz测试环境搭建有无问题 cd qz ng build ng test ng serve 输入localhost:4200因为Polymer 是使用bower来管理依赖，所以我们的环境中还需要安装bower cnpm i
复制链接

扫一扫

专栏目录