作業途中だけどメモしておきます。
管理画面テンプレートのCoreUIのコンポーネントを既存Vue(TS)なプロジェクトで利用可能にする。まで。
一から作る場合は、https://github.com/coreui/coreui-free-vue-admin-template のプロジェクトをcloneなんかしてカスタマイズ、TS化するのが簡単なんだろうけど、すでにプロジェクトとして成果物がある場合で、CoreUIのコンポーネントを組み込んで行きたいってケース。
このリポジトリからコンポーネントを取り込むことができる。
https://github.com/coreui/coreui-vue
CoreUIのインストール
手順は以下のマニュアルを参考にした。
https://coreui.io/vue/docs/introduction/
$ npm install @coreui/vue @coreui/coreui
CoreUIコンポーネントのimport
CoreUIコンポーネントをVueインスタンスに渡す。 アプリケーションのルートディレクトリにplugins/coreui.ts
ファイルを作成し、以下のように記述。
import Vue from "vue"; import CoreUI from "@coreui/vue"; Vue.use(CoreUI);
main.ts
で定義したcoreui.ts
を呼び出す。
import Vue from "vue"; import App from "./App.vue"; import router from "./router"; import store from "./store"; import "../plugins/coreui"; Vue.config.productionTip = false; new Vue({ router, store, render: h => h(App) }).$mount("#app");
CoreUIコンポーネントの確認
上記のように記述するとVueコンポーネントからcoreui-vueで定義されているコンポーネントを参照できる。
App.vue
<template> <div id="app"> <div> <CCard> <CCardHeader> カードのタイトル <div class="card-header-actions"> <a href="https://coreui.io/vue/docs/components/card-components" class="card-header-action" rel="noreferrer noopener" target="_blank"> <small class="text-muted">docs</small> </a> </div> </CCardHeader> <CCardBody> カードの内容 </CCardBody> </CCard> </div> </div> </template>
のように記述してみるとエラーなく、CCard
コンポーネントがレンダリングされる。
CoreUIのスタイルを適用する
しかしながら、CoreUIのスタイルの適用が出来ていないので、CoreUIのscssをグローバルに適用させる。
webpack.jsがある場合はwebpack.jsに、なければvue.config.js
を作成または編集する。
vue.config.js
module.exports = { css: { loaderOptions: { scss: { prependData: '@import "~@coreui/coreui/scss/coreui";' } } } };
以上でスタイルの適用を確認できる。