结合 webpack 使用 vue-router

ES6 中 export default 和 export 的使用方式

1. 使用 export default 和 export 导出模块中的成员; 对应 ES5（node）中的 module.exports 和 exports
2. 使用 import ** from ** 和 import '路径' 还有 import {a, b} from '模块标识' 导入其他模块
3. 使用箭头函数：(a, b)=> { return a-b; }

案例：

1.定义一个 test.js 文件

// 在 ES6 中，使用 export default 和 export 向外暴露成员：
var info = {
  name: 'zs',
  age: 20
}

export default info

/* export default {
  address: '北京'
} */

1. export default 向外暴露的成员，可以使用任意的变量来接收
2. 在一个模块中，export default 只允许向外暴露1次
3. 在一个模块中，可以同时使用 export default 和 export 向外暴露成员

export var title = '小星星'
export var content = '哈哈哈'

1. 使用 export 向外暴露的成员，只能使用 { } 的形式来接收，这种形式，叫做 【按需导出】
2. export 可以向外暴露多个成员， 同时，如果某些成员，我们在 import 的时候，不需要，则可以 不在 {} 中定义
3. 使用 export 导出的成员，必须严格按照 导出时候的名称，来使用 {} 按需接收；
4. 使用 export 导出的成员，如果 就想 换个 名称来接收，可以使用 as 来起别名；

2.在 main.js 文件中使用

import m222, { title as title123, content } from 'test.js'
console.log(m222)
console.log(title123 + ' --- ' + content)

结合 webpack 集成vue-router

main.js 文件

import Vue from 'vue'
// 导入 vue-router 包
import VueRouter from 'vue-router'
// 手动安装 VueRouter 
Vue.use(VueRouter)
// 导入 app 组件
import app from './App.vue'

// 导入 自定义路由模块(抽离理由为单独的模块)
import router from './router.js'

var vm = new Vue({
  el: '#app',
  render: c => c(app), 
  router // 将路由对象挂载到 vm 上
})

有关 render 函数的几点说明：

1. render 会把 el 指定的容器中，所有的内容都清空覆盖，所以 不要 把 路由的 router-view 和 router-link 直接写到 el 所控制的元素中，只能展示到属于路由的 中去
2. render 函数如果要渲染 组件， 渲染出来的组件，只能放到 el: ‘#app’ 所指定的 元素中

router.js 文件(抽离理由为单独的模块)

import VueRouter from 'vue-router'

// 导入 Account 组件
import account from './main/Account.vue'
import goodslist from './main/GoodsList.vue'

// 导入Account的两个子组件
import login from './subcom/login.vue'
import register from './subcom/register.vue'

// 3. 创建路由对象
var router = new VueRouter({
  routes: [
    // account  goodslist
    {
      path: '/account',
      component: account,
      children: [
        { path: 'login', component: login },
        { path: 'register', component: register }
      ]
    },
    { path: '/goodslist', component: goodslist }
  ]
})

// 把路由对象暴露出去
export default router

组件中的css作用域问题

1.普通的 style 标签只支持 普通的 样式，如果想要启用 scss 或 less ，需要为 style 元素，设置 lang 属性

2.只要 咱们的 style 标签， 是在 .vue 组件中定义的，那么，推荐都为 style 开启 scoped 属性

<style lang="scss" scoped>
body {
  div {
    font-style: italic;
  }
}
</style>