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 inhead Area plus your appropriatemeta head |
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…