Vue脚手架及Vue路由

• •  脚手架

    • 基于node的环境

      • 创建复杂的vue项目的模板

    • 安装

      • nodejs安装
      • 脚手架全局安装
        npm i -g @vue/cli
      • 检测是否安装成功
        vue -V

    • 创建项目

      • 切换到根目录、项目所需要目录
        cd/
      • vue create myvue
        创建一个myvue项目

    • 运行项目

      • 运行项目
        • cd myvue
      • 切换到项目目录
        • npm run serve

    • 运行项目

      • cd myvue
        切换到项目目录
      • npm run serve
        运行项目

      • 

    • .vue文件

      • 1. vue组件
      • 2. 复习vue的语法
      • 3. 加载提示组件
    • 什么时候用props
      • 当数据不需要修改，且需要从父组件获取
     
    • 什么时候用data
      • 当数据需要修改的时候
      • 能用props解决就用props

  • Vue路由

  • • spa

      • singlePageApplication
        一个网站的所有页面都集成在一个html文件里面通过切换div模拟页面的切换

      • 优点

        • 
          资源公用
          前后端分离
          页面切换流畅

      • 缺点

        • 对SEO搜索引擎不友好

      • 原理：

      •    地址改变
           不刷新页面
           监听地址栏变化实现页面局部更新

      • Hash路由

        • 锚点变化不会刷新页面
        • window.onhsahchange

      • 历史记录路由

        • H5新增特性
        • history.onpopstate

    • 内置组件
      App.vue

      • router-link
        改变地址栏，改变hash值的
      • router-view
        存放页面
    • /router/index
      • 
        { path:"/", //配置的地址
        component:HomeView //配置的页面组件
        }

  • 路由配置

    • 普通

      • 

    • 传参

      • 

    • 子路由

      • 

    • 404

      • 

    • 路由别名
      • 
        {
        path:"/",
        alias:["/index","/main"]
        }

  • $route
    当前路由信息

    • name 名称
    • params 路由参数
    • path 路径
    • fullPath 全路径
    • query 查询参数
    • hash 哈希
    • meta 原信息

  • 路由组件

    • router-link 切换路由
      • to 属性 改变地址栏
        • to="/user"
        • :to="'/user'"
        • :to="{name:'user',params:{},query:{}}"
        • :to="{path:''/produce/123'}"
    • router-view 存放路由
  • router-link to 跳转

  • 编程跳转 $router

    • .push('/')跳转并添加一个历史记录
    • .replace('/')跳转替换（不保留当前历史记录）
    • .back()返回 .go(-1)
    • .forward()前进 .go(1)