Vue.jsのディレクトリ構成を考える

この内容について

この記事の内容は、Vue.jsを使っていくにあたって、
ディレクトリ構成に悩んでいる方の参考になればと思い書いています。

初期のディレクトリ構成

vue createでカスタムせずインストールすると、
下記のようなディレクトリ構成となると思います。

- VueApp
    - node_modules
    - public
        - favicon.ico
        - index.html
    - src
        - assets
        - components
            - HelloWorld.vue
        - App.vue
        - main.js
    - babel.config.js
    - package-lock.json
    - package.json
    - README.md

こんな感じですが、URLによって画面遷移したりしたいので、Vue Routerを使います。

Vue Routerを使ったディレクトリ構成

Vue Routerのインストールはしてください。

ターミナル

npm install vue-router

そして、色々再編成した、ディレクトリ構成がこちらです。

- VueApp
    - node_modules
    - public
        - js
        - styles
        - favicon.ico
        - index.html
    - src
        - assets
            - images
        - components
        - pages
        - App.vue
        - main.js
        - router.js
    - babel.config.js
    - package-lock.json
    - package.json
    - README.md

• public以下にjsフォルダとstylesフォルダを追加しました。
  • ここにjsファイルとcssファイルをおきます。
• src/assets以下にimagesフォルダを追加しました。
  • ここに画像をおきます。フォントや動画を使う場合は、fontフォルダとvideoフォルダを追加する。
• src以下にpagesフォルダを追加しました。
  • ここにそれぞれのページで使うvueファイルをおきます。
• src以下にrouter.jsを追加しました。
  • ここにVue Routerでページの割り振りをします。

まとめ

この記事が良いと思った方は、LGTMをしていただければ嬉しいです！
フォローも是非お願い致します(^^)