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

Through the previous blog "Vue2+vuerouter2+webpack Construction Project Combat (a): Preparation work", we have built a new project based on Vue+webpack. This article describes in detail the structure of the project under review.

Project directory and file structure

：

As shown, this is the structure of the auto-built Vue project.

Catalog/File	Description
Build	This is when we finally release the code here, in the development phase, we basically do not have to tube.
Config	Configuration directory, the default configuration is not a problem, so we do not have to control
Node_modules	Some of the modules that are dependent on project development
Src	Development directory (most of the work is done here)
Static	Resource Directory
Test	Initial test directory, useless, delete
. xxxx file	These are some configuration files, including syntax configuration, git configuration, and so on. Basically no tube, just leave it.
Index.html	Home portal file, basic no tube, if you are developing mobile projects, you can add your appropriate meta header in the head area
Package.json	The project configuration file. Basic no tube, but you can find the relevant information, learn about the various configurations inside. At least, you know what the difference is. It doesn't matter at the beginning.
Readme.md	No tube.

src folder

As shown, this is the initial situation under the SRC folder, with some sample code in it. For example, it puts the logo in the Assets folder.

commponentsA demo component file is placed in the directory.
routerFile placement routing configuration file;
App.vueis the project entry file.
main.jsThis is the core file of the project, the global configuration is configured in this file

The entry code for the App.vue project is as follows:

<Template>  <DivID= "App">    <imgsrc= "./assets/logo.png">    <Router-view></Router-view>  </Div></Template><Script>Exportdefault{name:'app'}</Script><style>#app{font-family:' Avenir ', Helvetica, Arial, Sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:Grayscale;text-align:Center;Color:#2c3e50;Margin-top:60px;}</style>

The core file Main.js code is as follows:

// The Vue build version to load with the ' Import ' command // (runtime-only or standalone) has the been set in the webpack.base.conf with an alias. Importvue from ' Vue'./app './router 'false/* / New Vue ({  ' #app ',  router,  ' <App/> ', components  : {app}})

The core configuration file is to introduce Vue, import the portal Vue and introduce the route, and finally new a Vue instance object to load the data.

Index.js under the Router folder

Import Vuefrom ' vue ' vue-router' @/components/hello 'defaultnew  Router ({  routes: [    {      '/',      ' Hello ',      Component:hello    }  ]}) 

In this index.js, the Hello.vue component module is introduced to configure the routing information.

Organize your catalogue

The above is just to let you know what the specific situation, below, we began to do not want to take care of the kill, and then the SRC into this way:

As shown, create a new folder and file, and I'll give you the code for each file in detail later in the post.

file directory	Description
Component	Components folder We write some of the common content that can be put here.
Config	Core Configuration Folder
Frame	Folder to store self-routing
Page	Project Templates folder, all the paging files are stored with this, and later, depending on the need to create a variety of subdirectories
Style	Style Store Directory

Vue supports each template to write CSS, so that it can be used with the pick. However, I personally do not like this, I still like the CSS to be put out alone, because it is easy to organize, in addition, the use of scss friends know that we will preset a lot of variables, the code for us to write CSS when used, if each template file inside the need to refer to it is and its fucked.

Reference

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

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