本身集成并没有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混用,会被影响
进入项目目录下,下载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
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使用
使用简单,但文档中并没找到主题和颜色的修改
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
效果
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两种主题色
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上搜索相关查看
可以使用的版本
效果:主题色改变
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'
引入
主题颜色改变
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'
引入
颜色改变
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'
引入
效果
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文件内容
效果
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文件
效果
文档: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
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/
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
效果
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 (略)
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
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
或者在适当的位置加入这个连接的代码(暂不这么做)
效果
npm install vue-antd --save
安装
已提交代码错误,等待解决
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'
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)'
}
}
})
效果
支持行内图标颜色定制
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
需要重启刷新后有改变,同时修改颜色,需要刷新页面才能得到最新
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
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等等
颜色对照
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修改颜色
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'
引入
效果
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
定制主题(官网没有)
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
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