Примечание. Обновление этой статьи, в котором используется 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. Вы можете использовать его как справочник.