vue引入各类ui库原

晓歌

发布于 2018-12-20 16:59:15

6K0

发布于 2018-12-20 16:59:15

文章被收录于专栏：破晓之歌破晓之歌

一、vue-cli引入各类库

1. Semantic UI

（1）方式1：直接引入semantic-ui-css

本身集成并没有vue的部分，我们采用的方式是把ui-css部分拿来使用，js效果自己用jquery写到methods里

首先，我们需要先安装 jQuery

npm install --save jquery

然后在 webpack.dev.config.js 文件中，添加

// plugins 区块内
new webpack.ProvidePlugin({
  $              : "jquery",
  jQuery         : "jquery",
  "window.jQuery": "jquery",
  "root.jQuery"  : "jquery"
})

随后安装 semantic-ui-css

npm install semantic-ui-css --save

之后在 webpack.base.config.js 文件中添加，

// resolve 区块
resolve      : {
    extensions: ['', '.js', '.vue'],
    fallback  : [path.join(__dirname, '../node_modules')],
    alias     : {
      'vue'       : 'vue/dist/vue.common.js',
      'src'       : path.resolve(__dirname, '../src'),
      'assets'    : path.resolve(__dirname, '../src/assets'),
      'components': path.resolve(__dirname, '../src/components'),
      // Semantic-UI
      'semantic'  : path.resolve(__dirname, '../node_modules/semantic-ui-css/semantic.min.js')
    }
}

随后在 webpack.dev.config.js 文件中，添加

  plugins: [
    new webpack.ProvidePlugin({
      $              : "jquery",
      jQuery         : "jquery",
      "window.jQuery": "jquery",
      "root.jQuery"  : "jquery",
      // Semantic-UI
      semantic     : 'semantic-ui-css',
      Semantic     : 'semantic-ui-css',
      'semantic-ui': 'semantic-ui-css'
    }),

接下来，main.js引入 css 和 js 文件:

import semantic from 'semantic'
import '../node_modules/semantic-ui-css/semantic.min.css'

Vue.use(semantic)

接下来，我们要测试一下，添加一个 vue 文件：

<template>
  <div>
    <div class="semantic-component">
      <div class="ui selection dropdown semanticDropDown">
        <input type="hidden" name="gender" v-model="selected">
        <i class="dropdown icon"></i>
        <div class="default text">Gender</div>
        <div class="menu">
          <div class="item" :key="item.Value"
              v-for="item in items"
              @click="changeSelection(item)">
            {{ item.Gender }}
          </div>
        </div>
      </div>
      <pre>{{ JSON.stringify(selectedItem) }}</pre>
      <i class="ae flag"></i>
      <i class="france flag"></i>
      <i class="myanmar flag"></i>
      <div class="ui medium image">
      <div class="ui dimmer" @mouseleave="chaB">
        <div class="content">
          <div class="center">
            <h2 class="ui inverted header">Title</h2>
            <div class="ui primary button">Add</div>
            <div class="ui button">视图</div>
          </div>
        </div>
      </div>
        <img class="ui image" @mouseover="chaA" src="../assets/images/wireframe/image.png">
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      items: [
        {Gender: 'Male', Value: 1},
        {Gender: 'Female', Value: 0}
      ],
      selected: '',
      selecteditem: {}
    }
  },
  mounted () {
    $(this.$el).find('.semanticDropDown').dropdown()
  },
  methods: {
    chaA () {
      $('.ui.dimmer').dimmer('show');
    },
    chaB () {
      $('.ui.dimmer').dimmer('hide');
    },
    changeSelection (item) {
      this.selectedItem = item
      this.selected = item.Value
    }
  }
}
</script>

注意：动作部分需要自己根据给出的，用jquery添加为methods，不要和boostrap混用，会被影响

（2）方式2：引入semantic源文件，修改主题

进入项目目录下，下载semantic-ui

npm install semantic-ui --save

