Vue2+vuerouter2+webpack construction Project (ii) directory and file structure __web

Vue2+vuerouter2+webpack Construction Project actual combat (ii) directory and file structure August 2017 Supplements

2016, I wrote a series of VUE introductory tutorials, when I wrote this series of posts, I was just a rookie, even in the process of writing off the code review, otherwise not pass the check.

Originally write this series of Bowen just to give oneself to see, but unexpectedly is, this series of clicks more than 20,000, search engine ranking is also very ideal, this let me trepidation, lest I write blog some flaws, fraught.

Moreover, this year's development, VUE Project Rapid iteration, looking at my blog that I wrote a year ago, it is possible that various hints have changed, in contrast to outdated information, it is very likely that the novice in the process of learning to create unnecessary trouble.

Therefore, I decided to rewrite this series of Bowen, and strive to concise, clear, accurate graphics and text and code description, with GitHub project open source code, to give you VUE novice to provide a high-quality introductory copy.

Here are my blog posts: Vue2+vuerouter2+webpack+axios construction project 2017-plate (i) Basic knowledge Overview Vue2+vuerouter2+webpack+axios construction project actual combat 2017 Plate (ii) installation Nodejs Environment and VUE-CLI Construction of initial project Vue2+vuerouter2+webpack+axios construction project combat 2017-plate (iii) Recognition of all project documents Vue2+vuerouter2+webpack+axios Construction project 2017-plate (four) adjust App.vue and Router routing Vue2+vuerouter2+webpack+axios build project combat 2017 re-plate (v) Configure Axios API interface call file Vue2+vuerouter2 +webpack+axios construction project 2017-plate (vi) interface with the Webpack agent to the local Vue2+vuerouter2+webpack+axios construction project actual combat 2017 Plate (vii) *.VUE file vue2+ Vuerouter2+webpack+axios Construction Project actual combat 2017 Seihan (eight) render a list of first Vue2+vuerouter2+webpack+axios construction project 2017 heavy Plate (nine) and then the content page rendering out vue2+ Vuerouter2+webpack+axios construction project 2017-plate (10) package project and publish to subdirectory Vue2+vuerouter2+webpack+axios construction project 2017 re-plate (11) Periodic summary

The following is the original Directory Index

"Vue2+vuerouter2+webpack construction Project actual combat" (i) preparatory work

"Vue2+vuerouter2+webpack construction Project actual combat (ii) directory and file Structure"

"Vue2+vuerouter2+webpack construction project Combat (iii) configuration routing, the whole two pages first"

"Vue2+vuerouter2+webpack construction project actual combat (iv) Connect API, first render a list"

"Vue2+vuerouter2+webpack construction Project Combat (V) Configuration sub-route"

Through the previous blog "Vue2+vuerouter2+webpack Construction Project Combat (a) preparation", we have built a new project based on Vue+webpack. This blog post will detail the structure of the project, and then where do we start. The project directory and the file structure.

As shown in the figure above, this is how our directory structure is.

td> This is when we finally release the code will be released here, in the development phase, we basically do not have to manage. the

directory/File	description
Build
config	configuration directory, the default configuration is no problem, so we don't have to control
node_modules	This directory is a number of modules that we rely on for our project development, which has a lot of content, but happily, we don't have to control
src	Our development directory, basically most of the work is done here in the
static	Resource directory, we can put some pictures ah, font ah, put it here.
test	Initial test directory, no use, delete can
. xxxx file	These are some configuration files, including syntax configuration, git configuration, and so on. Basically, there's nothing left to do.
index.html	First page entry file, basically no pipe, if you are developing a mobile end project, you can add your appropriate meta header to the head area
package.json	project configuration file. The early stage basically does not have the tube, but you may look for the relevant information, studies inside the various configuration. At least, you know what the difference is. The beginning of the matter.
readme.md	no control

As above, this is basically the case. Important, or Src folder. src folder Situation

As shown in the figure above, this is the initial condition under the SRC folder, which has some sample code. For example, its logo is placed in the assets folder. I personally do not like to do so, because the code is code, resources are resources, each to its own bit better.

The Commponents directory contains a demo component file that you can open and look at. Of course, it can also be deleted directly, and then go down according to my blog.

App.vue is a project entry file. Of course, we need to change the way we can use it. The blog post will say.

Main.js This is the core document of the project. The global configuration is in this file configuration, I will later on in detail how to do here. Organize catalogs

The above is just to let you know what the specific situation, below, we start to do not want to tube to kill, and then the SRC into this look:

As shown in the figure above, the folder and file are all new, and I'll give you the code for each file in detail in the following blog post. Here, you can create a new blank file. Note that I use Scss to write CSS files. So reader you'd better learn about scss content, my blog has, search is a lot.

files \ Directories	Description
Component	Component folders Some of the common content we write can be put here.
Config	Core Configuration Folder
Frame	Folders to store from routing
Page	Project Template folder, all the paging files are stored with this, the following will be based on the need to build a variety of subdirectories
Style	Style Store Directory

Vue support each template to write CSS, so you can do with the use. But, personally, I don't like it that much, I still like it. css to separate out, because it is easy to organize, in addition, the use of scss friends know that we will preset a large number of variables, code pieces for us to write CSS when used, if each template file inside need to quote it and its fucked.

You can start with me. And then when you've got it all figured out, you can play with it. Whatever

This post is here first, and we'll go on with that later.

This article by Fungleo Original, allow reprint, but the reprint must be accompanied by the first link. If you do not bring links, I will take the means including but not limited to deeply despise you.

Starting Address: http://blog.csdn.net/fungleo/article/details/53171614