11-vue_day08

day08内容

17. npm项目

  test
    node_modules  用于存放第三方依赖
    public
    src
    package.json
      name:           项目基础信息
      version:
      scripts:{xxx}   项目的脚本-webpack 
        npm run xxx
      dependencies:{} 产品依赖，在打包的时候会和我们写的src一起打包在一个文件中
      devDependencies:{}  开发依赖，仅在开发的时候会用到

  拷贝项目的时候用不用拷贝node_modules??
    node_modules中文件很多，压缩很慢，很难发送，并且一般没必要发送。所有的依赖信息都是维护在package.json，我们让npm根据package.json重新下载一份即可。

  
 1) 对于gitee中老师发布的仓库的处理方案
  1. 克隆下来
    > git clone https://gitee.com/pluslicy/web2001_cms_vuecli.git
  2. 通过vscode打开
    打开终端(有些windows10电脑无法在vscode终端操作npm命令，这时候百度查询解决!)
  3. 安装依赖
    > cd web2001_cms_vuecli
    > cnpm install
  4. 启动
    > npm run serve
2) 项目开发结束后，将项目打包并且部署到云服务器中
  1. 修改配置文件
    在项目根目录中添加vue.config.js文件
    module.exports = { publicPath: './' }
  2. 执行打包命令【在当前目录】
    > npm run build
  3. 本地测试
    将dist/index.html在本地浏览器中直接打开，如果测试没问题
  4. 上传到阿里云服务器中
  5. 将dist修改文件名放到apache部署目录下即可
  6. 测试
    http://ip/文件名

18. 路由基础

  企业级开发中，vue技术栈
    vue（核心） + vueRouter（页面跳转）+ vuex（状态维护）+ 组件库（移动端【vant,mintui】、web端【elementui,antdesign】） + axios/jquery（ajax框架）

    动态组件（根据组件名来加载不同的组件）
    Category -> 组件1
    Article  -> 组件2
    
    路由（根据路由地址加载不同的组件）
    页面 - 组件
    /category -> 组件1
    /article  -> 组件2
  1) 安装
    1. script 
      不适合企业级开发，但是适用于学习研究
      <script src="vue.min.js">
      <script src="vue-router.min.js">

    2. npm
      > npm install vueRouter --save
      配置
    
    3. vue/cli插件安装
      > vue add router
  2) 简单应用
    1. 声明组件
      let Article = {}
      let Category = {}
    2. 实例化路由对象
      let router = new VueRouter({
        routes:[{
          path:'/article',
          component:Article
        },{
          path:'/category',
          component:Category
        }]
      })
    3. 在vue实例对象中配置路由
      new Vue({
        el:'#app',
        router
      })
    4. 设置路由页面容器
      <router-view />
    5. 测试
      http://ip:port/index.html#/article
      http://ip:port/index.html#/category
    6. 路由跳转按钮
      <router-link to='/article'>文章</router-link>
  3) 动态路由匹配
    let router = new VueRouter({
      routes:[{
        path:'/article/:id',
        component:Article
      },{
        path:'/category',
        component:Category
      }]
    })

    路由  
      /artcile/1
      /artcile/2      -> Article
      /artcile/3
      都可以匹配 /article/:id，并且将1/2/3赋值给id
      在Article实例中如何获取id? this.$route.params.id
  4) 响应路由参数的变化
    由于多个路由对应同一个组件，为了高效，组件不会在每次切换路由的时候都进行销毁重建，而是复用。
    复用组件时，想对路由参数的变化作出响应的话，你可以使用如下方式
      1. 简单地 watch (监测变化) $route 对象：
      2. 使用路由守卫
        beforeRouteUpdate
  5) 匹配所有页面 应用在404
    let router = new VueRouter({
      routes:[{
        path:'/category',
        component:Category
      },
      ...
      {
        path:'*',
        component:Default
      }]
    })
  6) 编程式导航
    this.$router.push()     向路由栈中压入新的地址
    this.$router.replace()  在路由栈顶替换一个新地址
    this.$router.go(-1)     操作路由栈
  7) 命名路由
    routes:[{
        name:'category'
        path:'/category',
        component:Category
      },
    编程式导航参数传递

    this.$router.push('category')
    this.$router.push('/category')
    // 参数是以查询字符串的形式暴露在地址栏中
    this.$router.push({
      path:'/category',
      query:{id}
    })
    // 在地址栏中不显示传递参数，更加安全，路由复用的时候比较麻烦
    this.$router.push({
      name:'category',
      params:{id}
    })
  8) 命名视图
    有时候想同时 (同级) 展示多个视图，而不是嵌套展示，例如创建一个布局，有 sidebar (侧导航) 和 main (主内容) 两个视图，这个时候命名视图就派上用场了。

    <router-view class="view two" name="a"></router-view>
    <router-view class="view three" name="b"></router-view>

    routes: [
      {
        path: '/',
        components: {
          a: Bar,
          b: Baz
        }
      }
    ]
  9) 重定向跳转
    routes:[{
      path:'/',
      redirect:{
        name:'category'
      }
    },{
      name:'category',
      path:'/category',
      component:Category
    }]

    当访问路由/ 会自动跳转到/category中
  10) 别名
    routes: [
      { path: '/a', component: A, alias: '/b' }
    ]
    使用路由/a 或者 /b 都可以访问到组件A
  11) 路由模式
    1. hash模式 默认模式
      http://ip:port/index.html#/category
      http://ip:port/index.html#/article
    2. history  [脚手架中应用!]
      http://ip:port/index.html/category
      http://ip:port/index.html/article

19. 路由进阶

  1) 嵌套路由
    routes:[{
      path:'/order',
      component:Order,
      children:[{
        path:'all',
        component:Order_All
      },{
        path:'completed',
        component:Order_Completed
      },{
        path:'un_completed',
        component:Order_Un_Completed
      }]
    },{
      path:'/goods',
      component:Goods
    }]
  2) 导航守卫
    1. 组件内守卫 【声明在组件实例对象中】
      beforeRouteEnter
      beforeRouteUpdate
      beforeRouteLeave
      当进入该组件的时候，如果进入之前路由发生改变，该守卫就会被激发
      /article/1  - Article
      /article/2  - Article   由于路由发生变换，所有会激发该守卫
    2. 全局守卫【绑定在router对象上】
      router.beforeEach()
      router.afterEach()
    3. 组件独享守卫【定义在route对象上】
      routes:[{
        path:'',
        component:,
        beforeEnter:()=>{

        }
      }]
  3) vue/cli中融合vuerouter机制
    使用vue/cli创建项目，集成vue以及vueRouter
    1. 使用vue/cli直接创建基于vue + vueRouter项目
      1) 使用vue/cli初始化基于vue + vueRouter的项目
        > vue create app04
          手动安装特性
          babel
          Router
        创建完成后，项目中依赖了vue vueRotuer

      2) 安装jquery【ajax】，在public/index.html通过script引入jquery即可

      3) 安装elementui【通过插件形式进行安装】
        > vue add element
        全部导入
        可以修改element样式文件
      
      到此为止，项目架构就完成，vue + vueRouter + elementui + jquery
      

    2. 已经使用vue/cli创建好了基于vue的项目，后来集成vueRouter