过程中选择Automatic(自动安装全部组件）——>No, let me specify（自定义安装路径）——>项目路径下\node_modules（绝对路径）

安装完成后可以看到

以及\node_modules路径下的semantic.json文件

把它移动到对应目录下

cd node_modules/semantic

进入目录下

gulp build

执行打包命令

生成dist目录

import 'semantic/dist/semantic.min.css'
import 'semantic/dist/semantic.min.js'

引入css和js

对项目目录下\node_modules\semantic\src\theme.config文件进行选择，例如途中将默认的按钮样式改为圆形

gulp build

运行打包后刷新

按钮样式改变

在项目目录下\node_modules\semantic\src\themes\round\elements\button.variables的该主题下.variables的文件中改变主色为红色

gulp watch

只对修改过的文件，重新打包，速度更快

颜色修改好

也可以在项目文件夹\node_modules\semantic\src\site\globals\site.variables的文件中修改为黄色

注意：打包时theme优先级>site下element优先级>site下全局优先级（.variables>.overrides）

查找过程中发现汉化的文档（有中文视频教程）：https://semantic-ui.qyears.com/

参考：https://segmentfault.com/a/1190000007248072

2.radon

npm install radon-ui -s

项目目录下安装

import 'radon-ui/dist/radon-ui.css'
import 'radon-ui/dist/radon-ui.js'

main.js引入

<template>
  <div>
    <div class="container">
      <rdText :textfield="test"></rdText>
    </div>
    <rd-timeline :timeline="timeline"></rd-timeline>
  </div>
</template>

<script>
import { rdText,rdTimeline } from 'radon-ui'
export default {
  data () {
    return {
      test: {
        value: '',
        placeHolder: '请输入',
        state: 'success',
        tip: '',
        inline: true
      },
      timeline: [{
          icon: 'ion-alert-circled',
          color: '#2db7f5',
          text: '连接服务器 2016-06-16 20:01:12'
      },
      {
          color: '#2db7f5',
          text: '准备上传文件 2016-06-16 20:01:13'
      },
      {
          color: 'red',
          text: '上传失败 2016-06-16 20:01:14'
      }]
    }
  },
  components: {
    rdText: rdText,
    rdTimeline: rdTimeline
  }
}
</script>

.vue使用

使用简单，但文档中并没找到主题和颜色的修改

3.Muse UI

npm i muse-ui -S

安装

import MuseUI from 'muse-ui';

Vue.use(MuseUI);

引入

MuseUI.theme.add('myTheme', {
  primary: MuseUI.Colors.blue,
  secondary: MuseUI.Colors.pinkA200,
  success: MuseUI.Colors.green,
  warning: MuseUI.Colors.yellow600,
  info: MuseUI.Colors.blue,
  error: MuseUI.Colors.red,
}).use('myTheme');

搭配主题配色

<template>
<div>
  <mu-container class="button-wrapper">
    <mu-button color="primary">Primary</mu-button>
    <mu-button color="secondary">Secondary</mu-button>
    <mu-button color="success">Success</mu-button>
    <mu-button color="warning">Warning</mu-button>
    <mu-button color="info">Info</mu-button>
    <mu-button color="error">Error</mu-button>
    <mu-button disabled>disabled</mu-button>
  </mu-container>
  <mu-container>
  <mu-flex justify-content="center" align-items="center">
    <mu-switch style="margin-left: 16px" v-model="docked" label="docked"></mu-switch>
    <mu-radio style="margin-left: 16px" v-model="position" value="left" label="left"></mu-radio>
    <mu-radio style="margin-left: 16px" v-model="position" value="right" label="right"></mu-radio>
    <mu-button color="primary" style="margin-left: 16px" @click="open = !open">
      toggle
    </mu-button>
  </mu-flex>
  <mu-drawer :open.sync="open" :docked="docked" :right="position === 'right'">
    <mu-list>
      <mu-list-item button>
        <mu-list-item-title>Menu Item 1</mu-list-item-title>
      </mu-list-item>
      <mu-list-item button>
        <mu-list-item-title>Menu Item 2</mu-list-item-title>
      </mu-list-item>
      <mu-list-item  @click="open = false" button>
        <mu-list-item-title>Close</mu-list-item-title>
      </mu-list-item>
    </mu-list>
  </mu-drawer>
</mu-container>
</div>
</template>

<script>
export default {
  data () {
    return {
      docked: false,
      open: false,
      position: 'left'
    }
  },
  methods: {
  }
}
</script>
<style lang="styl">
.button-wrapper {
  text-align: center;
  .mu-button{
    margin: 8px;
  }
}
</style>

有些插件的是在包之外另外安装的，比如很喜欢的toast效果

npm install muse-ui-toast -S

安装这个插件，需要说明的是插件不能单独存在，依附在muse-ui上

import Toast from 'muse-ui-toast'
Vue.use(Toast)

main.js中新加引入

import 'muse-ui/dist/muse-ui.css'
import 'muse-ui/dist/muse-ui.js'
import MuseUI from 'muse-ui'
import Toast from 'muse-ui-toast' // 组件
Vue.use(Toast)
Vue.use(MuseUI)
MuseUI.theme.add('myTheme', {
  primary: MuseUI.Colors.blue,
  secondary: MuseUI.Colors.pinkA200,
  success: MuseUI.Colors.green,
  warning: MuseUI.Colors.yellow600,
  info: MuseUI.Colors.blue,
  error: MuseUI.Colors.red
}).use('myTheme')
Vue.use(Toast)

main.js引入相关

<template>
<div>
  <mu-button class="demo-button" @click="$toast.message('Hello World')" color="primary">message</mu-button>
  <mu-button class="demo-button" @click="$toast.success('Hello World')" color="success">success</mu-button>
  <mu-button class="demo-button" @click="$toast.warning('Hello World')" color="warning">warning</mu-button>
  <mu-button class="demo-button" @click="$toast.info('Hello World')" color="info">info</mu-button>
  <mu-button class="demo-button" @click="$toast.error('Hello World')" color="error">error</mu-button>
</div>
</template>

<script>
export default {
  data () {
    return {
    }
  },
  methods: {
  }
}
</script>
<style lang="styl">
.demo-button {
  margin: 6px 8px;
}
</style>

.vue

效果

4.Material Design（vuetify）

npm install vuetify --save

安装

import 'vuetify/dist/vuetify.min.css'
import 'vuetify/dist/vuetify.min.js'

import Vuetify from 'vuetify'
import colors from 'vuetify/es5/util/colors'
Vue.use(Vuetify, colors, {iconfont: 'mdi' // 'md' || 'mdi' || 'fa' || 'fa4',
}, {
  theme: {
    primary: colors.purple,
    secondary: colors.grey.darken1,
    accent: colors.shades.black,
    error: colors.red.accent3
  }
})

在main.js中引入，设置color

    <link href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons' rel="stylesheet">

在index.html的head区域加入图标连接

<template>
<v-app white>
    <v-layout>
      <v-flex xs12 sm6 offset-sm3>
        <v-card>
          <v-img
            src="https://cdn.vuetifyjs.com/images/cards/desert.jpg"
            aspect-ratio="2.75"></v-img>
          <v-card-title primary-title>
            <div>
              <h3 class="headline mb-0">Kangaroo Valley Safari</h3>
              <div>Located two hours south of Sydney in the <br>Southern Highlands of New South Wales, ...</div>
            </div>
          </v-card-title>
          <v-card-actions>
            <v-btn flat color="orange">Share</v-btn>
            <v-btn flat color="orange">Explore</v-btn>
          </v-card-actions>
        </v-card>
      </v-flex>
    </v-layout>
      <v-btn color="success">Success</v-btn>
      <v-btn color="error">Error</v-btn>
      <v-btn color="warning">Warning</v-btn>
      <v-btn color="info">Info</v-btn>
    <div class="text-xs-center">
      <v-rating v-model="rating"></v-rating>
    </div>
</v-app>
</template>

<script>
export default {
  data () {
    return {
      rating: 2,
      test: {
        value: '',
        placeHolder: '请输入',
        state: 'success',
        tip: '',
        inline: true
      },
      timeline: [{
        icon: 'ion-alert-circled',
        color: '#2db7f5',
        text: '连接服务器 2016-06-16 20:01:12'
      },
      {
        color: '#2db7f5',
        text: '准备上传文件 2016-06-16 20:01:13'
      },
      {
        color: 'red',
        text: '上传失败 2016-06-16 20:01:14'
      }]
    }
  },
  methods: {
  }
}
</script>

在.vue中使用，注意根节点需要以<v-app></v-app>作为节点名称，可选择white和black两种主题色

5.iview

npm install iview --save

安装

import 'iview/dist/styles/iview.css'
import iView from 'iview'
Vue.use(iView)

main.js

<template>
  <Row>
    <Col span="12">
      <DatePicker type="date" placeholder="Select date" style="width: 200px"></DatePicker>
    </Col>
    <Col span="12">
      <DatePicker type="daterange" placement="bottom-end" placeholder="Select date" style="width: 200px"></DatePicker>
    </Col>
  </Row>
</template>

<script>
export default {
  data () {
    return {
    }
  },
  methods: {
  }
}
</script>
<style lang="styl">
</style>

.vue

运行报错：iView将标签渲染为原生html标签时，由于这些标签是自闭合的，所以有end标签会报错。

    "vue/no-parsing-error": [2, { "x-invalid-end-tag": false }]

根目录下 - .eslintrc.js - rules，添加一行

@import '~iview/src/styles/index.less';

// Here are the variables to cover, such as:
@primary-color: #8c0776;

在assets下新建iview-variablaes.less文件

import './assets/iview-variables.less'

main.js中引入

如果报错没找到模型，先确认路径无误

npm install less@^2.7.3
npm install less-loader

安装less-loader

如果less安装在3.0.0版本以上的就会报错，原因：多了一层 import 会导致 less 编译的顺序发生变化

可安装版本可以在github上搜索相关查看

可以使用的版本

效果：主题色改变

6.Vue-material

npm install vue-material --save

安装

import 'vue-material/dist/vue-material.min.css'
import 'vue-material/dist/theme/default-dark.css' // 暗色主题
import VueMaterial from 'vue-material'
Vue.use(VueMaterial)

引入

    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic|Material+Icons">

index.html的head区域引入图标

<template>
  <div>
    <md-datepicker v-model="selectedDate" />
    <md-field>
      <label for="movie">First day of a week</label>
      <md-select v-model="firstDayOfAWeek">
        <md-option value="0">Sunday</md-option>
        <md-option value="1">Monday</md-option>
      </md-select>
      <span class="md-helper-text">This config is global.</span>
    </md-field>
  </div>
</template>

<script>
export default {
  name: 'BasicDatepicker',
  data: () => ({
    selectedDate: null
  }),
  computed: {
    firstDayOfAWeek: {
      get () {
        return this.$material.locale.firstDayOfAWeek
      },
      set (val) {
        this.$material.locale.firstDayOfAWeek = val
      }
    }
  }
}
</script>

.vue使用

响应式样式，移动、pc都可以使用

自定义主题：

@import "~vue-material/dist/theme/engine"; // Import the theme engine
@include md-register-theme("default", (
  primary: #3fffbe, // The primary color of your brand
  accent: #1a11e8 // The secondary color of your brand
));

@import "~vue-material/src/theme/all"; // Apply the theme

在assests下新建 vueMaterial-variables.less文件

import './assets/vueMaterial-variables.scss'

引入

主题颜色改变

7.Buefy

npm install buefy

安装

import 'buefy/dist/buefy.css'
import Buefy from 'buefy'
Vue.use(Buefy)

<template>
    <section>
        <button class="button is-medium is-primary" @click="alert">
            Launch alert (default)
        </button>
        <button class="button is-medium is-primary" @click="alertCustom">
            Launch alert (custom)
        </button>
        <button class="button is-medium is-danger" @click="alertCustomError">
            Launch alert (custom)
        </button>
    </section>
</template>

<script>
export default {
  methods: {
    alert () {
      this.$dialog.alert('Everything looks fine!')
    },
    alertCustom () {
      this.$dialog.alert({
        title: 'Title Alert',
        message: 'I have a title, a custom button and <b>HTML</b>!',
        confirmText: 'Cool!'
      })
    },
    alertCustomError () {
      this.$dialog.alert({
        title: 'Error',
        message: 'Something\'s not good but I have a custom <b>icon</b> and <b>type</b>',
        type: 'is-danger',
        hasIcon: true,
        icon: 'times-circle',
        iconPack: 'fa'
      })
    }
  }
}
</script>

更换主题：

// Import Bulma's core
@import "~bulma/sass/utilities/_all";

// Set your colors
$primary: #000;
$primary-invert: findColorInvert($primary);
$twitter: #4099FF;
$twitter-invert: findColorInvert($twitter);

// Setup $colors to use as bulma classes (e.g. 'is-twitter')
$colors: (
    "white": ($white, $black),
    "black": ($black, $white),
    "light": ($light, $light-invert),
    "dark": ($dark, $dark-invert),
    "primary": ($primary, $primary-invert),
    "info": ($info, $info-invert),
    "success": ($success, $success-invert),
    "warning": ($warning, $warning-invert),
    "danger": ($danger, $danger-invert),
    "twitter": ($twitter, $twitter-invert)
);

// Links
$link: $primary;
$link-invert: $primary-invert;
$link-focus-border: $primary;

// Import Bulma and Buefy styles
@import "~bulma";
@import "~buefy/src/scss/buefy";

在assets下新建buefy-variabel.scss文件

import './assets/buefy-variables.scss'

引入

颜色改变

8.vant

npm i vant -S

安装

import 'vant/lib/index.css'
import Vant from 'vant'
Vue.use(Vant)

引用

<template>
  <div>
    <div>
      <van-button type="default">默认按钮</van-button>
      <van-button type="primary">主要按钮</van-button>
    </div>
    <div style="margin-top:40px;width:100%">
      <van-progress :percentage="50" />
    </div>
  </div>
</template>

<script>
export default {
  methods: {
  }
}
</script>

.vue使用

效果

主题定制：

打开项目目录下\node_modules\vant\packages\style\var.less文件，可以看到所有变量名

@import '~vant/packages/index.less';
// Here are the variables to cover, such as:
@button-default-background-color: @red;

在assets下新建vant-variables.less文件

import './assets/vant-variables.less'

引入

效果

9.at-ui

npm install at-ui -s
npm install at-ui-style -s

安装

import 'at-ui-style'
import AtComponents from 'at-ui'
Vue.use(AtComponents)

引入

<template>
  <div>
    <at-steps :current='current'>
      <at-step title="Step1" description="This is a description."></at-step>
      <at-step title="Step2" description="This is a description."></at-step>
      <at-step title="Step3"></at-step>
    </at-steps>
    <at-button type="primary" @click="prev" style="margin-top: 12px;">Prev</at-button>
    <at-button type="primary" @click="next" style="margin-top: 12px;">Next</at-button>
  </div>
</template>

<script>
export default {
  methods: {
  }
}
</script>

定制主题：

打开项目目录下\node_modules\at-ui-style/src/variables/default.scss,可以看到所有变量名

犹豫官方没有做主题定制的简单设置，所以我们要自行修改一些连接路径

首先把有颜色变量的部分剪切复制到同级目录下新建文件为node_modules\at-ui\src\stylesheet\src\variables\color-variables.scss

import 'at-ui/src/stylesheet/src/index.scss'// 不引入import 'at-ui-style'
import './assets/atUI-variables.scss'
@import './color-variables.scss';

在原先剪切位置引入刚才的那部分文件

@import '../../../../../../src/assets/atUI-variables.scss';

在最后一行引入我们新建的修改文件scss位置

@import "~at-ui/src/stylesheet/src/variables/color-variables.scss";
$btn-primary-bg: $red-500;

atUI-variables.scss文件内容

效果

10.keen-ui

npm install keen-ui --save

安装

import 'keen-ui/dist/keen-ui.css'
import KeenUI from 'keen-ui'
Vue.use(KeenUI)

引入

<template>
<div>
    <div>
      <ui-button :size="size">Normal</ui-button>
      <ui-button color="primary" :size="size">Normal</ui-button>
    </div>
    <section class="page page--ui-alert">
        <div class="page__examples">
            <ui-alert @dismiss="showAlert1 = false" v-show="showAlert1">
                Hi everybody! This is the default alert.
            </ui-alert>
            <ui-alert @dismiss="showAlert2 = false" type="success" v-show="showAlert2">
                Okilly dokilly, your account was updated successfully.
            </ui-alert>
            <ui-alert @dismiss="showAlert3 = false" type="warning" v-show="showAlert3">
                Ay caramba! Alerts can also contain HTML. <a href="https://google.com" target="_blank" rel="noopener">Click here</a> for Google.com.
            </ui-alert>
            <ui-alert @dismiss="showAlert4 = false" type="error" v-show="showAlert4">
                D'oh! Something went wrong and we cannot process your request at this time. Try again later.
            </ui-alert>
            <ui-button @click="resetAlerts">Reset Alerts</ui-button>
        </div>
    </section>
</div>
</template>
<script>
import '../../node_modules/keen-ui/src/bootstrap'// Required to setup Keen UI, should be imported only once in your project
import UiAlert from '../../node_modules/keen-ui/src/UiAlert.vue'
import UiButton from '../../node_modules/keen-ui/src/UiButton.vue'
import UiIcon from '../../node_modules/keen-ui/src/UiIcon.vue'
export default {
  data () {
    return {
      showAlert1: true,
      showAlert2: true,
      showAlert3: true,
      showAlert4: true
    }
  },
  methods: {
    resetAlerts () {
      this.showAlert1 = true
      this.showAlert2 = true
      this.showAlert3 = true
      this.showAlert4 = true
    }
  },
  components: {
    UiAlert,
    UiButton,
    UiIcon
  }
}
</script>

文档中给的地址都是连同vue完整的，按照自己需要，删减很多

引入其他组件vue的时候需要注意路径

主题定制：

项目路径下\node_modules\keen-ui\src\styles\variables.scss，打开文件

@import './../../../../src/assets/keenUi-variables.scss';

添加这句

@import "~keen-ui/src/styles/md-colors.scss";
$brand-primary-color            : $md-green !default;

在assets下新建keenUi-variables.scss文件

效果

11.vue-carbon（和原生组件冲突，还未解决）

文档：http://myronliu.com/vue-carbon/book/v0.5.0/

npm install vue-carbon --save

安装

import VueCarbon from 'vue-carbon'
import 'vue-carbon/dist/vue-carbon.css' // 加载文件
Vue.use(VueCarbon)

引入

<template>
<div>
  <!--普通按钮-->
<button>测试</button>
<!--使用 icon-->
<button>
  <icon value="info"></icon>
  info
</button>
<!--fill-->
<button fill>fill</button>
<!--raised-->
<button raised>raised</button>
<!--颜色设置-->
<button color="red" raised>color button</button>
<!--大按钮-->
<button color="red" raised big>big button</button>
<!--不适用slot的写法-->
<button color="red" raised text="big button" icon="mode_edit"></button>
</div>
</template>

<script>
export default {
  data () {
    return {
    }
  },
  methods: {
  }
}
</script>

.vue

12.uiv

npm install uiv --save

安装

import * as uiv from 'uiv'
Vue.use(uiv)

引入

    <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/3.0.2/css/bootstrap.min.css">

index.html的head区域引入 Bootstrap 3 CSS

<template>
<div>
  <btn>Default</btn>
  <btn type="primary">Primary</btn>
  <btn @click="alert" type="primary">Click to open an alert modal</btn>
</div>
</template>

<script>
export default {
  data () {
    return {
    }
  },
  methods: {
    alert () {
      this.$alert({
        title: 'Title',
        content: 'This is an alert message.'
      }, (msg) => {
        // callback after modal dismissed
        this.$notify(`You selected ${msg}.`)
      })
    }
  }
}
</script>

.vue文件

定制主题：

现在网上找到样式min.css，在static下新建css文件存入

    <link rel="stylesheet" href="./static/boostrapCss/bootstrap.min.css">

在index.html引入

import './../static/boostrapCss/bootstrap.min.css'

或者在main.js引入

效果

boostrap3定制页面：https://v3.bootcss.com/customize/

13.fish-ui

npm install fish-ui --save

安装

import FishUI from 'fish-ui'
Vue.use(FishUI)

main.js引入

<link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css"/>
<link rel="stylesheet" href="https://fonts.proxy.ustclug.org/css?family=Lato:400,700,400italic,700italic&subset=latin"/>

index.html引入

<template>
<div>
  <fish-switch v-model="v" :yesOrNo="[1, 0]"></fish-switch>
  <fish-switch v-model="v1">checked...</fish-switch>
</div>
</template>

<script>
export default {
  data () {
    return {
      v: 0,
      v1: true
    }
  }
}
</script>

.vue

主题定制：

库暂时是没有的

@import './color-variables.less';

项目路径下\node_modules\fish-ui\src\styles\base.less打开文件，将颜色部分粘贴到新建文件node_modules\fish-ui\src\styles\color-variables.less里

@import './../../../../src/assets/fishUi-variables.less';

同时在后面引入自定义变量的less文件

@import '~fish-ui/src/styles/index.less';
@primary-color: @green-color;

新建项目路径下\src\assets\fishUi-variables.less

效果

14.vuikit+uikit

vuikit文档：https://vuikit.js.org/guide

uikit文档：https://getuikit.com/docs

uikit中文文档：http://www.getuikit.net/docs/documentation_get-started.html

npm install vuikit -s
npm install @vuikit/icons -s
npm install @vuikit/theme -s

安装

import '@vuikit/theme'
import Vuikit from 'vuikit'
import VuikitIcons from '@vuikit/icons'
Vue.use(Vuikit)
Vue.use(VuikitIcons)

引入

<template>
<div>
  <vk-card>
    <vk-card-title>sss</vk-card-title>
  </vk-card>
  <form>
    <textarea class="uk-textarea"></textarea>
    <input class="uk-radio" type="radio">
    <input class="uk-checkbox" type="checkbox">
    <input class="uk-range" type="range">
  </form>
  <select class="uk-select">
    <option>uk-select item1</option>
    <option>uk-select item2</option>
  </select>
</div>
</template>

<script>
export default {
  data () {
    return {
    }
  }
}
</script>

.vue

自定义主题：https://getuikit.com/docs/less#create-a-uikit-theme （略）

15.cube（主题报错未解决）

npm install cube-ui --save

安装

import 'cube-ui/lib/cube.min.css'
import Cube from 'cube-ui'
Vue.use(Cube)

引入

<template>
<div>
  <cube-select
    v-model="value"
    :options="options">
  </cube-select>
  <cube-button>Button</cube-button>
</div>
</template>

<script>
export default {
  data () {
    return {
      options: [2013, 2014, 2015, 2016, 2017, 2018],
      value: 2016
    }
  }
}
</script>

.vue

报错

npm i webpack-transform-modules-plugin@^0.3.5

解决报错问题

————————————————————————————————————

方式一：普通编译

安装

  "transformModules": {
    "cube-ui": {
      "transform": "cube-ui/lib/${member}",
      "kebabCase": true,
      "style": {
        "ignore": [
          "create-api",
          "better-scroll",
          "locale"
        ]
      }
    }
  },

添加

const TransformModulesPlugin = require('webpack-transform-modules-plugin')

      'cube-ui': 'cube-ui/lib'

    new TransformModulesPlugin()

方式二：后编译

——————————————————————————————————

效果

定制主题：

// 如果你需要使用 cube-ui 自带的颜色值 需要 require 进来
@import "~cube-ui/src/common/stylus/var/color.styl"
// button
$btn-color := $color-orange
// $btn-bgc := $color-regular-blue
$btn-bdc := $color-orange
// $btn-active-bgc := $color-blue

项目/src/assets 目录下创建一个 cube-theme.styl的文件

  const stylusOptions = {
    'resolve url': true,
    // 这里 新增 import 配置项，指向自定义主题文件
    import: [path.resolve(__dirname, '../src/assets/cube-theme')]
  }

    stylus: generateLoaders('stylus',stylusOptions),
    styl: generateLoaders('stylus',stylusOptions)

build/utils.js 中的 exports.cssLoaders 函数添加这2段

报错

https://www.jb51.net/article/131063.htm

https://didi.github.io/cube-ui/#/zh-CN/docs/theme

16.vue-Blu

npm install vue-blu --save

安装

import VueBlu from 'vue-blu'
import 'vue-blu/dist/css/vue-blu.min.css'

Vue.use(VueBlu)

引入

<template>
<div>
  <button class="button is-primary" @click="fade">fade</button>
</div>
</template>

<script>
export default {
  data () {
    return {
    }
  },
  methods: {
      fade () {
        this.$modal.open({
          autoClose: 3,
          transition: 'fade',
          content: 'fade...'
        })
      }
  }
}
</script>

.vue

定制主题：

$blue: #000;
$turquoise: #f00;
// import
@import "~vue-blu/src/scss/blu";

新建assets/vueBlu-variables.scss文件

import './assets/vueBlu-variables.scss'

main.js引入

报错

找到位置先注释掉

https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css

或者在适当的位置加入这个连接的代码（暂不这么做）

效果

17.vue-antd（报错）

npm install vue-antd --save

安装

已提交代码错误，等待解决

18.ant-design-vue

npm install ant-design-vue --save

安装

import 'ant-design-vue/dist/antd.css'
import antdVue from 'ant-design-vue'
Vue.use(antdVue)

main.js

<template>
<div>
  <a-button type="primary">Primary</a-button>
  <a-date-picker @change="onChange" />
</div>
</template>

<script>
export default {
  data () {
    return {
    }
  },
  methods: {
    onChange(date, dateString) {
      console.log(date, dateString);
    }
  }
}
</script>

.vue

定制主题：

@import "~ant-design-vue/dist/antd.less";
@primary-color: #f00;

antDesignVue-variables.less

import './assets/antDesignVue-variables.less'

19.vuesax

npm install vuesax -s
npm install material-icons --save

安装

import 'vuesax/dist/vuesax.css'
import 'material-icons/iconfont/material-icons.css';
import Vuesax from 'vuesax'
Vue.use(Vuesax)

引入

<template lang="html">
  <div class="centerx">
    <vs-upload action="https://jsonplaceholder.typicode.com/posts/" @on-success="successUpload" />
    <vs-button color="primary" type="filled">Primary</vs-button>
  </div>
</template>

<script>
export default {
  methods: {
    successUpload () {
      this.$vs.notify({color: 'success', title: 'Upload Success', text: 'Lorem ipsum dolor sit amet, consectetur'})
    }
  }
}
</script>

.vue

不支持同时多图一次上传

主题定制：

Vue.use(Vuesax, {
  theme: {
    colors: {
      primary: '#f00',
      success: 'rgb(23, 201, 100)',
      danger: 'rgb(242, 19, 93)',
      warning: 'rgb(255, 130, 0)',
      dark: 'rgb(36, 33, 69)'
    }
  }
})

效果

支持行内图标颜色定制

20.VUX

npm install vux --save
npm i vux-loader -s #vux2装
npm install yaml-loader --save-dev #识别语言

安装

const vuxLoader = require('vux-loader')

添加

const webpackConfig = {

讲模型导出设置为常量

module.exports = vuxLoader.merge(webpackConfig, {
  plugins: ['vux-ui']
})

添加布丁

<!--  -->
<template>
  <div>
    <x-button type="primary">primary</x-button>
    <x-icon type="ios-ionic-outline" size="30"></x-icon>
    <x-icon type="ios-arrow-up" size="30"></x-icon>
  </div>
</template>

<script>
import {XButton} from 'vux'
export default {
  data () {
    return {
    }
  },
  components: {XButton}
}

</script>
<style lang="less">
.vux-x-icon {
  fill: #F70968;
}
</style>

.vue，目前只能一个一个注册

定制主题：

@actionsheet-label-primary-color: #00f;
@button-primary-bg-color: #00f;

src\assets\vux-variables.less

module.exports = vuxLoader.merge(webpackConfig, {
  plugins: [
    {name: 'vux-ui'},
    {
      name: 'less-theme',
      path: 'src/assets/vux-variables.less' // 相对项目根目录路径
    }
  ]
})

build\webpack.base.conf.js

需要重启刷新后有改变，同时修改颜色，需要刷新页面才能得到最新

21.vonic（报错，已提交）

npm install vonic@2.0.0-beta.15
npm install --save VueRouter

安装

import vonic from 'vonic'
Vue.use(vonic)

引入

<template>
  <div class="page has-navbar" v-nav="{title: '选项卡'}">
    <div class="page-content">
      <tabs :tab-items="tabs" :tab-index="tabIndex" :on-tab-click="onTabClick"></tabs>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return{
        tabs: [
          "tab 1",
          "tab 2",
          "tab 3"
        ],
        tabIndex: 0
      }
    },
    methods: {
      onTabClick(index) {
        this.tabIndex = index
      }
    }
  }
