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
Vue3 project is more intuitive, directory layout is very clear, easy to use!
That’s all for today.
I am meatball, learn a little knowledge every day. A front-end development hope to encourage more support, thank you