# Vue.js Directory Structure In the previous chapter, we used npm to install the project. We open this directory in an IDE (Eclipse, Atom, etc.), and the structure is as follows: !(#) ### Directory Explanation | Directory/File | Description | | --- | --- | | build | Project build (webpack) related code | | config | Configuration directory, including port numbers, etc. Beginners can use the defaults. | | node_modules | Project dependency modules loaded by npm | | src | This is the directory we will develop in. Basically, everything we need to do is in this directory. It contains several directories and files: * assets: Stores some images, like logos, etc. * components: Contains a component file, which is optional. * App.vue: Project entry file. We can also write components directly here instead of using the components directory. * main.js: Core file of the project. | | static | Static resource directory, such as images, fonts, etc. | | test | Initial test directory, can be deleted | | .xxxx files | These are some configuration files, including syntax configuration, git configuration, etc. | | index.html | Homepage entry file, you can add some meta information or analytics code, etc. | | package.json | Project configuration file. | | README.md | Project documentation in markdown format | Earlier, we opened the APP.vue file, and the code is as follows (explanation in comments): ## src/APP.vue // Import component import Hello from './components/Hello' export default { name: 'app', components: { Hello } } #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; } Next, we can try modifying the initialized project by changing Hello.vue to the following code: ## src/components/Hello.vue export default { name: 'hello', data () { return { msg: 'Welcome to Tutorial!' } } } Reopen the page http://localhost:8080/. Usually, it will refresh automatically after modification, and the display effect is as follows: !(#)