Vue day6 案例

案例分布

1. webpack-vue (webpack中使用vue)
2. webpack-vue-router
3. webpack-路由嵌套 抽离路由

一、webpack-vue

重点

• webpack 中使用vue
  • 安装 vue 包
  • 导入组件
  • 安装 vue 打包插件
• render 渲染页面
• export default 和 export 向外暴露成员
  • 注意： export default 向外暴露的成员，可以使用任意的变量来接收
  • 注意： 在一个模块中，export default 只允许向外暴露1次
  • 注意： 在一个模块中，可以同时使用 export default 和 export 向外暴露成员
• import 接收成员

小案例(前往github)

webpack-vue

二、webpack-vue-router

重点

• 在webpack 中使用路由
  • 安装 vue-router
  • 手动安装vuerouter
  • 创建路由
  • 挂载路由
  • router-view 显示路由

    小案例(前往github)

    webpack-vue-router

三、webpack-路由嵌套 抽离路由

重点

• 嵌套路由
  • 定义子组件
  • 配置路由

    小案例(前往github)

    webpack-vue-路由嵌套