暂时不写代码

在上一期的故事中，我们学习了Angular，并与Vue.js进行了比较 – 环境设置第一部分。

尽管我曾经豪言壮语说”别墅已经没问题了，快过来！”，但我还是啰嗦地解释了关于命令工具的细节。不过，这次我想再啰嗦地解释一下关于目录的事情。

给那些着急的人，光说不练的人看源代码的烦人要求的源代码。

目录结构

.
├── README.md
├── babel.config.js // javascriptのコンパイルに関する設定ファイル
├── package.json
├── postcss.config.js
├── public
│   ├── favicon.ico
│   └── index.html
├── src
│   ├── App.vue // エントリーファイル
│   ├── assets
│   │   └── logo.png
│   ├── components
│   │   └── HelloWorld.vue
│   ├── main.js
│   ├── router
│   │   └── index.js // ルーティングファイル
│   ├── store
│   │   └── index.js // vuexファイル
│   └── views
│       ├── About.vue
│       └── Home.vue
└── yarn.lock

主要的开发工作是编辑位于src文件夹下以.vue扩展名的文件。

.
├── README.md
├── angular.json // angular全体の設定ファイル
├── browserslist // サイトの対象ブラウザを設定するファイル（https://github.com/browserslist/browserslist）
├── package-lock.json
├── package.json
├── src
│   ├── app
│   │   ├── app-routing.module.ts // メインルーティングファイル
│   │   ├── app.component.ts
│   │   └── app.module.ts
│   ├── assets
│   ├── environments
│   │   ├── environment.prod.ts
│   │   └── environment.ts
│   ├── favicon.ico
│   ├── index.html
│   ├── main.ts
│   ├── polyfills.ts
│   └── styles.scss
├── tsconfig.app.json
└── tsconfig.json

一方面，Angular方面生成了.ts文件。主要通过编辑和开发该文件。

组件文件

逐步比较.vue和.ts文件。

Vue文件

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <p>
      For a guide and recipes on how to configure / customize this project,<br>
      check out the
      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
    </p>
    ...
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

如果你看一下环境搭建后的src/components/HelloWorld.vue文件

可以看出HTML、CSS和JavaScript都被写在一个文件中

在部分，有HTML代码。在