Uikit with VueJS — Vue cli 3

安裝 Vue-cli3

這一節針對 vue-cli 3 的設置。若是你已經熟悉 vue-cli 3了，能夠跳過直接去看添加 UIkit 的部分。

若是你還在使用 vue-cli 2.0，首先須要卸載它。而後安裝 vue-cli 3.0 。

安裝 vue-cli 3.0

npm install -g @vue/cli
# OR
yarn global add @vue/cli

查看版本號：

vue --version

新建項目

cd到你要建立項目的文件夾，而後：

vue ui

開啓 vue-cli 3.0 的 GUI。它很是棒。


使用 Create 按鈕新建項目。使用 Import 按鈕導入已有項目。


如今能夠選擇你須要的功能，而後它們會自動安裝並設置。Cli 3 magic ✨

我選擇了全部的，除了 typescript。

等待 vue-cli 完成項目設置。

添加 UiKit

在 Dependencies 部分，點擊右上角的按鈕添加新的依賴。

搜索並選擇 uikit

好了，如今安裝好了 Uikit。

編輯 App.vue

編輯 src/App.vue。必須添加 script。

<script>
import UIkit from 'uikit';
import Icons from 'uikit/dist/js/uikit-icons';
UIkit.use(Icons);
export default {
  name: 'App',
};
</script>>
<style lang="less">
@import "../node_modules/uikit/src/less/uikit.less";
</style>

你的 src/App.js應該相似這樣：

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view/>
  </div>
</template>
<script>
import UIkit from 'uikit';
import Icons from 'uikit/dist/js/uikit-icons';
UIkit.use(Icons);
export default {
  name: 'App',
};
</script>>
<style lang="less">
@import "../node_modules/uikit/src/less/uikit.less";
</style>

編輯 HelloWorld.vue

替換src/components/HelloWorld.vue中的 template標籤。

我這裏是從 UIkit 網站上覆制的導航欄模板。https://getuikit.com/docs/nav...

<template>
  <div class="hello">
<nav class="uk-navbar-container" uk-navbar>
    <div class="uk-navbar-left">
<ul class="uk-navbar-nav">
            <li class="uk-active"><a href="#">Active</a></li>
            <li>
                <a href="#">Parent</a>
                <div class="uk-navbar-dropdown">
                    <ul class="uk-nav uk-navbar-dropdown-nav">
                        <li class="uk-active"><a href="#">Active</a></li>
                        <li><a href="#">Item</a></li>
                        <li><a href="#">Item</a></li>
                    </ul>
                </div>
            </li>
            <li><a href="#">Item</a></li>
        </ul>
</div>
</nav>
  </div>
</template>

你的 src/components/HelloWorld.vue文件如今應該相似這樣。另外，刪除 style 標籤中的全部內容。

<template>
  <div class="hello">
<nav class="uk-navbar-container" uk-navbar>
    <div class="uk-navbar-left">
<ul class="uk-navbar-nav">
            <li class="uk-active"><a href="#">Active</a></li>
            <li>
                <a href="#">Parent</a>
                <div class="uk-navbar-dropdown">
                    <ul class="uk-nav uk-navbar-dropdown-nav">
                        <li class="uk-active"><a href="#">Active</a></li>
                        <li><a href="#">Item</a></li>
                        <li><a href="#">Item</a></li>
                    </ul>
                </div>
            </li>
            <li><a href="#">Item</a></li>
        </ul>
</div>
</nav>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String,
  },
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">

</style>

你能夠刪除style標籤裏的內容，若是須要的話。我這裏暫且留着它。

開啓開發服務器

yarn serve
# or
npm run serve

你將看到相似這樣的畫面：

圖中的 Home | About 和 Vue Logo 來自於 src/views/Home.vue 文件。

若是能看到 Uikit 的導航欄，說明你已經成功了。

添加 UiKit 樣式

你大概注意到了，咱們的開發頁面上的樣式並不和 Uikit 網站上的 demo 同樣。咱們來修改它。

打開 Uikit 網站的 Github 倉庫： https://github.com/uikit/uiki...

在 less文件夾下有兩個文件，是咱們說須要的。

在你的項目的 src/assets 文件夾中，建立三個新的文件夾。

cd src/assets
mkdir fonts images less

複製 highlight.less 和 theme.less 到 less文件夾中。

cd less
wget https://raw.githubusercontent.com/uikit/uikit-site/develop/less/highlight.less
wget https://raw.githubusercontent.com/uikit/uikit-site/develop/less/theme.less

須要對theme.less進行一些修改。

修改第一行 @import "../assets/uikit/src/less/uikit.theme.less 爲：

@import "../../../node_modules/uikit/src/less/uikit.theme.less";

修改第二行

@import "highlight.less";
# to
@import "./highlight.less";

在theme.less下面，還有一些引入的字體。獲取它們：

cd ../fonts
UK="https://getuikit.com"
wget $UK/fonts/ProximaNova-Light-webfont.woff2
wget $UK/fonts/ProximaNova-Light-webfont.woff
wget $UK/fonts/ProximaNova-Reg-webfont.woff2
wget $UK/fonts/ProximaNova-Reg-webfont.woff
wget $UK/fonts/ProximaNova-Sbold-webfont.woff2
wget $UK/fonts/ProximaNova-Sbold-webfont.woff
wget $UK/fonts/montserrat-600.woff2
wget $UK/fonts/montserrat-600.woff
wget $UK/fonts/roboto-mono-regular.woff2
wget $UK/fonts/roboto-mono-regular.woff

theme.less再往下，還有一行：

url("../images/section-background.svg")

一樣，咱們也獲取它：

cd ../images
UK="https://getuikit.com"
wget $UK/images/section-background.svg

搞定！~

咱們完成了全部設置。只需修改 App.js中的樣式部分引入咱們的新文件。

<style lang="less">
@import "../node_modules/uikit/src/less/uikit.less";
@import "./assets/less/theme.less";
</style>

重啓開發服務器。樣式變得和 Uikit 網站上同樣了：

注意：我把導航欄替換成了表格和一些其餘組件。還移除了 vue 文件裏自動生成的樣式。

結論

你能夠找到個人 Github 倉庫，它是按此教程的流程建立的：https://github.com/zeroby0/vu...

DEMO 在這裏：https://vue3-uikit.netlify.com/

🙂