通过这篇文章，我们学习如何在 Phoenix(当前版本是 1.3) 中安装 UIKit3。

预备知识

显然你的电脑中应该安装Elixir和Phoenix。你还需要安装NPM，通过它我们会安装Brunch及其它的一些依赖库。

安装

先新建一个 Phoenix 工程，

mix phx.new phx_uikit

当安装依赖库的时候注意最后一行

* running cd assets && npm install && node node_modules/brunch/bin/brunch build

它将会执行npm install，在 assets 目录中安装brunch构建工具 因此下一步进入到assets目录后，安装相关的依赖库

cd phx_uikit/assets
npm install --save-dev sass-brunch
npm install --save uikit jquery

我们将会安装sass-brunch来编译 SCSS/SASS，我们还将安装uikit及jQuery(因为 uikit 需要它)。 ###配置 我们安装好了依赖库，现在做一下简单的配置。所有的配置代码都是在assets/brunch-config.js中进行。 把下面的代码拷贝到该文件的 plugins 对象里：

sass: {
  options: {
    includePaths: ["node_modules/uikit/src/scss"]
  }
}

下一步我们需要添加 uikit 的 JavaScript 库到 app 中。我们仅需要添加下面的代码到 npm 对象：

globals: {
  $: "jquery",
  uikit: "uikit",
  icons: "uikit/dist/js/uikit-icons"
}

这一段会告诉 brunch 我们将使用 $ 来全局使用 jQuery，用 uikit 来使用 uikit。 我们还会使用 uikit 的图标。因此添加下面的代码到 app.js 。

uikit.use(icons);

导入

为了使用 UIKit 所提供的 SCSS 文件，我们需要导入 SCSS 到我们到 main SCSS 文件。 首先我们重命名 app.css 为 app.scss，并且删除 phoenix.css。然后添加下面的代码到 app.scss 中。

@import "variables-theme";
@import "mixins-theme";
@import "uikit-theme";

这将会导入 uikit SCSS 到我们的工程当中。

测试

我们仅需要添加下面的代码到app.html.eex中来进行测试。

<div class="uk-alert-danger" uk-alert>
  <a class="uk-alert-close" uk-close></a>
  <h3>Notice</h3>
  <p>This is a paragraph</p>
</div>

启动mix phx.server查看结果。

原文链接

github 地址