semantic ui要裝什麼才能使用

時間 2019-12-09

標籤 semantic 什麼才能使用简体版

原文原文鏈接

做者：呆呆笨笨
連接：https://www.zhihu.com/question/32233356/answer/196799506
來源：知乎
著做權歸做者全部。商業轉載請聯繫做者得到受權，非商業轉載請註明出處。

本答案將以兩種方式講解如何從零開始使用 Semantic-UI，其中第一種方式僅要求讀者理解最基本的 HTML 語法。css

方式一：不用 npm

對於初學者來講，node, npm, gulp 等工具會形成很多麻煩，即陷入所謂的「依賴地獄」(dependency hell)。若是你不想用這些工具，能夠簡單地將 Semantic-UI 預編譯好的 CSS 和 JavaScript 文件加入到 HTML 的 <head> 元素中，就跟你將 jQuery.min.js 加進去同樣。html

1. 建立 index.html前端

<html>
  <head>
  </head>

  <body>
    <div>
      Default
    </div>

    <div>
      <div>
        Item A
      </div>
      <div>
        Item B
      </div>
      <div>
        Item C
      </div>
    </div>
  </body>
</html>

如今頁面看起來是這樣的：node

2. 下載 CSS 和 JS 文件jquery

Semantic-UI 在 GitHub 上的代碼倉庫裏，有準備好的 CSS 和 JS 文件供下載： https://github.com/Semantic-Org/Semantic-UI/tree/master/distgit

咱們目前須要的是 semantic.min.css 和 semantic.min.js 這兩個文件，將它們加入到 HTML 的頭部：github

<head>
  <link href="./semantic.min.css" rel="stylesheet" type="text/css">
  <script src="./jquery.min.js"></script>
  <script src="./semantic.min.js"></script>
</head>

你會發現中間多了一個 jquery.min.js，沒錯，若是你要使用 Semantic-UI 涉及 JavaScript 的高級功能，好比 tab, progress, sticky, API 等，就必須加上 jQuery 庫，這是 Semantic-UI 所須要的所有依賴。web

這裏是一個 jQuery 的連接： https://code.jquery.com/jquery-3.1.1.min.jsnpm

3. 爲 div 元素設定 ui 類json

<body>
  <div class="ui button">
    Default
  </div>

  <div class="ui menu">
    <div class="item">
      Item A
    </div>
    <div class="item">
      Item B
    </div>
    <div class="item">
      Item C
    </div>
  </div>
</body>

而後去瀏覽器刷新一下，能夠看到：

聰明的你會發現，」ui button」就表明一個按鈕，而「ui menu」是一個菜單，以此類推，」ui label」是標籤，」ui input」是輸入框，等等。因此使用 Semantic-UI 時，最重要的魔法關鍵詞就是「ui」。

如今的目錄結構(文件夾)也十分直觀，易於理解：

這一個例子展現瞭如何從零開始使用 Semantic-UI，包括目錄結構，HTML 的結構。除了按鈕，菜單，Semantic-UI 目前支持 50 多種網站中常見的 UI 組件，詳細文檔請打開官網查閱：https://semantic-ui.com

錄製了一個簡單的視頻，暫時放在 YouTube 上 (英文)，感興趣的話請點擊：

https://www.youtube.com/watch?v=JyBKcfLUabc

方式二：用 npm

若是你已經有一些前端開發的經驗，至少對 npm 感到不陌生，並據說過 gulp，那麼在你的項目中使用 Semantic-UI 將變得更加便捷。

爲了簡單舉例，仍舊只使用一個基本的 index.html：

若是你沒有安裝過 gulp，那請用這條命令安裝它：

npm install -g gulp

1. Npm 項目初始化

npm init

這一步很是重要，新手一般會漏掉，形成後面不少文件路徑方面的麻煩。輸入該命令後，它會提示你輸入項目名稱等信息，直接點肯定，使用默認值便可。結束以後會在當前目錄建立一個 package.json 的文件。

2. 安裝 Semantic-UI

npm install —-save semantic-ui

根據網速狀況，可能會花幾分鐘到十幾分鐘不等。安裝完成後，當前目錄會多出 3 個條目：

你能夠查看一下 semantic/ 目錄的詳細狀況：

3. 編譯 Semantic-UI 的 CSS 和 JS 文件

cd semantic
gulp build

若是你安裝的 gulp 沒有任何問題，在一臺配置不錯的電腦上，這一步會花費大約 20 秒的時間，有時會稍長一些。

這樣一切就準備就緒了：

4. 將編譯好的 CSS 和 JS 加到 HTML 頭部

<head>
  <link href="./semantic/dist/semantic.min.css" rel="stylesheet" type="text/css">
  <script src="./jquery.min.js"></script>
  <script src="./semantic/dist/semantic.min.js"></script>
</head>

與第一個例子相比，只是修改了 semantic.min.css 和 semantic.min.js 的文件路徑。這裏是爲了說明方便，若是是實際使用，<script> 標籤最好放到 <body> 標籤的末尾，你確定知道這一點了。

簡單的頁面就寫好了，在瀏覽器裏能夠打開查看。你能夠本身在「ui」後加一些詞語，label, input 等看看會有什麼效果。

這個例子的視頻長一些，是 7 分鐘，中間有一些實際安裝的步驟，暫時放在 YouTube 上 (英文)，感興趣請點擊： https://www.youtube.com/watch?v=F_iTE_j7erw

----------------------------------------

本文中文版原地址(知乎專欄):

從零開始用 Semantic-UI 搭建網頁 - 知乎專欄

本文英文版地址：

Building websites with Semantic-UI from scratch

更多 Semantic-UI 的模版，主題和教程請訪問：

http://semantic-ui-forest.com

Happy coding!