</script>

.vue

22.rubik

npm install i-rubik --save

安装

import 'i-rubik/dist/rubik.min.css'
import Rubik from 'i-rubik'
Vue.use(Rubik)

引入

<template>
  <div>
    <r-card>
      <r-card-row class="green darken-1">
        <r-card-title class="white-text">Header 卡片头部</r-card-title>
      </r-card-row>
      <r-card-text>
        <r-card-row height="75px">
          <r-icon class="mr-5">call</r-icon>
          <div>
            <p>手机号</p>
            <p>+8618899990000</p>
          </div>
        </r-card-row>
      </r-card-text>
      <r-card-row actions>
        <r-btn class="red-text" flat>Footer Button</r-btn>
      </r-card-row>
    </r-card>
  </div>
</template>
<script>
export default {
  data () {
    return {
    }
  }
}
</script>

.vue

颜色加载class里，green，blue-text，text-accent-3等等

颜色对照

23.Onsen Ui

npm install onsenui vue-onsenui -s

安装

import 'onsenui/css/onsenui.css'
import 'onsenui/css/onsen-css-components.css'
import VueOnsen from 'vue-onsenui'
Vue.use(VueOnsen)

引入

<template>
<div>
  <v-ons-page>
    <div style="height: 100%; display: flex; flex-direction: column">
      <div style="height: 100%; margin: 1em 0; display: flex; justify-content: space-around">
        <v-ons-button @click="showPopover($event, 'right')" style="align-self: flex-start">Click me</v-ons-button>
      </div>
    </div>
    <v-ons-popover cancelable
      :visible.sync="popoverVisible"
      :target="popoverTarget"
      :direction="popoverDirection"
      :cover-target="coverTarget">
      <p style="text-align: center">Lorem ipsum</p>
    </v-ons-popover>
  </v-ons-page>
  <v-ons-button style="z-index:2">Tap me</v-ons-button>
