1: Introduction to directory structure
2: Project introduction
build folder and subdirectories
Here are some webpack configurations, which are mainly used for some settings when packaging the project. I won’t go into more details here. The relevant files and configurations will be introduced in detail when they are used later.
config files and subdirectories
This folder contains some configurations for the development and runtime of the entire project, such as the startup port of the project when npm run dev is used.
node_modules files and subdirectories
This folder contains all the basic dependency packages of node. When we expand and install some other plug-ins, they will also be installed in this folder.
src files and subdirectories
This folder is the main folder of the entire project, and most of our code is completed here. Let’s take a closer look at what’s inside:
assets folder
It mainly contains some resource files. For example, files such as js and css.
Assets contains files that may change.
The files in the assets directory will be merged into one file and then compressed. It is mostly used to store business-level js, css, etc., such as some global scss style files, global tool class js files, etc.
Expansion: The assets directory can be divided into different subdirectories to store files according to your own needs. For example, assets/util/ can be used to store tool js, assets/api/ can be used to store business interface js, etc.
components folder
It can be said to be the soul of Vue. All component files can be placed here.
Components! A Vue project is assembled from components.
router folder and subdirectories
What is in this folder is the routing of the entire vue project. vue is a representative of single-page applications. Here are the files that set the addresses of each component.
Using vue-router to manage routing in the project is divided into the following steps:
Step 1: Install vue-router in the terminal
npm install -g vue-router
Step 2: Create a router folder in the src directory, create router.js in this folder (it can also be the same as main.js, directly create router.js), and configure the corresponding configuration in the router.js file Information
Step 3: Introduce the routing instance router into the entry file main.js, and then register it in the root instance
views folder
The view folder is used to store "pages". A view can have one or more components, and a view is actually intended to be accessed by a navigation URL. They are usually placed in src/views.
app file
This file is the entry file for the entire project, equivalent to the outermost div that wraps the entire page.
App. vue is our root component (the .vue component that uses tags to render the entire project), and all pages are switched under App. vue. In fact, you can also understand that all routes are also sub-components of App. vue. So we mark router as a subcomponent of App. vue.
main.js file
This file is the main js of the project. Various variables, js, and plug-ins used globally are introduced and defined here.
static folders and subdirectories
In this folder are some static resource files.
These four files are the files that come with the project.
Basically not used.
index file
It is the hosting page of the project.
package file
It is the json format of all plug-ins used in the entire project, such as the name and version number of the plug-in. When using npm install in the project, node will automatically install all the plug-ins in this file.
Here are some documentation for the project.
dist folder
It will appear after executing the npm run build packaging command. After the entire project is written, all the packaged files will be here. You only need to access the index file in the folder to enter the application.
One last picture.
