search
LoginSignup
26

More than 3 years have passed since last update.

posted at

Vue.js 基本のファイル構成について

publicフォルダ

public」と「src」という2つのフォルダによて構成されています。publicには「index.html」という通常のhtmlファイルが入っています。これが、アプリのビューの大元になります。

srcフォルダ

主に編集するのはsrcフォルダになります。srcフォルダには、「assets」「components」「views」という3つのフォルダに加えて、「App.vue」「main.js」「router.js」という3つのファイルがあります。

assetsフォルダ

画像やテストデータなど、静的なファイルを保管する場所です。

componentsフォルダ

Vue.jsでは、ページ内の各要素(ヘッダー、フッター、リストなど)を「コンポーネント」という区分に小分けして管理します。コンポーネントファイルの名前は大文字で始めることが慣習化しています。

viewsフォルダ

各ページ用のファイルを保管する場所です。コンポーネントがインポートされ使用されていることがわかります。このように、Vue.jsアプリでは、ページ用のvueファイル側でコンポーネント用のvueファイルをインポートして使うことになります。

App.vue

App.vueは、各ページのベースです。ヘッダーやフッターなど、全ページに共通して表示させたいコンポーネントは、このファイルでインポートします。の部分が、viewsフォルダ内の各ページ用のファイルを受け取って表示させる役割を担っています。

main.js

全ページに反映させたいJavascriptコードを書くためのファイルです。

router.js

ルーティングの設定を行う際に編集します。

routes: [
{
      path: '/',
      name: 'home',
      component: Home
    },

実際に編集するのはroutes:の中になります。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
26