</div>
</template>
<script>
export default {
  data () {
    return {
      popoverVisible: false,
      popoverTarget: null,
      popoverDirection: 'up',
      coverTarget: false
    }
  },
  methods: {
    showPopover (event, direction, coverTarget = false) {
      this.popoverTarget = event
      this.popoverDirection = direction
      this.coverTarget = coverTarget
      this.popoverVisible = true
    }
  }
}
</script>

.vue

定制主题：

安装yarm：https://yarnpkg.com/lang/en/docs/install/#windows-stable

cd node_modules/onsenui/css-components-src

进入目录

npm install -g gulp
npm install
gulp serve

安装并启动监听

import 'onsenui/build/css/onsen-css-components.css' // 自定义引入

main.js组件样式替换成build下的

node_modules\onsenui\css-components-src\src\theme.css修改颜色

24.N3

npm install N3-components --save-dev

安装

import 'N3-components/dist/index.min.css'
import N3Components from 'N3-components'
// for English  (default chinese)
// version 2.2.0 or later
Vue.use(N3Components, 'en')

引入

<template>
<div>
  <n3-timepicker v-model="value"  format="hh:mm:ss" ></n3-timepicker>
</div>
</template>
<script>
export default {
  data () {
    return {
    }
  }
}
</script>

.vue

