vue-cli3.0 typescript モジュールの使い方

Question

https://alligator.io/vuejs/using-new-vue-cli-3/

↑vue-cli3.0 で環境を構築しました

https://www.npmjs.com/package/vue-mce

↑こちらのモジュールを使ってみたいです

//main.ts

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';

import VueMce from 'vue-mce'; //←ここと

Vue.use(VueMce) //←ここ

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount('#app');

このように宣言すれば

<vue-mce/>

タグが使えるのかなと思ったのですが

vue-mce.common.js?9a3b:1 Error: TinyMce was not found

と言われ使えませんでした

ここで必要とされているtinymce

https://github.com/tinymce/tinymce-vue

を入れてみたのですが、同じエラーが出てしまいます

そもそもモジュールの使い方が間違っているのでしょうか

//router.ts

import Vue from 'vue';
import Router from 'vue-router';

import Top from './views/Top.vue'
import openNewFiles from './views/openNewFiles.vue'
import createNew from './views/createNew.vue'

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'top',
      component: Top,
    },
    {
      path: '/openNewFiles',
      name: 'openNewFiles',
      component: openNewFiles,
    },
    {
      path: '/createNew',
      name: 'createNew',
      component: createNew,
    }
  ],
});

これはrouter.tsなのですが
ルーターインスタンスをexportするという宣言でしょうか

そして、vueを初期化する際の引数に入れることで、routerモジュールを適用しているのでしょうか

new Vue({
router,
store,
render: (h) => h(App),
}).$mount('#app');

では逆に、router.tsの

Vue.use(Router);

という宣言はどのような役割を担うのでしょうか

//vueMce.ts

import Vue from 'vue';
import VueMce from 'vue-mce';

Vue.use(VueMce);

//export default new VueMce(){}

export default VueMce

router.tsを真似して作ってみました
vueMceは定数みたいで、newできないと言われてしまったので

export default VueMce

としてみました

main.tsの方でimportして、引数に加えてみたのですが、

'vueMce' does not exist in type 'ComponentOption

と言われてしまい、できませんでした

どなたか教えてくださいませんでしょうか...

--------------------追記--------------------

yhg様、毎回本当にありがとうございます

回答を参考に今朝から色々試していたのですが、うまくできませんでした...

まず

npm install --save tinymce

でtinymceをnode_modulesに加えました

次に

import 'tinymce';
import Vue from 'vue';
import VueMce from 'vue-mce';

Vue.use(VueMce);

こちらを main.tsに書き足しました
これでできるのかなと思ったのですが、

theme.js:1 Uncaught SyntaxError: Unexpected token <

というエラーが出てしまいました

elementを見ると
vue-mceコンポーネントのところは

<div class="tinymce">
  <div class="tinymce__init-area" id="mce_0" style="visibility: hidden;"> 
  </div> 
  <input name="" hidden="hidden">
</div>

このようになってました

//main.ts

import tinymce from 'tinymce'

import paste from 'tinymce/plugins/paste';
import link from 'tinymce/plugins/link';

tinymce.init({
    plugins: [paste, link]
})

このような書き方も試してみたのですが、動かなかったです...

最終的には

import 'tinymce';
import Vue from 'vue';
import VueMce from 'vue-mce';

Vue.use(VueMce);

と

<script src="https://cloud.tinymce.com/stable/tinymce.min.js"></script>

こちらをindex.htmlのヘッダーに書くというので正しく動くのですが、

なるべくimportで解決したいです...(T_T)
あまり、scriptタグではやりたくないです
どのようにすればいいでしょうか...

Answer 1

tinymce-vue は tinymce 公式の Vue コンポーネントです。tinymce 本体ではありません。
vue-mce は tinymce-vue の非公式版みたいなものです。

