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

7988 ワード
SemanticUI Vue.js vue-cli Vue.js テキストリンク

概要

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

概要

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

導入手順

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

  • 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