【備忘録】vue-cli-service アプリへの Semantic UI 導入

概要

vue-cli-service ベースアプリに Semantic UI を導入したので、
その時の手順を備忘録として残しておく。
ベースアプリの作成手順についてはこちらを参考（TypeScript利用しないで作成）

概要

• vue-cli-service：4.1.2
• Semantic UI：2.4.2

導入手順

• Semantic UI のモジュールをダウンロード

  • https://semantic-ui.com/introduction/getting-started.html
  • npm install しての手順でやることも考えたが、結局gulpでビルドしたモジュールを作る必要があるのでやめた
  • カスタマイズ加える場合は必要だが、今回はいったんなし

• semantic というフォルダを作りダウンロードしたモジュールを配置

  • 必要なモジュールのみ配置（下記の画像参照）
  • 

• jQuery を追加

  • jQuery：Semantic UI の依存パッケージ

npm install jquery --save

• jQuery をプラグインとして登録
  • vue.config.js から vue-cli-service 内の webpack へ追加設定する
  • コンポーネントごとにjQueryをimportせずに済むようにするための登録

vue.config.js

const webpack = require("webpack");

module.exports = {
  configureWebpack: {
    plugins: [
      new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery"
      })
    ]
  }
};

• main.js にSemantic UI の js,css を import する。これで導入完了！

main.js

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

まとめ

普通に webpack 利用時の Semantic UI 導入と、ほぼ同じような設定だが、
vue-cli-service 特有の vue.config.js の設定で少しつまづいてしまったので、備忘録として残しておく。

ドキュメント読めばすぐわかる内容なので、ドキュメントちゃんと読もうと思う。。。

参考：Semantic UI 利用例

Abput.vue

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <div class="ui container">
      <div class="ui labeled button" tabindex="0">
        <div class="ui red button">
          <i class="heart icon"></i> Like
        </div>
        <a class="ui basic red left pointing label">1,048</a>
      </div>
      <div class="ui labeled button" tabindex="0">
        <div class="ui basic blue button">
          <i class="fork icon"></i> Forks
        </div>
        <a class="ui basic left pointing blue label">1,048</a>
      </div>
      <div class="ui yellow progress" data-percent="60">
        <div class="bar"></div>
      </div>
      <div class="ui yellow progress" data-percent="60">
        <div class="bar"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  mounted() {
    $(".progress").progress();
  }
};
</script>

参考：プロジェクト構成

root
│
├ node_modules
│
├ public
│
├ semantic
│
├ src
│　│
│　├ assets
│　│
│　├ components
│　│
│　├ router
│　│
│　├ store
│　│
│　├ views
│　│　│
│　│　└ About.vue
│　│
│　├ App.vue
│　│
│　└ main.js
│
├ package.json
│
├ package-lock.json
│
└ vue.config.js