vueCli笔记

1.什么是Cli?什么是VueCli？
      Cli是Command-Line Interface,即命令行界面,俗称脚手架。
      Vue Cli是官方发布Vue.js项目的脚手架,通过它我们可以快速搭建Vue开发环境以及对应的webpack配置.
如果想要使用VueCli,就需要安装有NodeJs。因为VueCli依赖于NodeJs.

2.VueCli脚手架的安装
      安装新版本的VueCli脚手架
      npm install -g @vue/cli //安装脚手架3

      如果我们想要创建拉取就版本的Vuecli项目,我们可以通过命令安装旧版本
      npm install @vue/cli-init //安装旧版本脚手架2

3.初始化项目
      如果安装的为最新版本的VueCli脚手架,则项目初始化命令为
          vue create 项目名称

      如果安装的为旧版本的VueCli脚手架,则项目初始化命令为
          vue init webpack 项目名称

4.了解安装时选项runtime-compiler和runtime-only的区别
      使用runtime-compiler时,Vue运行为:
            (1)性能差,代码量大
            template -> ast -> render -> vdom ->UI

      使用runtime-only时,Vue运行为：
            (1)性能好,代码量少
            render ->vdom -<UI

5.Vue-cli3与Vue-cli2的区别
      1.Vue-cli3是基于webpack4打造,vue-cli2还是webpack3
      2.vue-cli3的设计原则是 "0配置" ,移除的配置文件根目录下的build和config等目录
      3.vue-cli3提供了vue ui命令,提供了可视化配置,更加人性化
      4.移除了static文件夹,新增了public文件夹,并且index.html移动到public中.

6.了解url的hash与html5的history
        进行网页请求,却不会刷新页面的方式
            (1)location.hash='请求的路径'
            (2)history.pushState(data,title,url);//每执行一次都会增加一条历史记录，浏览器在返回时，就不会返回前一个页面了，
                    data：要设置的history.state的值，可以是任意类型的值，可根据此值进行判断执行想要的操作。,此处可以填null。
                    title：现在大多数浏览器不支持或者忽略这个参数，最好用null代替。
                    url：地址栏的值，若不需要可用空来代替。

7.简单的vue-router路由配置使用
        1.若在创建vuecli脚手架时没有安装路由,则需要手动安装
              npm install vue-router --save
        2.在src文件夹中新建文件夹router,然后创建文件index.js,用于配置路由相关信息
              /* 配置路由相关信息 */
              //1.导入路由与vue
              import VueRouter from 'vue-router'
              import Vue from 'vue'

              //2.通过Vue.use()安装路由插件
              Vue.use(VueRouter)

              //3.创建router实例对象,并配置路由映射
              const routes=[
                //配置路由映射相关(这里看笔记8)
              ]
              const router=new VueRouter({
                    //挂载路由映射
                    routes,
                    //将网站显示模式有hash改为标准的history模式
                    mode:'history',
                    //设置路由处于活跃状态时默认的类名
                    linkActiveClass:'active'
              })

              //4.将router实例对象导出出入Vue实例对象
              export default router

              //5.将路由router挂载到Vue实例上
                    import Vue from 'vue'
                    import App from './App'
                    import router from './router'
                    Vue.config.productionTip = false

                    /* eslint-disable no-new */
                    new Vue({
                      el: '#app',
                      //挂载路由
                      router,
                      render: h => h(App)
                    })

8.简单的路由映射相关配置
        1.在src文件夹下的components文件夹创建路由组件(.vue文件)
        2.在路由配置文件中配置路由相关映射
              1.导入路由组件(.vue问价)
              import Home from 'home.vue文件所在路径'
              import Blog from 'blog.vue文件所在路径'
              ...
              2.配置路由映射相关,这里的routes最终会挂载到router实例对象上
                  const routes=[
                    //花括号中配置一个路由映射
                    {
                      //这里设置路由默认显示的组件路径
                      path:'',
                      redirect:'/home'
                    },
                    {
                      path:'/home',//配置需要跳转的页面
                      component:home
                    },
                    {
                      path:'/blog',
                      component:blog
                    },
                    ...
                  ]
              3.在App.vue文件中通过<router-link>标签和<router-view>标签进行页面链接配置
                  <router-link>标签最终会渲染为a标签,该标签的to属性规定将要跳转的页面路由
                       形如：<router-link to="/home">首页</router-link>
                  <router-view>标签用来渲染显示页面跳转后渲染的内容,所以在router-link标签后面,且只用写一个该标签即可

9.<router-link>标签的属性了解
      to：设置路由进行跳转到达的页面
          to="/home" //跳转到首页

      tag:设置最终将router-link标签渲染为什么类型的元素标签(默认为a标签)
            <router-link tag="button" to="/home">首页</router-link> //最终渲染为一个button标签
      
      replace:设置不会留下history记录(即不能通过点击左上角箭头达到后退与前进的功能)
            <router-link replace>首页</router-link>

10.如何通过代码进行路由组件跳转(即：不使用router-link标签进行路由跳转)
      我们可以通过监听点击事件,在执行方法中调用Vue自带的方法进行路由跳转
            this.$router.push('/home');//跳转到首页
            this.$router.replace('/home');//跳转到首页

