Vue.js directory structure
In the previous chapter we used the npm installation project, we opened the directory in the IDE (Eclipse, Atom, etc.), the structure is as follows:
Directory Resolution
| Directory/File | Description |
|---|---|
| build | project build (webpack) related code |
| config | Configuration directory, including port number, etc. We can use the default for beginners. |
| node_modules | npm loaded project dependent module |
| src | This is the directory we are going to develop. Basically, everything is done in this directory. It contains several directories and files:
|
| static | Static resource directory, such as pictures, fonts, etc. |
| test | Initial test directory, can be deleted |
| .xxxx file | These are some configuration files, including syntax configuration, git configuration, and more. |
| index.html | Home entry file, you can add some meta information or statistical code. |
| package.json | Project configuration file. |
| README.md | Project documentation, markdown format |
In the previous section we opened the APP.vue file with the following code (explained in the comments):
src/APP.vue
<!-- Presentation Templates-->
<template>
<div id="app">
<img src="./assets/logo.png">
<hello></hello>
</div>
</template>
<script>
// Import components
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 to modify the initialized project and change 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 the Programming tutorial! '
}
}
}
</script>