Vue.jsのディレクトリ構成について

以前では、npmのインストールプロジェクトを使用し、IDE(Eclipse、Atomなど)でディレクトリを開きました。構造は次のとおりです。

ディレクトリの解説

ディレクトリ/ファイル説明
buildプロジェクトで(webpack)関連コードを構成する。
configポート番号などを含むディレクトリを構成する。初心者にはデフォルトを使用できる。
node_modulesnpmによってロードされたプロジェクトはモジュールを依存する
src次には開発する必要があるディレクトリである。使用する必要なプロジェクトは基本的にこのディレクトリにある。この中には、いくつかのディレクトリとファイルが含まれている。

assets:logoなどの写真を配置する。
components:ディレクトリにコンポーネントファイルが配置されている、必要がなければ使わなくてもよい。
App.vue:プロジェクトエントリファイルである。 componentsディレクトリを使用する代わりに、ここにコンポーネントを直接書き込む。
main.js:プロジェクトのコアファイルである。
static画像、フォントなどの静的リソースのディレクトリである。
test初期にディレクトリのテストで、削除可能である。
.xxxx文件これらは、構文、gitなどを含むいくつかの構成ファイルである。
index.htmlホームページエントリファイルであり、いくつかのmeta情報または統計コードを追加できる。
package.jsonプロジェクト構成ファイルである。
README.mdmarkdown形式のプロジェクト説明ドキュメントである。

APP.vueファイルを開きました。コードは次のとおりです。(説明はコメントにあります。)

src/APP.vue

<!--プレゼンテーションテンプレート--> 
<template> 
<div id="app"> 
<img src="./assets/logo.png"> 
<hello></hello> 
</div>
</template> 
<script> 
// コンポーネントをインポートする 
import Hello from './components/Hello' 
export default { 
name: 'app', 
components: 
{ Hello } 
} 
</script> 
<!-- スタイルコード --> 
<style> 
#app { 
font-family: 'Avenir', Helvetica, Arial, sans-serif; 
-webkit-font-smoothing: antialiased; 
-moz-osx-font-smoothing: grayscale; 
text-align: center; 
color: #2c3e50; 
margin-top: 60px; 
} 
</style>

次には初期化されたプロジェクトを変更してみて、Hello.vueを次のコードに変更します。

src/components/Hello.vue

<template> 
<div class="hello"> 
<h1>{{ msg }}</h1> 
</div> 
</template>
<script> 
export default { 
name: 'hello', 
data () { 
return { 
msg: 'Welcome to ceodata.com!' 
}
} 
} </script>

http://localhost:8080/を再度開くと、変更後に自動的に更新されます。表示効果は次のとおりです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です