10.5了解this.$route与this.$router的区别
      this.$route表示处于活跃状态的某个路由对象
      this.$router表示整个router实例对象,this.$router是this.$route的爸爸
    
11.动态路由的配置
      在某些情况下,一个页面的path路径可能是不确定的,比如我们进入界面时,希望是/xxx/yyy,即除了有前面的/xxx之外,后面还跟上了其他传递过来的内容,这种path和Component的匹配关系,我们称之为动态路由(路由传递数据的一种方式)
      动态路由设置方法:
          (1)在路由映射配置中,为需要接受传递数据的路径拼接变量名
              {
                path:'/profile/:自定义变量名', //profile为路由跳转地址
                component:Profile
              }
          (2)在使用router-link标签时,为to属性动态拼接数据(通过v-bind)
              传输动态数据,这里的自定义变量名可能表示的是data中的数据,也可能来自服务器中请求的数据
              :to=" '/profile/'+自定义变量名" //注意,这里的自定义变量名必须与步骤一的 自定义变量名 相同

          注意: this.$route即，那个组件处于活跃状态,this.$route就表示那个组件
          我们可以通过 this.$route.params.自定义变量名(必须与步骤一相同) 的方式拿到传输过来的数据,这样我们就可以处理传输过来的数据了

12.路由懒加载解析
      为什么需要设置懒加载:当打包构建应用时,javascript包会变得非常大,若我们一次性请求下来这个负载js文件的页面,将会花费很长时间,导致出现短暂空白.因此若我们能够把不同的路由对应的组件分割成不同的代码块,然后当路由被访问时才加载相应的组件,将会大大提升我们的效率.
      路由懒加载的作用:
          将路由对应的组件打包成一个个js代码块,只有当这个路由被访问到时,才加载相应的组件js文件
      路由懒加载的三种方式：
          (1)结合Vue的异步组件和webpack的代码分析
              const Home=resolve=>{require.ensure(['../components/Home.vue'],()=>{resolve(require('../components/Home.vue'))})}
          (2)AMD写法
              const About =resolve=>require(['../components/About.vue'],resolve)
          (3)运用es6语法(推荐使用这种方式,这样能够结构明了)
              const Home=()=>import('../components/Home.vue')
      路由懒加载的推荐写法:
          在配置路由映射时,直接在映射中加载路由组件
              {
                path:'/home',
                component:()=>import('../components/Home') //进行路由懒加载
              }

13.路由的嵌套使用(/xxx/yyy,即子路由)
      实现路由嵌套的两个步骤
          (1)创建对应的子组件,在路由映射中配置对应的子路由
              {
                //配置父路由
                path:'/home',
                component:Home,
                children:[
                  //配置子路由相关映射
                  path:'childPage',//子路由不需要添加'/'
                  component:childPage
                ]
              }

          (2)在父组件内部通过router-link标签加载子路由,router-link标签的to属性值为 '完整的父子路由路径'(to="/父路径/子路径"),然后通过router-view标签渲染内容

14.路由跳转时的参数传递
    (1)通过to属性进行路由跳转传参
        方式一:params类型
            (1)路由映射配置格式: path:'/xxx/:自定义变量名'
            (2)传递的方式： to="'/xxx/'+自定义变量名"  //注意,这里的自定义变量名必须与步骤一的 自定义变量名 相同
            (3)接收的参数值: this.$route.params.自定义变量名

        方式二:query类型
            (1)路由映射配置格式: path:'/xxx' //正常配置路由
            (2)传递的方式：  :to="{path:'/xxx',query:{...需要传递的内容}}"
            (3)接收的参数值:this.$route.query

    (2)通过事件执行方法传参
          params类型
              路由映射配置格式：path:'/xxx/:形参数变量'
              传递参数方式: this.$router.push('/xxx'+需要传递的内容)
              处理接收的参数： this.$router.params.形参数变量

          query类型
              路由映射配置格式:path:'/xxx'
              传递的方式: this.$router.push({
                              path:'/xxx',
                              query:{
                                ...需要传递的内容
                              }
                            })
              处理接收的参数：this.$route.query

14.5.Vue生命周期的回调函数
      created:function(){
        ...当组件创建后进行回调的函数
      }
      mounted:function(){
        ...当template挂载后进行回调的函数
      }
      updated:function(){
        ...当界面发生刷新后进行回调的函数
      }

15.全局导航守卫
      在路由映射配置时,添加属性meta
          {
            path:'/xxx',
            component:XXX,
            meta:{
              title:'首页', //设置网页的标题
            }
          }
      调用router的beforeEach方法
            //前置守卫
            router.beforeEach((to,from,next)=>{
              //路由从from跳转到to
              document.title=to.matched[0].meta.title, //动态修改网页标题
              next()
            })

16.router-view与keep-alive
      keep-alive是Vue内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染。
      router-view也是一个组件,如果直接被嵌套在keepalive里面,则所有路径匹配到的视图组件都会被缓存(即:浏览过的内容会被记录下来.直接渲染使用)。

17.keep-alive的两个重要属性
      include :字符串或正则表达式,只有匹配的组件会被缓存
      exclude:字符串或正则表达式,任何匹配的组件都不会被缓存。