Примечание. Обновление этой статьи, в котором используется Vue CLI 3.0, находится здесь: https://aravindvoggu.in/uikit-with-vuejs-vue-cli-3-db811e43c46b. Я рекомендую эту статью. 29 сентября 2018.

Когда я начал работать с VueJS, я хотел использовать UIKit в своем проекте, но понятия не имел, как это сделать. Поскольку в Интернете нет инструкций, как это сделать, я решил, что сделаю один.

Что не очень очевидно, так это то, что вам нужно установить less-loader и css-loader, иначе вы получите очень длинное сообщение об ошибке; что-то вроде этого

Фактическое сообщение об установке css-loader потерялось в мусоре, и я скопировал 5-строчную команду, что, конечно же, привело к ошибке.

Я использовал шаблон webpack, в который идут батарейки. Сначала установите vue-cli.

npm install -g vue-cli
vue init webpack my-project
cd my-project
npm install

npm run dev, чтобы проверить вашу установку.

Теперь установите less compiler, less-loader и css-loader.

npm install --save-dev less-loader less
npm install --save-dev css-loader

Теперь установите UIKit.

npm install --save jquery uikit

Включите UIKit в src/App.vue, чтобы вам не приходилось включать его в каждый .vue файл. Вот мой App.vue

<template>  
    <div id="app">
        <router-view>
        </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">

</style>

Вот и все. Теперь вы можете использовать компоненты UIKit в своих .vue файлах.

Тематика

Понравилась тематика, используемая на сайте UIKit. То, что вы получаете, когда устанавливаете UIKit через npm, немного отличается. Чтобы получить эту тему, перейдите к источнику этого веб-сайта на github и найдите файл темы, отредактируйте ссылки и используйте его.

Я избавлю тебя от неприятностей. Получите содержимое файла с: https://pastebin.com/FvgfYzQZ и вставьте его в src/assets/theme/base-theme.less. Этот путь не существует, создайте его.

src/assets/theme/theme.less - это то место, где мы переопределяем тему. Создайте его и импортируйте base-theme.less в theme.less

/* src/assets/theme/theme.less */
@import './base-theme.less';

Теперь импортируйте theme.less в свой App.vue

/* src/App.vue */
<style lang="less">
    @import './assets/theme/theme.less';
</style>

Отредактировал ссылки base-theme.less файл в pastebin, поменяю их соответственно. Наиболее важно первая строка, в которую импортируется theme.less из uikit. import "../../../node_modules/uikit/src/less/uikit.theme.less, измените его, если планируете разместить свои темы в каком-то другом каталоге. Во-вторых, шрифты скачиваются с getuikit.com, скачивайте шрифты и меняйте ссылки.

Вот и все, дайте мне знать в комментариях, если есть ошибка или вам нужны разъяснения.

Репозиторий, созданный с помощью этих инструкций, находится по адресу: https://github.com/zeroby0/vue-uikit-webpack. Вы можете использовать его как справочник.