file structure

After successfully building the Vue project according to the content of the previous chapter, you will find several folders like this:

node_modules: dependent libraries installed by node
src: (main working area) source code folder of the project
(Probably not) .vscode: Folder generated by vscode, storing vscode configuration files

There are also some files that we will use later, and we will introduce more at that time.

src folder

src is the folder where the source code is stored, which contains these files by default:

assets folder: resources, such as static resources such as pictures and texts
components folder: vue components, which are generated by default with several files like HelloWorld.vue
App.vue: It can be simply understood as the bottom-level front-end page description file
main.js: can be simply understood as the main.java of the entire vue project, the main entry program

key content

From shallow to deep, we first focus on main.jsandApp.vue

app.vue

Open it and App.vueyou can find a bunch of code:

<template>
  <header>
    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />

    <div class="wrapper">
      <HelloWorld msg="You did it!" />
    </div>
  </header>

  <main>
    <TheWelcome />
  </main>
</template>

It can be understood that this is your index.html, you write something in it, and what the vue project will look like after it runs out.

main.js

Open it and main.jsyou will find such content, which means: import the createApp method, create a new vue object called app, and mount it to an index. It will be clear after JS)

import {
    
     createApp } from 'vue'
import App from './App.vue'

import './assets/main.css'

const app = createApp(App)
app.mount('#app')

components

In the above App.vuecode , you found that besides divthe tag HelloWorld, this tag is in our custom component components folder HelloWorld.vue.
Why do you want to do this? We encapsulate 按钮, and then you can directly reference it whenever you want to use it, and directly modify its source when modifying, so as to facilitate maintenance and development.表格myButton.vue

.vue document

Open any .vuefile , you will find that there are <template>, <script>, <style>, which correspond to html+css+js, each file is clearly divided, and each .vuefile has completed the basic function and style packaging, our development work will also mainly focus on Follow these, for example a simple 二次封装button :

<template>
  <div class="main">
    <button class="button">{
   
   { buttonContext }}</button>
  </div>
</template>

<script setup>
import {
      
       ref } from "vue";

const buttonContext = ref(0);
</script>

<style>
.main {
      
      
  min-width: 20px;
}
.button {
      
      
  min-width: 20px;
}
</style>

How to make such a button? Please see the next chapter.

Know the file structure and function in the new Vue project (vue learning - Ch1.2 know the vue file)

Article directory