Previous: Understanding the vue-cli directory structure
Learn vue together - vue learning general route
—————————^~^ I am the cut-off line ^~^———————————————
foreword
In the last article, we briefly learned about the directory structure of scaffolding. In this article, let's continue to see what files we need to write in vue-cli.
src folder
Let's take a look at what's in the src folder
one by one
（1）assets
What is it: Store static files, which will put some such as js, css, pictures and the like.
（2）components
If you have learned grammar before, you should know what it is. If you don't know it, it is recommended to look at grammar first.
What is: Stores components
HelloWorld.vue inside
(a) What does a .vue file consist of: template (template), js (script), style (style)
(b), template: There can only be one parent node in a template. For example, the parent node div with class hello here has no other sibling nodes.
(c), script: vue usually uses es6 to write this part, and then uses export default to export, which can write such as data, mounted, methods, etc. Among them, data must be returned with return.
(d), style: Just like we write style sheets, they are all wrapped with <style></style>. However, it affects the global by default, that is to say, it affects all pages containing him. The use here is local, the syntax is <style scoped></style>, scoped means that it only affects the current page and does not affect other pages.
（3）router
The routing of vue is what I want to learn next, so here is a brief look at what is in it.
What is it: The index.js in the router folder is shown here, which is obviously the configuration file of the router.
(a) Introduction section
(b) use routing dependencies
(c) Configure routing
（4）App.view
This page structure is the same as the page structure of helloworld.vue above, so I won't talk about it, just talk about the <router-view/> inside.
This is used to display routing page content. If you want to jump, use <router-link to='xxx'></router-link>
（5）、main.js
What is it: It is the entry file of this project. It uses the modular introduction module of es6. Its function is to introduce the vue framework, root components and routes, and define vue instances.
Epilogue
Learning this is enough for beginners. If you want to continue learning vue, you can continue. However, if you want to know more, you still need to read more detailed information and check the official documentation to understand the meaning of these codes.
—————————^~^ I am the cut-off line ^~^———————————————
Next: