为 vue.js / Nuxt.js 构建的 Tailwind css UI 组件。
特点
- 组件样式唯一依赖于 Tailwind CSS 预设类
- 响应式
- 支持明暗模式
- 无依赖
使用
1.将mijin依赖项添加到您的项目
# using npm
npm install mijin tailwindcss --save-dev
# using yarn
yarn add mijin tailwindcss --dev
2.将 mijin Tailwind CSS 预设添加tailwind-preset.js到您的 Tailwind CSS 配置文件中tailwind.config.js
// tailwind.config.js
const mijin = require('mijin/dist/tailwind-preset.js');
module.exports = {
// load mijin presets
presets: [
mijin,
],
// allow PurgeCSS to analyze mijin components
purge: {
content: [
'node_modules/mijin/src/components/**/*.vue',
],
},
};
3.在您的 vue 应用程序中加载插件：
Vue.js
import Vue from 'vue'
import Mijin from 'mijin'
Vue.use(Mijin)
// or load specific components
import {
Button
Input,
// ...
} from 'mijin'
Vue.component('MjButton', Button)
Vue.component('MjInput', Select)
Nuxt.js
将mijin.js文件添加到您的plugins目录
// plugins/mijin.js
import Vue from 'vue';
Vue.use(Mijin)
从加载插件nuxt.config.js
// nuxt.config.js
...
plugins: [
'~/plugins/mijin.js',
],
...
链接: https://fly63.com/nav/3809