vue-mce/src/component/index.js の

  mounted() {
    if (!window.tinymce) {
      return this.handleError(new Error('TinyMce was not found'))
    }

を見ると分かるように、window.tinymce がないとダメっぽいので、

import 'tinymce';
import Vue from 'vue';
import VueMce from 'vue-mce';

Vue.use(VueMce);

を適当なところに記載し、テーマCSSとかもimportしてテンプレートにタグを書くだけです。

---

router.ts の解釈は合ってます。
Vue.use(...) はプラグインをインストールする際に使います。

vue-router の場合は <router-view>や<router-link>コンポーネントのインストールに加えて、全てのコンポーネントにミックスインを適用してbeforeCreateにフックし、this.$routerのように簡単にルーターインスタンスにアクセスできるようにしたりということを中でやってます。this.$router にルーターインスタンスを入れるために Vue インスタンス作成時のオプションで router を設定してる感じですね。

今回の場合はコンポーネントのインストールだけなので、

new Vue({
  .
  .
  .
  vueMce
})

などとする必要はありません。

ちなみに VueMce の中身は vue-mce/vue-mce.d.ts に書いてあるとおり、

export interface VueMce {
  install: PluginFunction<never>

  component: VueMceComponent
}

のようになっています。

Comments

[退会済みユーザー]

丁寧な回答ありがとうござます

「全てのコンポーネントにミックスインを適用してbeforeCreateにフックし、this.$routerのように簡単にルーターインスタンスにアクセスできるようにしたりということを中でやってます。this.$router にルーターインスタンスを入れるために Vue インスタンス作成時のオプションで router を設定してる」

ということに関して、

https://jp.vuejs.org/v2/guide/mixins.html
ミックスイン (mixin) は、Vue コンポーネントに再利用可能で柔軟性のある機能を持たせるための方法です。ミックスインオブジェクトは任意のコンポーネントオプションを含むことができます。コンポーネントがミックスインを使用するとき、ミックスインの全てのオプションはコンポーネント自身のオプションに”混ぜられ”ます。

例えば、あるコンポーネントにmixinを適用し、そのコンポーネントで元々created関数が定義されてた場合、mixinで定義したcreated関数の中の処理が、そのコンポーネントのcreated関数の中に加えられるといった感じでしょうか

つまりこの場合だと、ルーターインスタンスにアクセスできる処理を全てのコンポーネントに加えるようなイメージでしょうか

そのような処理や、this.$router にルーターインスタンスを入れる処理などは

beforeCreateのタイミングでしかできないのでしょうか

[yhg]

> 同じ名前のフック関数はそれら全てが呼び出されるよう配列にマージされます。ミックスインのフックはコンポーネント自身のフック前に呼ばれます。

と公式ドキュメントに書かれてます。
ミックスインで beforeCreate にフックした場合は、各コンポーネントの beforeCreate メソッドが呼び出される前にミックスインの beforeCreate メソッドが呼び出されるような形ですね。

this.$router などに値を入れるだけなら他のタイミングでも出来ますが、created や computed 内で呼び出されることが想定されるなら beforeCreate にフックする必要があります。特別な意図がない場合は beforeCreate にフックすれば良いと思います。

ただし、これはプラグインなどを制作する場合の話で、アプリ制作などで Vue.prototype を変更しても大丈夫な場合は↓のような感じでプロパティを定義してしまえばOKです。

Vue.prototype.$appName = 'My App'

詳しくはこちら https://jp.vuejs.org/v2/cookbook/adding-instance-properties.html

また TypeScript の場合は宣言ファイルを書く必要が出てきます。
↓例

import Vue from 'vue';

declare module 'vue/types/vue' {
interface Vue {
$appName: string;
}
}

[退会済みユーザー]

いつも本当にありがとうございます
ドキュメントをもう一度、読み直してみます(T_T)

なるほどです、フック関数と言うのはvueで言うcreatedとかbeforeCreateとかが当たるのでしょうか
ただ、フックと言う言葉を調べていると
「フック (プログラミング) フック（Hook）は、プログラム中の特定の箇所に、利用者が独自の処理を追加できるようにする仕組みである。」
とあるので、普通にmethodsに追加する関数の方がフック関数っぽいなとか思いました、って解釈変ですかね(>_<)

そして例えばcreatedだと、mixinの処理もvueインスタンスの処理も両方実行されるのですね(mixinのcreatedの処理→vueインスタンスのcreatedの処理の順で)
methodsだと同じ名前の関数は、vueインスタンスの方の処理だけが実行されるのですね

なるほどです

Vue.prototype.$appName = 'My App'
今 $appName は、作成前でも全ての Vue インスタンスで使用可能です。 実行した場合：

new Vue({
beforeCreate: function() {
console.log(this.$appName)
}
})
"My App" はコンソールに記録されます。

これはインスタンスが作られる前にVueクラスに直接プロパティを追加しているイメージでしょうか

そしてtypescriptからコンパイルするためには型定義が必要だと

export interface Vue {
readonly $el: HTMLElement;
readonly $options: ComponentOptions<Vue>;
readonly $parent: Vue;
readonly $root: Vue;
readonly $children: Vue[];
readonly $refs: { [key: string]: Vue | Element | Vue[] | Element[] };
readonly $slots: { [key: string]: VNode[] };

'vue/types/vue' (vue.d.ts)に上記インターフェースが定義されていました
ここに追加するイメージでしょうか

---------------------------------------------------------------------------------------------------------------------------------------

vue-mceに関する質問を質問本文に追記したので良かったらみて見てください(T_T)

[退会済みユーザー]

Vue.prototype.$userName = "nichika";

declare module "vue/types/vue" {
interface Vue{
$userName : string
}
}

プロパティの追加、これでできて感動してます

declareについて

https://docs.solab.jp/typescript/ambient/declaration/

"vue/types/vue"と言う外部モジュールが使われることを宣言しているのでしょうか

[yhg]

うーん。CodeSandbox で色々試してみましたがイマイチ原因分かりません。
TinyMCE の公式ドキュメントにモジュールの読み込みについて書かれてましたが書き換えても同じエラーが出てしまいますね。

https://www.tinymce.com/docs/advanced/usage-with-module-loaders/

vue-mce はそれほど難しいことしてる訳でなくコードも短いので、vue-mce を参考にご自分で TinyMCE のラッパーコンポーネント書いてしまったほうが早いかもしれませんね。

[退会済みユーザー]

ありがとうございます
わかりました、ちょっとやってみます...
本当にありがとうございました