This is the 25th day of my participation in the August Challenge

In the previous post we created a VUE3 project, which we outlined.

You can actually modify it. Let’s go deeper.

V What is the project structure?

Vue CLI setup projects are as follows:

./README.md

./yarn.lock

./public

./public/favicon.ico

./public/index.html

./babel.config.js

./package.json

./src

./src/App.vue

./src/main.js

./src/components

./src/components/HelloWorld.vue

./src/assets

./src/assets/logo.png

The focus here is on package.json.

Public and SRC.

There are static pages in Pubilc. SRC is some component code for VUE.

Package. The json parsing

In addition to the general attributes of the project, we need to focus on scripts and dependencies.

"scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "Vue - the cli - service lint"}, "dependencies" : {" core - js ":" ^ 3.6.5 ", "vue" : "^ 3.0.0"}, \Copy the code

dependencies

This is intuitive and relies on the Core-JS library and the Vue JS library.

It says version 3. X.

Scripts parsing

There are three of them.

Lint this performs code formatting.

Build builds the project

Serve gets the project rendering server running.

Next up is the public directory

This is mainly to place the home page of the website, such as the need to customize the title can be modified this.

And a little icon for the website.

Then comes the most important vUE source directory – SRC

<template>

  <img alt="Vue logo" src="./assets/logo.png">

  <HelloWorld msg="Welcome to Your Vue.js App"/>

</template>

\


<script>

import HelloWorld from './components/HelloWorld.vue'

\


export default {

  name: 'App',

  components: {

    HelloWorld

  }

}

</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>
Copy the code

We can see that the entire app. vue page code is divided into three parts.

The template block

A template for a component that can reference other component labels.

The script block

Vue component implementation code, where the HelloWorld component is introduced.

Style block

Declare the style of the page component.

To complete the project structure, let’s change the component code and run it.

For example, modify app.vue above

Welcome to develop the first vue.js App

Recompile run

$ yarn serve

The running effect is as follows, see the project.

conclusion