Help us understand the problem. What is going on with this article?

CDN版のVue.jsでコンポーネントを別ファイルに分ける

More than 1 year has passed since last update.

Vue.jsの初学者にはCDN版がオススメ

Vue.jsを始める際にCDNでやるべきか、webpackでやるべきか・・・と悩む人が多いと思います。個人的にはwebpack is 何?って人はCDNからやってVueの楽しさを知るべきだと思います!

公式のガイド読みながら手を動かしていくと、途中で「コンポーネント」の話が出てくると思います。main.jsの中に全部書いてもいいんですけど、別ファイルに分けたいな~って思ったときに良いやり方が見つからなかったのでシェアです!

コンポーネントに分ける

想定するディレクトリ構成こんな感じです

index.html
src
├── QuerySearchContent.js
├── QuerySearchResult.js
└── main.js
index.html
...
  <body>
    <div id="app">
      <query-search-content></query-search-content>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="src/QuerySearchContent.js"></script>
    <script src="src/QuerySearchResult.js"></script>
    <script src="src/main.js"></script>
  </body>
...

main.js
new Vue({
  el: '#app',
  ...
})
QuerySearchContent.js
Vue.component('query-search-content', {
  ...
})

その① scriptタグで読む

一番簡単なのはscriptタグで読む方法です!
コンポーネントが少ない場合はこちらの方がお手軽。main.jsを読み込む前に記述するようにしましょう。

index.html
...
  <body>
    <div id="app">
      <query-search-content></query-search-content>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <script src="src/QuerySearchContent.js"></script>
    <script src="src/QuerySearchResult.js"></script>
    <script src="src/main.js"></script>
  </body>
...

その② main.js内で動的に読み込む

基本的に①でいいんですが、コンポーネント数が多くなるとちょっと煩雑ですよね。
vueの公式でも紹介されているaxiosというAjaxっぽいことができるライブラリを使って読み込む方法を試してみましょう

index.html
...
  <body>
    <div id="app">
      <query-search-content></query-search-content>
    </div>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="src/main.js"></script>
  </body>
...

基本的にはjsファイルの場所を探してアクセスし、eval関数で解釈する方法です

main
function getComponents (src) {
  axios
  .get(src)
  .then(response => {
    eval(response.data)
  })
}
getComponents('src/QuerySearchContent.js')
getComponents('src/QuerySearchResult.js')
getComponents('src/ContentTable.js')

new Vue({
  el: '#app',
  ...
})

この方法は動くんですが、デベロッパーツール上では以下のようなエラーが出ます(おそらくjavascriptの読み込み順の問題?)。

error
[Vue warn]: Unknown custom element: <query-search-content> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

(found in <Root>)

試行錯誤したのですが、いい解決法が見つからなかったので、もし分かる方いれば教えていただけると幸いです><

規模が大きくなってきたらvue-cliを使いましょう

今回紹介した方法は規模が大きくなったり本格的に開発する場合はオススメできません。
vue-cliというツールを使うことで、簡単にwebpack付きの開発・ビルド環境が整い、コンポーネント化もラクラクできるので、慣れてきたらそれを使いましょう!

Vue.js を vue-cli を使ってシンプルにはじめてみる

とはいえコンポーネントに分割しておけば、vue-cliへの移行もスムーズにできると思うので、CDN使う場合でもコンポーネントに分けることをオススメします。

CDNを使う場合はプロトタイプとして使用して、本格的にデプロイする前にvue-cliなどでwebpackを導入してビルドするのが個人的にオススメです!

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away