Powered by md-Blog  文 - 篇  访客 -

【sui】Vue.js+Semantic-ui+自定义主题 for SoEasy-Webpack4.0-Templete


  分类:Webpack  / 
更新:2020-04-23 16:08:23  /  创建:2020-04-23 15:46:40
不要删除
本篇基于 SoEasy-Webpack4.0-Templete 构建,当然您也可以选择其他 cli、Webpack 构建工具。

img

基于

【点击了解】SoEasy-Webpack4.0-Templete

如果您该模板对您有所帮助,请别忘了点个 Star,谢谢!
默认使用 yarn 构建,当然您也可以选择 npmcnpm

说明

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 vue
yarn add vue-loader vue-template-compiler -D

安装 semantic-ui

由于已经有第三方主题,我们只需要安装无主题版本的 semantic-ui-css

yarn add semantic-ui-css

安装 jQuery

yarn add jquery

配置 resolveplugins

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.css7676 行,将 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>

完美收工~ (゜-゜)つロ 干杯~


不要删除

小站不易,感谢支持!