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

This is the directory we are going to develop. Basically, everything is done in this directory. It contains several directories and files:

  • assets: Place some images, such as logos.
  • components: A component file is placed in the directory, you can use it.
  • App.vue: The project entry file, we can also write the component directly here instead of using the components directory.
  • main.js: The core file of the project.
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):


<!-- 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:


<template> <div class="hello"> <h1>{{ msg }}</h1> </div> </template> <script> Export default { Name: 'hello', Data () { Return { Msg: 'Welcome to the Programming tutorial! ' } } } </script>

welookups is optimized for learning.© welookups. 2018 - 2019 All Right Reserved and you agree to have read and accepted our term and condition.