定制主题：

@import '~N3-components/src/style/common.less';

/*base color*/
@whiteColor: #fff;
@blackColor: #000;
@lightBlackColor: #333;
@grayColor: #ccc;
@weightGrayColor: #999;
@lightGrayColor: #eee;
@lightColor: #f9f9f9;

/*font color*/
@fontColor: #555;

/*theme color*/
@primaryColor: #f00;
@primaryColorhover: #39b2a9;
@hoverColor:rgba(65, 202, 192, 0.05);

/*extend color*/
@successColor: #19d567;
@successColorhover: #30d073;

@infoColor: #2db7f5;
@infoColorhover: #43bcf3;

@dangerColor: #f50;
@dangerColorhover: #f9702b;

@warningColor: #fa0;
@warningColorhover: #f5b73b;

assets/N3-variables.less文件必须全部复制变量，修改其中颜色

import './assets/N3-variables.less'

引入

效果

25.vuestorefront

npm install atui --save

安装

import 'atui/dist/greater-blue.css'
import atui from 'atui'
Vue.use(atui)

引入

<template>
<div>
  <v-button primary value="中号+主按钮"></v-button>
  <searchbox placeholder="请输入关键词搜索" :value="defaultVal" :search-list="searchList" text-field="name" @value-change="valueChange" @value-check="valueCheck"></searchbox>
