安装

npm 安装

推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。

# npm i --save element-angular

Hello world

引入模块后，我们能轻易地构建一个简易页面

Webpack

使用 webpack 的引入方式：

import { BrowserModule } from '@angular/platform-browser'
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
// import module
import { ElModule } from 'element-angular'
// if you use webpack, import style
import 'element-angular/theme/index.css'
@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    ElModule.forRoot(),
    ...
  ],
    ...
  bootstrap: [ExAppComponent],
})
// components
template: '<el-button>Hello World</el-button>'

Angular CLI

如果你使用 angular-cli，你需要样式文件在 /src/styles 引入：

// in /src/styles.css
// add code:
/* You can add global styles to this file, and also import other style files */
@import "~element-angular/theme/index.css";

如果你自定义了一些样式编译方案，可能上述引入样式文件方式无法完成编译，请参考如下：

// in /angular-cli.json
// improve config :
{
  "app": [{
    "styles": [
      "../node_modules/element-angular/theme/index.css"
    ],
    // other configurations...
  }]
}

如果你希望能够通过模块、异步模块、子模块来引入 element-angular，请参阅下一章