❮ Vue Mixins Vue Component ❯

Vue.js Directory Structure

In the previous chapter, we installed the project using npm. When we open this directory in an IDE (such as Eclipse, Atom, etc.), the structure looks like this:

Directory Breakdown

Directory/File	Description
build	Code related to project build (webpack)
config	Configuration directory, including port numbers, etc. We can use the default settings for beginners.
node_modules	Project dependency modules loaded by npm
src	This is the directory where we develop. Most of the work happens here. It includes several directories and files: assets: for placing images, such as logos.<br> components: contains a component file, which can be omitted.<br> App.vue: the entry file of the project, we can also directly write components here without using the components directory.<br> main.js: the core file of the project.
static	Directory for static resources, such as images and fonts.
test	Initial test directory, can be deleted
.xxxx files	These are configuration files, including syntax configuration, git configuration, etc.
index.html	Entry file for the homepage, you can add some meta information or tracking codes here.
package.json	Project configuration file.
README.md	Project documentation in markdown format

Earlier, we opened the APP.vue file, which contains the following code (explanations are in the comments):

src/APP.vue

<!-- Display Template -->
<template>
  <div id="app">
    <img decoding="async" src="./assets/logo.png">
    <hello></hello>
  </div>
</template>

<script>
// Importing component
import Hello from './components/Hello'

export default {
  name: 'app',
  components: {
    Hello
  }
}
</script>
<!-- Style Code -->
<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>

Next, we can try modifying the initialized project by changing the Hello.vue to the following code:

src/components/Hello.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to tutorialpro.org!'
    }
  }
}
</script>

Reopen the page at http://localhost:8080/, typically modifications will auto-refresh, and the display will look like this:

❮ Vue Mixins Vue Component ❯