</div>
</template>
<script>
import atui from 'atui'
export default {
  data () {
    return {
      defaultVal: '果',
      searchList: [
        {name: '水果', value: '1'},
        {name: '苹果', value: '2'},
        {name: '香蕉', value: '3'},
        {name: '香菜', value: '22'}
      ]
    }
  },
  components: {
    searchbox: atui.Searchbox
  },
  methods: {
    valueChange (val) {
      console.log(val)
    },
    valueCheck (item) {
      console.log(item)
    }
  }
}
</script>

.vue

定制主题（官网没有）

26.ZUI

npm install zui

安装

// import 'zui/dist/css/zui-theme.css'
import 'zui/dist/css/zui.min.css'
import 'zui/dist/lib/jquery/jquery.js'
import 'zui/dist/js/zui.min.js'

引入

<template>
<div>
<button class="btn btn-primary" type="button">主要按钮</button>
<div id="accordion">
  <p>
    <a href="#collapseExample1" data-toggle="collapse" data-parent="#accordion" class="btn btn-link">折叠 1</a>
  </p>
  <div class="collapse in" id="collapseExample1">
    <div class="bg-primary with-padding">
      <p>被折叠元素内容。</p>
      <p>多个触发元素可以指向同一个折叠内容。</p>
    </div>
  </div>
  <p>
    <a href="#collapseExample2" data-toggle="collapse" data-parent="#accordion" class="btn btn-link collapsed">折叠 2</a>
  </p>
  <div class="collapse" id="collapseExample2">
    <div class="bg-success with-padding">
      <p>被折叠元素内容。</p>
      <p>多个触发元素可以指向同一个折叠内容。</p>
    </div>
  </div>
  <p>
    <a href="#collapseExample3" data-toggle="collapse" data-parent="#accordion" class="btn btn-link collapsed">折叠 3</a>
  </p>
  <div class="collapse" id="collapseExample3">
    <div class="bg-danger with-padding">
      <p>被折叠元素内容。</p>
      <p>多个触发元素可以指向同一个折叠内容。</p>
    </div>
  </div>
