vue项目回顾1【项目结构及框架思路】

趁机做一个vue项目回顾，以便以后上手方便，也能巩固记忆
项目结构如下，一一细说。

image.png

1.index.html

image.png

2.src/main.js
包含路由，数据集中管理（store），交互（axios），移动端的滑动手势组件（alloyfinger），公共js方法（Common）等等

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import mint from 'mint-ui'//是饿了么的一个通用组件，button，mean。。
import store from './store'
import axios from 'axios'
import Common from './assets/js/common'
import AlloyFinger from 'alloyfinger'//手势控制组件
import AlloyFingerPlugin from 'alloyfinger/vue/alloy_finger_vue'

Vue.use(mint);
Vue.use(AlloyFingerPlugin,{
  AlloyFinger
})
Vue.prototype.common = Common;//引用公共js

Vue.config.productionTip = false
Vue.prototype.$http = axios;
/* eslint-disable no-new */
new Vue({
  el: '#app',//这个id名要与index.html中的id名一致
  router,
  store,
  components: { App },
  template: ''
})

3.src/App.vue
单页面转换就在这个mian里面进行，加了transitionName是为了页面转换效果更好，css样式在最下面。还有其他的一些页面part，先引用再在components里放。至于watch里面的代码功能是为了根据退出/前进决定滑动的css样式效果。

4.components文件夹里放各种页面组件，assets里是静态文件（图片，js等），router里面是路由跳转index.js文件，store是根据vuex进行数据管理的文件，分了多个模块。
5.路由router/index.js

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

import Mylist from '../components/mylist'
import SongPage from '../components/songPage'
import VideoPage from '../components/videoPage'
...

const router = new Router({
  routes: [
    {
      path: '/',
      name: 'mylist',
      component: Mylist
    },
    {
      path: '/mylist',
      name: 'mylist',
      component: Mylist
    },
    {
      path: '/songPage',
      name: 'songPage',
      component: SongPage
    }, {
      path: '/videoPage',
      name: 'videoPage',
      component: VideoPage
    }
    ...
  ]
})
export default router

6.组件页面components/mylist.vue