这里的scoped表示下方样式仅仅当前组件有效，否则全局有效，通过@import我们可以导入外来样式文件（这里公共资源我们一般定义在src的assets文件夹下，不用写在static文件夹下，因为assets被打包时会自动打包，为了统一还是放在assets下面）

2）、组件间的数据交换

首先是父子组件间的数据交换：

父组件好比我们这里的App.vue组件，子组件就好比我们import进来的那些组件，vue.js提供了我们很便捷的方式进行跨组件间的通信，对于父子组件那便是：子组件dispatch事件到父组件，父组件broadcast事件到下面的所有子组件，默认事件传输为冒泡传输。什么意思呢，就是说在App.vue里面我们可以直接通过dispatch方法向上派发事件，前提是父组件需要在methods或者events那里配置好改事件（只有配置了该事件才能接收到，推荐写在events里面），当然派发时可以传递一些数据，同理父组件也是通过broadcast广播事件到子组件。二是我们可以通过props属性进行，子组件在script标签中写明需要prop的哪些属性，父组件在调用子组件的地方直接写上该prop（如果添加v-bind:prop则为动态prop），那么该数据便直接从父组件传递到了子组件中三是我们可以通过全局的$emit进行事件通信，这个可以参考官网文档。

其次是任意无关系的组件如何通信：

这个时候需要使用中间组件进行数据传输，相当于搭建起一个中央数据总线，比如A组件需要和C组件进行通信，那么我们可以在定义一个空的组件为B，那么在A组件中导入B组件，同时向B组件派发事件，同时在C组件中导入B组件，并在此进行事件接收即可。当然了解vuex的话，使用vuex可以轻松解决任意组件间的通信问题，这个后面说。

3）、vue.js实例属性

一个是$.parent和$.children，这两个一个是获取当前组件的父实例，一个是获取当前组件的所有子组件，获取到组件后便可以方便访问实例的方法、数据资源等了。$.refs是在父组件调用子组件的地方，为了区分各个子组件，可以为组件指定不同的ref属性，然后在通过this.$refs.xxx获得该子组件实例，然后可以进行各种实例操作。

4、运行效果

刚刚说了那么多，我们的项目差不多搭起来了，通过命令行：npm run dev，然后直接在浏览器中可以查看效果：

默认启动的是8080端口，访问下：

到这里，一切都ok了，简单的vue.js脚手架项目就搭建完毕了。

二、vue-router

看到router，顾名思义“路由”的意思，vue-router赋予SPA应用前端路由的权利，从而实现自定义页面跳转而不请求服务端，主要记录如下：

1、配置vue-router

在前面的脚手架项目里面我们已经生成了自带vue-router的脚手架项目，下面主要是对其进行一些修改说明：

import Vue from 'vue' import Router from 'vue-router' // import store from '../vuex' // import App from '../App.vue' // import _ from 'lodash' Vue.use(Router) export const router = new Router({ mode: 'history', routes: [ // 组件懒加载，这样可防止组件太多时首屏打开慢的问题 { path: '/user', component: resolve => require(['../components/user/User.vue'], resolve) }, { path: '*', component: null } ] }) router.beforeEach((to, from, next) => { // to and from are Route Object,next() must be called to resolve the hook // if (!store.getters.logined) { // } else { // next() // } next() })

router必须使用vue.use进行全局注册方可使用，mode参数用来配置router的模式，默认为带“#”的hash模式，当然配置为history则使用H5的history模式，路由更像是普通url。routes用来配置各种具体路由信息，这里routes是一个对象数组，每一个对象都是一个路由对象，其中包括path（路由路径，支持正则匹配）、component（该路由对应的组件实例），注意的是一般我们会对路由组件做懒加载处理，以便加快首屏渲染速度。

2、在组件中配置使用

router-view是用来做路由视图的显示的，第一步配置了每个路由对应的路由，那么一旦某个页面使用router-view进行视图显示的话，恰好该路由匹配了上面path，那么path对应的组件将会展示在router-view的位置，相当于路由组件的填位吧。当然一个页面或组件可以配置多个router-view，那么相应的就需要引入多个组件实例了。

router-link是一个路由跳转标签，可以理解为我们html中的a标签，router-link标签内部包含属性to，同样可以路由配置。

关于路由方法：

router.push()、router.replace()：路由跳转

router.back()：路由回退

router.forward()：forward跳转

其它参考官网说明，应用较多的是beforeEach方法，所有路由调用之前均执行该方法，这里我们一般可以做一些权限判断、登录判断之类的操作：

三、vuex状态管理

vuex主要用来进行全局状态管理，可以理解为全局的数据管理，vuex主要由几部分组成：action、mutation、getters、state组成，一般的使用流程是：组件中可以直接调用上面四个部分，比如调用action，可以使用：this.$store.actionName，mutation也是一样，不同的是action支持异步调用，mutation下的操作完全同步，也就是说，action下可以调用各种api调用（api方法一般都是异步的，返回promise对象）。组件访问getters：this.$store.getters.gettersName，组件中调用state：this.$store.moduleName.stateName（模块化配置vuex时这样访问）。action一般commit事件到mutation，然后再在mutation中操作state中的数据，最后通过getters暴露state中的数据给组件使用，如果不涉及到异步操作的话，可以直接在组件中dispatch到相应的mutation而跳过action直接操作state。

1、配置vuex

首先是module下的user模块内容：