Vue项目简介

简单介绍一下Vue项目各个文件的作用，以及相互间联系（作者自己理解）

配置文件

package.json
项目所有加载的依赖（node_module）都在这边

{
  "name": "shennong-center-service-cms",
  "version": "0.1.0",
  "private": true,
  "scripts": {//scripts指定了运行脚本命令的npm命令行缩写
    "dev": " vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "test:e2e": "vue-cli-service test:e2e",
    "test:unit": "vue-cli-service test:unit",
    "fix-memory-limit": "cross-env LIMIT=100000 increase-memory-limit"
  },
  "dependencies": {//dependencies字段指定了项目运行所依赖的模块

  },
  "devDependencies": {//devDependencies指定项目开发所需要的模块
   
  }
}

package-lock.json
锁定安装时的依赖包的版本号，并且需要上传到git，以保证其他人在npm install时大家的依赖能保证一致
node_module文件夹
里面所有通过install的依赖都在该文件夹中
这3个不需要太多理解，在需要加依赖时通过npm install下载就行

项目文件

Mian.js 入口文件

1导入相关组件，并使用Vue.use()使用这些组件
2 配置vue拦截器Vue.http.interceptors.push  
在每次http的请求响应之后，如果设置了拦截器如下，会优先执行拦截器函数，获取响应体，然后才会决定是否把response返回给then进行接收
3项目基本配置
var app = new Vue({
    el: '#app',
    router,  //route.js路由配置
    Filters,   //filters.js    对数据的2次处理
    store,    //数据状态管理 vue的多标签页实现  页面缓存功能
    render: h => h(App),  // /创建一个vue对象，然后挂载到制定的页面节点
    mounted() {
    }
})

router.js
所有组件和页面对应的路径，用于页面跳转

import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/login'  //导入项目中所有组件
……
Vue.use(Router);
var router = new Router({
routes: [
{
            path: '/login',                     //路径
            name: 'Login',                    //对应的名称
            component: Login               //对应导入的组件
redirect: "/user/user/list",             //url重定向后路径
meta: "用户",       // 角色权限
children: [{}] //嵌套路由信息，注意路径会继承上发更高级路径
        },//为一个模块
]
});
//路由拦截
router.beforeEach((to, from, next) => {
});

Store.js
程序开发的状态管理模式, 它采用集中存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化
1、state
state为单一状态树，在state中需要定义我们所需要管理的数组、对象、字符串等等，只有在这里定义了，在vue.js的组件中才能获取你定义的这个对象的状态。
2、getter
getter有点类似vue.js的计算属性，当我们需要从store的state中派生出一些状态，那么我们就需要使用getter，getter会接收state作为第一个参数，而且getter的返回值会根据它的依赖被缓存起来，只有getter中的依赖值（state中的某个需要派生状态的值）发生改变的时候才会被重新计算。
3、mutation 状态的改变
更改store中state状态的唯一方法就是提交mutation，就很类似事件。每个mutation都有一个字符串类型的事件类型和一个回调函数，我们需要改变state的值就要在回调函数中改变。我们要执行这个回调函数，那么我们需要执行一个相应的调用方法：store.commit。
4、action
action可以提交mutation，在action中可以执行store.commit，而且action中可以有任何的异步操作。在页面中如果我们要用这个action，则需要执行store.dispatch
5、module
module其实只是解决了当state中很复杂臃肿的时候，module可以将store分割成模块，每个模块中拥有自己的state、mutation、action和gette

filters.js

对数据的2次处理
import Vue from 'vue'
import {formDate} from '@/Util.js'
Vue.filter('formDateFilter', function (value,formateStyle) {//处理时间
    if(!formateStyle){
        formateStyle="yyyy-MM-dd"
    }
    // 返回处理后的值
    if(value){
        return formDate(new Date(value),formateStyle);
    }
  })

Vue.filter('floatNumberFilter',function(value){//格式化小数位数
    var v=value;
    if(isNaN(value)){
        v=0;
    }
    v=parseFloat(v,10);
    return v.toFixed(2);
})

index.html

index.html---主页，项目入口
App.vue---根组件
main.js---入口文件
在网页的Title部分，加载了index.html中定义的Title，而在正文部分，加载了App.vue中定义的部分。（但是需要注意的是，在浏览器打开的瞬间，浏览器中正文部分会瞬间显示index.html中定义的正文部分）

访问顺序：1浏览器访问项目，最先访问的是index.html文件
          2之后我们的Vue根实例就会挂载到该挂载点上
         3 main.js作为项目的入口文件，在main.js中，新建了一个Vue实例，在Vue实例中，通过以下方法告诉该实例要挂载的地方；（即实例装载到index.html中的位置）
new Vue({
  el: '#app',
  //components: {App },
  //template: '<App/>'
})

Util.js
一些公用的方法

剩下的就是具体的Vue文件