Directory Structure: src

src
|
|———— components
|     |———— c-*
|     |     |———— index.vue
|     |     |———— c-*.vue
|     |     |———— *.css
|     |     |____ *.{jpg,jpeg,png,gif}
|     |———— global
|     |     |__ c-*.vue
|     |____ c-*.vue
|
|———— data
|     |__ *.json
|
|———— deploy
|     |———— component.js
|     |———— directive.js
|     |———— filter.js
|     |———— interceptor.js
|     |———— promise.js
|     |———— router.js
|     |———— store.js
|     |____ vue.js
|
|———— directives
|     |____ *.js
|
|———— filters
|     |____ *.js
|
|———— fonts
|     |____ *.{eot,svg,ttf,woff}
|
|———— images
|     |____ *.{jpg,jpeg,png,gif}
|
|———— mixins
|     |____ m-*.js
|
|———— routes
|     |____ *.js
|
|———— services
|     |____ *.js
|
|———— store
|     |———— constants
|     |     |____ *.js
|     |____ modules
|           |____ *.js
|
|———— styles
|     |———— reset.css
|     |———— common.css
|     |____ *.css
|
|———— ui
|     |———— c-*
|     |     |———— index.vue
|     |     |———— c-*.vue
|     |     |———— *.css
|     |     |____ *.{jpg,jpeg,png,gif}
|     |———— global
|     |     |__ c-*.vue
|     |____ c-*.vue
|
|———— utils
|     |____ *.js
|
|____ views
|     |———— v-*.vue
|     |____ v-*
|           |———— components
|           |     |____ c-*.vue
|           |———— data
|           |     |____ *.json
|           |———— directives
|           |     |____ *.js
|           |———— filters
|           |     |____ *.js
|           |———— images
|           |     |____ *.{jpg,jpeg,png,gif}
|           |———— mixins
|           |     |____ *.js
|           |____ styles
|                 |____ *.css
|
|———— app.vue
|
|———— favicon.ico
|
|———— index.html
|
|____ main.js

components

The directory can store these files or directories:

• c-*.vue: the vue component named start with c-. The component here should be used in multiple points
• global: the directory contains these global vue components, which can be automatically registered globally. The components in the directory also should be named start withc-
• c-*: the directory contains the vue component: index.vue and other assets

data

The directory can store test data that can be used to simulate ajax in development mode. The directory has been set as static directory by express, you can find the config code in webpack-dev/server.js:

_app.use('/data', _express.static(_dirs.data))

If you has a user.json at this directory, you can simulate ajax by vue-resource or other ajax plugin:

this.$http.get('/data/user.json').then(res => {...});

deploy

The directory contains:

• component.js: register global vue component automatically in directory src/components/global and src/ui/global. The principle is require.context
• directive.js: register global vue directive automatically in directory src/directives
• filter.js: register global vue filter automatically in directory src/filters
• interceptor.js: the configuration of vue-resouce interceptor, which can be used to define every request timeout and add prefix to request url
• promise.js: add the polyfill of Promise.prototype.finally
• router.js: the configuration of vue-router. it will register route automatically which defined in directory src/routes. And you can set somethings like user authorization by register global hooks
• store.js: the configuration of vuex. it also will add state module automatically which defined in directory src/store/modules. And you can define the name of mutations or actions as constants in directory src/store/constants
• vue.js: the configuration of vue. You can do global config by Vue.config or other

The directory can also contains the file which should be required at entry: main.js

directives

The directory stores those global vue direcitives, which will be registered automatically by src/deploy/directive. The name of directive is: v-[filename], and the filename will be converted into camel case form, for example:

directives
|———— focus.js
|____ add-space.js

// the name of directives: v-focus, v-addSpace
<component v-add-space="..."/>

filters

The directory stores those global vue filters, which will be registered automatically by src/deploy/filter. The name of filter is: [filename], and the filename also will be converted into camel case form, for example:

filters
|____ date-format.js

// the name of filter: dateFormat
<component :value="value | dateFormat"/>

fonts

The directory stores icon font files.

images

The directory stores those common image files

mixins

The directory stores those vue mixins files , and the name is start with m-

routes

The directory stores those defined routes files, the routes will be registered automatically by src/deploy/router

services

The directory stores ajax api according to the function of module. e.g.

services
|____ user.js

// user.js
export const login = params => vueHttp('post', '/login', params);
export const logout = () => vueHttp('post', '/logout');

store

The directory stores vuex modules and constants

styles

The directory stores common style or global style like: reset.css

ui

The directory stores vue global ui components, the files or directories included in the directory is same as #components, but the only difference is the ui directory stores ui components which shouldn't related to business logic.

If you has chosen the open source ui library, maybe you don't need it.

utils

The directory stores js utils api

views

The directory stores vue route components, which are named as views or pages. The directory can store:

• v-*.vue: the vue route component named start with v-. And in order to the specification of name, the name after v- should be same as the file name created under the routes folder

• v-*: the folder stores the vue routing component that start the name with v-, or index.vue. Also the folder can store other assets like images

app.vue

The vue root component. In this file, you can set up router-view with dynamic keep-alive by define route meta field. For example:

<keep-alive>
  <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>

Add vue transition when the route is switching:

<transition name="fade" mode="out-in">
  <keep-alive>
    <router-view v-if="$route.meta.keepAlive"></router-view>
  </keep-alive>
</transition>
<transition name="fade" mode="out-in">
  <router-view v-if="!$route.meta.keepAlive"></router-view>
</transition>

In this file, you can also require global css file:

<style src="styles/reset.css"></style>

Finally, the app.vue will start as the root component by:

import app from 'app';
import router from 'deploy/router';
import store from 'deploy/store';

new Vue({
  router,
  store,
  render: h => h(app)
}).$mount('#app');

index.html

The html file is used as a mount point for the vue root component. You should define #app element like:

<div id="app"></div>

main.js

The entry point of a spa application