</div>
</div>
</template>
<script>
export default {
  data () {
    return {
    }
  },
  components: {
  },
  methods: {
  }
}
</script>

.vue

定制主题（暂略，麻烦，在原variables文件里修改再编译吧）：

外观配置文件存放在src/less/basic/variables.less

cd node_modules/zui

进入

npm install
gulp theme

27.vuecidity

npm install vuecidity --save
npm install babel-polyfill --save

安装

import 'vuecidity/dist/lib/vuecidity.min.css'
import 'babel-polyfill'
import Vuecidity from 'vuecidity'
Vue.use(Vuecidity)

引入

    <!-- vuecidity+Icons-S -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto|Material+Icons" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/2.0.46/css/materialdesignicons.min.css" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.9/css/weather-icons.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.9/css/weather-icons-wind.min.css" />
    <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" />
    <link rel="stylesheet" href="https://afeld.github.io/emoji-css/emoji.css" />
    <!-- vuecidity+Icons-E -->

index.html引入图标库

<template>
<div>
  <vc-button color="primary">button</vc-button>
  <vc-flag size="3" ratio="1x1" iso="bg" round=true />
  <vc-col :span="8" sm12 xs24>
    <h4 :class="subHeading">Icon and placeholder text</h4>
    <vc-text type="password" :placeholder="placeholder" icon-left="V**_key" name="password-7" color="primary" />
  </vc-col>
  <vc-select
  color="red"
  label="Select with all fields"
  @input="input"
  name="select-1"
  v-model="model1"
  :items="select1">
