Powered by md-Blog 文 - 篇 访客 -
【sui】Vue.js+Semantic-ui+自定义主题 for SoEasy-Webpack4.0-Templete
分类：Webpack /
更新：2020-11-01 17:25:33 / 创建：2020-04-23 15:46:40
本篇基于 SoEasy-Webpack4.0-Templete 构建，当然您也可以选择其他 cli、Webpack 构建工具。
基于
【点击了解】SoEasy-Webpack4.0-Templete。
如果您该模板对您有所帮助，请别忘了点个 Star，谢谢！
默认使用 yarn 构建，当然您也可以选择 npm、cnpm。
说明
Semantic-ui，https://semantic-ui.com/ 是一个很不错的UI框架，可惜这两年没有维护，其独特的 主题定制 功能及简单的调用法则深受广大前端爱好者的喜爱，当然还有我。
但是，由于其是由 gulp 构建，且依赖 jQuery，想要在 Vue 框架上运行起来，还需要下一番功夫。
为了避免使用 gulp，我找到一个打包好的主题库：https://github.com/semantic-ui-forest/forest-themes
当然还有一些模板，参考官网：https://semantic-ui-forest.com/
安装
安装 Vue.js
yarn add vueyarn add vue-loader vue-template-compiler -D安装 semantic-ui
由于已经有第三方主题，我们只需要安装无主题版本的 semantic-ui-css
yarn add semantic-ui-css安装 jQuery
yarn add jquery配置 resolve 和 plugins
resolve: {
extensions: ['*', '.js', '.vue'],
alias : {
'vue' : 'vue/dist/vue.common.js',
'src' : path.resolve(__dirname, '../src'),
'assets' : path.resolve(__dirname, '../src/assets'),
'components': path.resolve(__dirname, '../src/components'),
}
},
plugins:[
new VueLoaderPlugin(),
new webpack.ProvidePlugin({
$: 'jquery', // 加载jQuery像这样
jQuery: 'jquery', // 加载jQuery或者像这样
// Semantic-UI
semantic: 'semantic-ui-css',
Semantic: 'semantic-ui-css',
'semantic-ui': 'semantic-ui-css'
})
]index.html
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SoEasy-Webpack4.0-Templete@ycmbcd</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
加载
main.js
import Vue from 'vue';
import App from './App';
import semantic from 'semantic-ui-css/semantic.min.js'
// import 'semantic-ui-css/semantic.min.css' // sui 默认主题
import './assets/sui/semantic.github.css' // github 主题
new Vue({
el: '#app',
render: h => h(App)
})
Vue.config.productionTip = false;例子
这里写一个 DropDown 下拉框的例子：
Vue.js
<template>
<div>
<drop-down items="第一项,第二项" v-model="drop_1"></drop-down>
{{drop_1}}
</div>
</template>
<script>
import DropDown from './components/DropDown.vue'
export default {
name: "App",
components: {
DropDown,
SuiButton
},
data() {
return {
drop_1: '',
}
}
};
</script>DropDown.vue
下拉触发：https://semantic-ui.com/modules/dropdown.html#/usage 我们可以参考这个地址里的 JavaScript 代码块：
$('.ui.dropdown')
.dropdown()
;改编成 mounted 里的：$(this.$el).find('.suiDropDown').dropdown()<template>
<div>
<div class="ui selection dropdown suiDropDown">
<input type="hidden" name="gender">
<i class="dropdown icon"></i>
<div class="default text">请选择..</div>
<div class="menu">
<div class="item" v-for="item in myItems" :key="item"
@click="changeSelection(item)">
{{ item }}
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props:{
items: {
type: String,
default: 'items=参数，多个参数用逗号隔开'
}
},
data() {
return {
myItems: [],
selectedItem: {}
}
},
methods: {
changeSelection(item) {
this.$emit('input', item);
}
},
mounted() {
this.myItems = this.items.split(',')
$(this.$el).find('.suiDropDown').dropdown()
}
}
</script>配置主题
解压 forest-themes-master项目文件夹，把 ./dist/semantic-ui/v2 目录拷贝到 /assets/sui 下
如果你在dev 状态下，会报错，是字体原因，大概在 semantic.github.css 的 7676 行，将 eot 改为 ttf，woff2 改为 woff 即可。
src: url("./themes/github/assets/fonts/octicons.ttf?#iefix") format('embedded-opentype'), url("./themes/github/assets/fonts/octicons.woff") format('woff'), url("./themes/github/assets/fonts/octicons.woff") format('woff'), url("./themes/github/assets/fonts/octicons.ttf") format('truetype'), url("./themes/github/assets/fonts/octicons.svg#icons") format('svg');由于我们上面配置好了 github 主题，这时我们在组件中写一些 button：
<button class="ui button">关注</button>
<div class="ui animated button" tabindex="0">
<div class="visible content">Next</div>
<div class="hidden content">
<i class="right arrow icon"></i>
</div>
</div>
<div class="ui vertical animated button" tabindex="0">
<div class="hidden content">Shop</div>
<div class="visible content">
<i class="shop icon"></i>
</div>
</div>
<div class="ui animated fade button" tabindex="0">
<div class="visible content">Sign-up for a Pro account</div>
<div class="hidden content">每月12.99美元</div>
</div>完美收工~ (゜-゜)つロ 干杯~
小站不易，感谢支持！
