将element-angular应用于使用angular-cli创建的项目

2 年 ago
逸, 科
2 minutes

對於有興趣在Angular中使用Element UI的你來說，我們得知在Vue.js社群中有一個很受歡迎的UI組件庫的Angular版本，所以我們可以試著與angular-cli一起使用它。

饿了么/饿了么角

条件

当我尝试此文章内容时所使用的angular-cli版本如下所示。

$ ng version
@angular/cli: 1.4.1
node: 8.1.3
os: darwin x64

element-angular似乎仍然是Beta版本。

"element-angular": "0.0.4-beta.3"

准备

创建一个基础项目

首先，使用angular-cli创建一个基础项目。

$ ng new element-angular-handson

安装element-angular。

按照公式的”入门指南”进行安装。

安装程序本体

$ npm i --save element-angular

在app.module.ts中导入ElModule。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ElModule } from 'element-angular'; // 追加

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    ElModule.forRoot() // 追加
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

使用style.css导入Element UI的CSS。

@import "~element-theme-default";

只要试一试就知道。

通过这些步骤，所有Element UI组件都可以使用了。

<el-menu class="el-menu-demo" mode="horizontal">
  <el-menu-item index="1">Toolbar</el-menu-item>
  <el-submenu index="2" title="menu">
    <el-menu-item index="2-1">item1</el-menu-item>
    <el-menu-item index="2-2">item2</el-menu-item>
    <el-menu-item index="2-3">item3</el-menu-item>
  </el-submenu>
  <el-submenu index="3" title="menu2">
    <el-menu-item index="3-1">item1</el-menu-item>
    <el-menu-item index="3-2">item2</el-menu-item>
    <el-menu-item index="3-3">item3</el-menu-item>
  </el-submenu>
  <el-menu-item index="4"><a href="https://github.com/eleme/element-angular" target="_blank">Link</a></el-menu-item>
</el-menu>

<h1>てすと</h1>
<el-button>Button</el-button>

当使用 npm start 命令启动开发服务器并检查 http://localhost:4200 时…
将会显示如下的工具栏。

スクリーンショット 2017-10-07 18.37.39.png

因此所以被感受到的

由于它仍处于Beta版，似乎还不支持多语言和区域设置等功能。
我试着使用了DatePicker，但是感到困扰的是星期几的表示是固定为中文，感到有些不便。
不必担心区域设置的部分，可以像Vue.js版Element UI一样无障碍地使用。

这就是以上内容。

bannerAds