</vc-select>
  <div :style="{width: width}" :class="['elevation-5']">
    <vc-toolbar narrow>
      <vc-toolbar-icon-left icon="menu" />
      <vc-toolbar-title>My Chat App</vc-toolbar-title>
      <vc-toolbar-controls-right>
        <vc-button color="primary" icon-button>
          <vc-icon>account_circle</vc-icon>
        </vc-button>
      </vc-toolbar-controls-right>
    </vc-toolbar>
    <div class="vc vc-chat pa-16" style="width: auto; height: 300px; overflow: auto;">
      <ul aria-label="list">
        <div v-for="(item, index) in list" :key="item.index">
          <li role="listitem" :class="'vc-chat-baloon vc-chat-balloon-'+ (item.me ? 'sent' : 'received')">
            <div>
              <div class="vc-table-layout">
                <div>
                  <div class="vc-chat-balloon-avatar"><span role="img" class="vc vc-avatar transparent elevation-4" style="width: 32px; height: 32px;"><img :src="item.avatar" alt="/static/images/avatar-02.png" width="32" height="32"></span></div>
                  <div>
                    <div class="body-2 font-grey font-l-700 ellipsis">{{item.label}}</div>
                  </div>
                  <div class="vc-chat-balloon align-right">
                    <div class="body-2 font-grey font-l-400 ellipsis">{{item.timestamp}}</div>
                  </div>
                </div>
              </div>
              <div :class="item.color +' vc-chat-baloon-body elevation-4'">{{item.body}}</div>
            </div>
          </li>
        </div>
      </ul>
    </div>
    <vc-chat @update="autoRespond($event)" :height="height" :width="width" :transcript="transcript" />
    <form @submit.prevent="submit" :class="['pa-16']">
      <vc-text autofocus placeholder="Type something and hit enter" color="primary" icon-left="chat" type="text" v-model="chat" name="chatbox" />
    </form>
  </div>
</div>
</template>
<script>
export default {
  data () {
    return {
      width: '100%',
      height: '100%',
      transcript: [
      ],
      list: [
        {
          name: 'John',
          timestamp: 1519308015,
          body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit :)',
          avatar: 'http://127.0.0.1:8000/static/images/avatar-01.png',
          me: false,
          color: 'yellow'
        },
        {
          name: 'Martin',
          timestamp: 1519308035,
          body: 'Dolor sit...',
          avatar: 'http://127.0.0.1:8000/static/images/avatar-02.png',
          me: true,
          color: 'primary'
        },
        {
          name: 'Martin',
          timestamp: 1519308065,
          body: 'Blah... Placeat facere possimus!',
          avatar: 'http://127.0.0.1:8000/static/images/avatar-02.png',
          me: true,
          color: 'primary'
        }
      ]
    }
  },
  mounted () {
    this.transcript = this.list
  },
  methods: {
    submit () {
      const sentObj = {
        name: 'Martin',
        timestamp: 1519308065,
        body: this.chat,
        avatar: 'http://127.0.0.1:8000/static/images/avatar-02.png',
        me: true,
        color: 'primary'
      }
      this.list.push(sentObj)
    },
  }
}
</script>

.vue

图片资源可以放在后端的static文件夹下面，用绝对路径引用

颜色主题（略）：

http://design.1sters.com/material_design/style/color.html#

根据这个网站的色板

三、参考文档

1.babel-plugin-import配置babel按需引入antd模块，编译后报错.bezierEasingMixin()：https://www.cnblogs.com/rebirth-csz/p/9263149.html

2.cdn加速站点：https://www.bootcdn.cn/

3.【vue】vuikit的使用(uikit已经在vuikit内部集成):https://blog.csdn.net/dangbai01_/article/details/83444807

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

其他

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

其他