一般的なVueプロジェクトのディレクトリ構造
|--config/ #Vue基本設定ファイル。リスニング・ポートやパッケージ出力などを設定できる。
|--node_modules/ #
|--public
|--favicon.ico #ラベルアイコン
|--index.html #現在のプロジェクトで唯一のページ
|--src
|--assets #静的リソースimg,css,js
|--api #
|--components #
|--store
|--index.js #ルート状態管理セット
|--modules #モジュール式の状態管理
|--actions #mutationメソッドを投入して、非同期操作を実行する。
|--getters #stateのメンバ変数を処理し、外部に渡す
|--mutation-types.js #プロジェクトが変異メソッド用の定数を保存するファイルで、必要に応じて追加する。
|--mutations #データの追加、削除、変更など、状態データを操作するためのメソッド集。
|--index.js
|--views
|--xxx.vue
|--router
|--index.js #ルーティング・スクリプト・ファイルで、ルーティング・URLとページ構成のマッピングを設定する。
|--App.vue #
|--main.js #エントリー・ファイル
|--package.json #プロジェクトの設定情報、起動方法など。
Vueの実行時の流れ
index.html-->main.js-->App.vue-->router/index.js
index.html ---プロジェクトポータル
index.htmlの内容は比較的単純で、主にvueがマウントするためのdivを提供します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width, minimal-ui, viewport-fit=cover" />//モバイル画面に対応する
<title>ホームのタイトル</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
main.js---エントリーファイル
main.jsは主にvue、app、routerモジュールを導入し、vueオブジェクトを作成し、app.vueテンプレートの内容をindex.htmlのappというidを持つdivタグの下にマウントし、ルーティング設定をバインドします。
import Vue from 'vue' /*vueフレームワークを導入する*/
import App from './App' /*ルート・コンポーネントの紹介*/
import router from './router' /*ルーティング設定を導入する*/
import store from './store' /*ルート状態管理セット・ファイルを導入する*/
Vue.config.productionTip = false /*本番モードで表示されるプロンプトをオフにする*/
//ルート・コンポーネントを定義し、renderを使って.vue ，$mount置換インデックスをレンダリングする.htmlのプレースホルダーは
new Vue({
el:'#app',
router,
store,
render:h=>h(App),
}).$mount('#app');
App.vue ---
<template></template><script></script><style></style>Vueでは、多くの場合、拡張子.vueのファイルを作成する必要があり、通常、次の3つの部分から構成されます： 、 。template></template><script></script><style></style>template></template>.vueファイルは、通常、次の3つの部分から構成されています。 .vueは、通常、使用するWebインタフェースを作成し、データを扱い、ロジック指向で、主にタグ内のスタイルを担当します。これら3つのコンポーネントの組み合わせによって、あなたが見ているウェブページが構成されます。一般的に、新しいページを開発する際には、3つのコンポーネントが記述された新しい.vueファイルを作成する必要があります。
<router-view/><router-view/>上記のmain.jsは、index.htmlのdivタグ内にApp.vueテンプレートのコンテンツを配置します。
<template>
<div id="app">
<router-view/>
</div>
</template>
<script>
export default {
name: "app"
};
</script>
<style>
.add-container {
margin-bottom: 20px;
}
</style>
.vueファイルを書く際に注意すべき点をいくつか挙げておきます：
テンプレートには1つの親ノードしか含めることができません。
<router-view></router-view>これは子ルーティングビューであり、後のすべてのルーティングページが表示されます。スクリプトタグの場合、vueは通常es6で記述され、export defaultでエクスポートされ、内部でデータdata、ライフサイクル、メソッドなどを含むことができます。
<style></style><style scoped></style>スタイルは style タグでラップされます。デフォルトのスコープはグローバルですが、コンポーネントの下で動作するようにスコープを定義する必要がある場合は、タグに scoped( ) を追加する必要があります。
router.js---ルーティングの設定
routerフォルダの中にindex.jsファイルがあり、これがルート設定ファイルです。下のイメージからわかるように、このファイルは、パス / にアクセスしたときに Home テンプレートの内容を上の router-view に配置するルートを設定します。
import Vue from 'vue';
import Router from 'vue-router';
import Home from 'views/home'
import About from 'views/about'
Vue.use(Router);
export default new Router({
base:'/'
routes:[
{
path:'/',
name:'home',
component:Home
},
{
path:'/about'
name:'about',
component:About
}
]
});
ユーザがブラウザでルート / にアクセスすると、ルータプラグインは home.vue ファイルを読み込み、同様に /about は about.vue ファイルを読み込みます。<router-view/>App.vueファイルのプレースホルダを、読み込んだhome.vueファイルまたはabout.vueファイルに置き換えます。
###home.vue
<!--
1) .vueファイルはコンポーネントである
2）コンポーネントはすべて、html構造、jsロジック、cssスタイルの3つの部分から構成されている。
html構造はすべてtemplateタグの中にあり、ページ構造のルート・タグは1つだけである。
jsロジックはすべてscriptタグの中にある。，export default
cssスタイルはすべてstyleタグの中にあり、scoped属性はスタイル・コンポーネント化されるように設定しなければならない。
-->
<template>
<div class= "home">
<h1>Home</h1>
</div>
</template>
<script>
//.vueファイルはモジュールに似ていて、互いに直接インポートすることができるので、コンポーネント内でエクスポートを設定する必要がある。
export defalt {
}
</script>
<style scoped>
.home {
}
</style>
