VUE project directory structure

As shown in the figure above, our directory structure looks like this.

Directories/Files instructions
build So this is where we’re going to release the code when we finally release it, so in the development phase, we don’t really have to deal with it.
config Configuration directory, the default configuration is fine, so we don’t have to worry about it
node_modules This directory is a repository for modules that we rely on for our project development. There are many, many things in it, but happily, we don’t have to worry about them
src Basically the vast majority of our development catalog is done here
static Resources directory, we can put some pictures, fonts, things like that here.
test Initial test directory, useless, delete it
. XXXX file These are some configuration files, including syntax configuration, Git configuration, etc. Don’t worry about it. Just leave it
index.html Home page entry file, basically do not care, if it is the development of mobile terminal project, can be inheadArea plus your appropriatemetahead
package.json Project profile. Early days need not be taken care of basically, but you can look for relevant data, learn each configuration inside. At the very least, you know what the difference is. Leave it at the beginning.
README.md No need to worry

As above, that’s basically the case. The SRC folder is important.

SRC folder

As shown above, this is the initial scenario under the SRC folder, with some sample code and the like. For example, it puts the logo inside assets. I personally hate to do this, because code is code and resources are resources, and it’s better to put them in their place.

The CommPonents directory contains a demo component file that you can check out. Of course, you can just delete it and follow my post.

App.vue is the project entry file. Of course, we need to retrofit, retrofit into something we can use. A later blog post will say.

Main.js This is the core file of the project. The global configuration is done in this file, which I’ll explain in more detail later.

Finishing directory

Just to give you an idea of what’s going on, let’s start by killing the ones we don’t care about and making SRC look like this:

Create new folders and files, as shown in the image above. I’ll detail the code for each file in a later post. In this case, just create an empty file. Notice that I use SCSS to write CSS files. So see officer you had better also study the relevant content of SCSS, my blog has inside, search is also a big.

File \ directory instructions
component Component folder some of the common content we wrote can be put here.
config Core configuration folder
frame The folder where the route is stored
page Project template folder, all page files are stored in this, later will be based on the need to establish the seed directory
style Style store directory

Vue supports each template to write CSS, so that it can be used at any time. However, I personally don’t like this. I prefer to keep CSS separate because it’s easier to organize. Also, as anyone who uses SCSS knows, we prespecify a large number of variables and pieces of code that we can use when writing CSS.

You can start with me. And then when you’ve got it all figured out, you can do whatever you want with it. Literally.

That’s the end of this blog post and we’ll continue later.

The starting address: blog.csdn.net/fungleo/art…