以前では、npmのインストールプロジェクトを使用し、IDE(Eclipse、Atomなど)でディレクトリを開きました。構造は次のとおりです。
ディレクトリの解説
ディレクトリ/ファイル | 説明 |
build | プロジェクトで(webpack)関連コードを構成する。 |
config | ポート番号などを含むディレクトリを構成する。初心者にはデフォルトを使用できる。 |
node_modules | npmによってロードされたプロジェクトはモジュールを依存する |
src | 次には開発する必要があるディレクトリである。使用する必要なプロジェクトは基本的にこのディレクトリにある。この中には、いくつかのディレクトリとファイルが含まれている。 assets:logoなどの写真を配置する。 components:ディレクトリにコンポーネントファイルが配置されている、必要がなければ使わなくてもよい。 App.vue:プロジェクトエントリファイルである。 componentsディレクトリを使用する代わりに、ここにコンポーネントを直接書き込む。 main.js:プロジェクトのコアファイルである。 |
static | 画像、フォントなどの静的リソースのディレクトリである。 |
test | 初期にディレクトリのテストで、削除可能である。 |
.xxxx文件 | これらは、構文、gitなどを含むいくつかの構成ファイルである。 |
index.html | ホームページエントリファイルであり、いくつかのmeta情報または統計コードを追加できる。 |
package.json | プロジェクト構成ファイルである。 |
README.md | markdown形式のプロジェクト説明ドキュメントである。 |
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/を再度開くと、変更後に自動的に更新されます。表示効果は次のとおりです。
コメントを残す