尝试在Angular中引入Semantic UI

2 年 ago
科, 雅
1 minute

原本已經在Riot.js中使用Semantic UI的現有網站被重新建立為Angular，因此我在那時感到非常困惑：”我根本不懂Angular…我該怎麼加入CSS框架呢？” 因此，我在這裡記錄下當時的步驟作為紀錄。這個方法是一個初學者通過不斷搜索後找到的，如果有錯誤，請原諒。

公式指南

https://semantic-ui.com/introduction/getting-started.html 这个链接介绍了如何开始使用Semantic UI。由于我英语很差，所以翻译后的内容我看不太懂。。

开发环境

由于我使用的版本是5，所以省略了环境配置。

$ ng -v

Angular CLI: 1.7.4
Node: 12.18.3
OS: darwin x64
Angular: 5.2.11
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.7.4
@angular-devkit/build-optimizer: 0.3.2
@angular-devkit/core: 0.3.2
@angular-devkit/schematics: 0.3.2
@ngtools/json-schema: 1.2.0
@ngtools/webpack: 1.10.2
@schematics/angular: 0.3.2
@schematics/package-update: 0.3.2
typescript: 2.5.3
webpack: 3.11.0

创建一个新项目

$ ng new app-name

安装 Semantic UI。

PC_Name:app-name MyName.$ npm install semantic-ui-css

加载Semantic UI

"apps": [
    {
      //省略

      "styles": [
        "../node_modules/semantic-ui-css/semantic.min.css",  //ここを追記
        "styles.css"
      ],

      //省略

这就完成了

只需将官方的类名添加到HTML的class属性中，如”ui tiny image”或”ui”，即可应用Semantic UI。

bannerAds