Summarize some knowledge points of vue3: Vue.js directory structure

Vue.js directory structure

In the previous chapter, we used npm to install the project. We opened the directory in the IDE (Eclipse, Atom, etc.), and the structure is as follows:

directory resolution

directory/file	illustrate
build	Project construction (webpack) related code
config	Configuration directory, including port numbers, etc. We can use the default for beginners.
node_modules	Project dependencies loaded by npm
src	Here is the directory we want to develop, basically everything to be done is in this directory. It contains several directories and files: * assets: place some pictures, such as logo, etc. * components: There is a component file in the directory, which can not be used. * App.vue: Project entry file, we can also directly write components 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 files	These are some configuration files, including syntax configuration, git configuration, etc.
index.html	Home entry file, you can add some meta information or statistical codes.
package.json	Project configuration file.
README.md	Project documentation, markdown format

Earlier we opened the APP.vue file, the code is as follows (explained in the comments):

src/APP.vue

<!-- 展示模板 -->
<template>
  <div id="app">
    <img src="./assets/logo.png">
    <hello></hello>
  </div>
</template>
 
<script>
// 导入组件
import Hello from './components/Hello'
 
export default {
  name: 'app',
  components: {
    Hello
  }
}
</script>
<!-- 样式代码 -->
<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 modify 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: '欢迎来到菜鸟教程！'
    }
  }
}
</script>

Re-open the page http://localhost:8080/, generally it will be automatically refreshed after modification, and the display effect is as follows: