vue-（2）Vue_Cli/router

03-Vue_Cli

1、什么是Vue CLI

CLI俗称脚手架。Vue CLI是一个官方发布 vue.js 项目脚手架，可以快速搭建Vue开发环境以及对应的webpack配置。

2、使用

2.1、安装淘淘镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org

npm全称：Node Package Manager

2.2、webpack

全局安装(-g 表示全局)

npm install webpack -g

安装Vue脚手架

安装的是CLI3的版本，想按照Vue CLI2的方式初始化项目时不行
npm install -g @vue/cli
#初始化项目
vue create my-project

如果想用2版本的，可以全局安装一个桥接工具。

npm install -g @vue/cli-init
#使用，初始化
vue init webpack my-project

安装后出现的选项（需要注意的几点）

1、创建的文件夹名称，也会作为项目名称，不能包含大写字母等。

2、ESLint检测代码规范，一般去掉。

2.3、目录结构

build：webpack相关配置

node_modules：依赖的node相关模块

src：写核心代码的地方

.babelrc：ES代码相关转化配置

.editorconfig：项目文本相关配置

.gitignore：Git仓库忽略的文件夹配置

.postcsssrc.js：CSS相关转化的配置

2.4、Runtime-Compiler和Runtime-only的区别

如果在之后的开发中，你依然使用template，就需要选择Runtime-Compiler

如果你之后的开发中，使用的是.vue文件夹开发，那么可以选择Runtime-only

2.5、render和template

Runtime-Compiler

new Vue({el:'#app',components:{App},template:''})

Runtime-only

new Vue({el:'#app'},render:h => h(App))

2.6、Vue程序运行过程

template模块经过ast(抽象树语法)处理后，给函数去处理，最终形成UI

2.7、render函数

render:(createElement) ==>{
return createElement('字符串'，[内容数组])
//函数使用
return createElement('字符串'，{class:'box'})
//嵌套render函数
return createElement(['数组1',createElement('h2,'[数组])])
}
//传入组件对象
return createElement(cpn)

2.8、npm run build

先入口文件（build/build.js）,config/index.js包含了一些配置信息，build/webpack.prod.conf经过build/utils计算资源的存放路径，生成cssLoaders用于加载.vue文件中的样式，styleLoaders用于加载不在.vue文件中的样式。

2.9、修改配置webpack.base.conf.js起别名

resolve:{
extensions:['.js']//省略的后缀名
alias:{
'@':resolve('src'),
'page':resolve('xxx')
}
}

3、Vue CLI3

与2版本的区别：3是基于webpack4打造，2是webpack3。3的设计原则是“0配置”，移除的配置文件根目录下的，build和config等目录。

vue-cli 3 提供了 vue ui 命令，提供了可视化配置，更加人性化。
移除了static文件夹，新增了public文件夹，并且index.html移动到public中。

3.1、项目创建

npm install -g @vue/cli
#初始化项目
vue create my-project

或者直接用视图创建：vue ui

3.2、目录结构

piblic：相对于CLI2中的static目录

src：源代码

.browserslistrc：游览器相关支持情况

.babel.config.js：ES语法转换

4、vue-router

4.1、路由

路由就是通过互联的网络把信息从源地址传输到目的地址的活动。路由表本质上就是一个映射表, 决定了数据包的指向。

前端路由的核心：改变URL，但是页面不进行整体的刷新。

4.2、路由的规则

4.2.1、URL-hash

URL的hash也就是锚点(#)
通过直接赋值location.hash来改变href, 但是页面不发生刷新
localhost.href
“Ip:8080/xxx”
localhost.hash=’/’

4.2.2、history-5种模式

pushState()

history.pushState（{’’,’/foo’}）

history.go()
history.back() 等价于 history.go(-1)
history.forward() 则等价于 history.go(1)

4.3、vue-router基础点

三大框架都有自己的路由

Angular的ngRouter
React的ReactRouter
Vue的vue-router

4.3.1、使用

第一步：安装vue-router

npm install vue-router --save

第二步：在模块化工程中使用(因为是一个插件, 所以可以通过Vue.use()来安装路由功能)

import Vue from 'vue' 
import VueRouter from 'vue-router' 
Vue.use(VueRouter) //注入插件
const routes=[]  //定义路由
//创建router实例
const router = new VueRouter({routes})
//导出router实例
export default router

然后可以在main.js中挂载vue实例

import router from './router'
然后在加入new Vue（{router}）

注释：

首页

: 该标签是一个vue-router中已经内置的组件, 它会被渲染成一个标签。
: 该标签会根据当前的路径, 动态渲染出不同的组件。
在路由切换时, 切换的是挂载的组件, 其他内容不会发生改变。

redirect是重定向

4.3.2、html5的History模式

即跳转页面不修改链接

//创建router实例
const router = new VueRouter({router,mode:'history'})

4.3.3、router-link补充

tag: tag可以指定之后渲染成什么组件, 比如上面的代码会被渲染成一个

• 元素, 而不是
  replace: replace不会留下history记录, 所以指定replace的情况下, 后退键返回不能返回到上一个页面中
  active-class: 当对应的路由匹配成功时, 会自动给当前元素设置一个router-link-active的class, 设置active-class可以修改默认的名称.

• 4.3.4、修改linkActiveClass

  作用是给router-link进行高亮设置，如果不想用默认的router-link-active类名，可以在router-link中写上active-class=“自定义的类名”，即可。

  4.3.5、路由代码跳转

  方法里面：this.$router.push('/index')
  

  动态路由

  {path：'/user/:id',component:User}
  //标签中引用
  {{$router.params.id}}
  

  4.3.6、路由懒加载

  在打包构建应用时，js包会变得非常大，影响页面加载。那么把不同的路由组件分割成不同的代码块，被访问的时候才加载对应的组件，这样就高效了。

  方式一：在ES6中, 我们可以有更加简单的写法来组织Vue异步组件和Webpack的代码分割.（推荐）

  const Home = () => import('../components/xx.vue')
  

  方式二:结合Vue的异步组件和Webpack的代码分析

  const Home = resolve => { require.ensure(['../components/Home.vue'], () => { resolve(require('../components/Home.vue')) })};
  

  方式三：AMD写法

  const About = resolve => require(['../components/About.vue'], resolve);
  

  4.3.7、路由嵌套

  实现嵌套路由有两个步骤:
  创建对应的子组件, 并且在路由映射中配置对应的子路由.
  在组件内部使用标签.

  children:[
  {path:'add',
  component:Add
  }
  ]
  

  4.3.8、传递参数

  主要有两种：params和query

  params： /router/:id 形成的路径 /router/123

  query：query的key作为传递方式 ；形成的路径 /router?id=123

  {path:'/xx'+123,      //params形式
  query:{id:'01',age:9}}	//query形式
  

  参数传递方式二：Js代码
  App.vue文件导出的时候，

  4.3.9、获取参数：$route

  获取参数通过$route对象获取的。因为路由对象会被注入到每个组件中，当路由切换时，路由对象会被更新。

  $route和$router是有区别

  $router为VueRouter实例，想要导航到不同URL，则使用$router.push方法
  $route为当前router跳转对象里面可以获取name、path、query、params等

  4.4、导航守卫

  SPA应用：单页面应用

  在一个SPA应用中, 如何改变网页的标题呢?

  普通的方法是在vue文件中，通过mounted声明周期函数, 执行对应的代码进行修改，但页面多了，就不好修改了。推荐方法是导航守卫。

  vue-router提供的导航守卫主要用来监听监听路由的进入和离开的。
  vue-router提供了beforeEach和afterEach的钩子函数, 它们会在路由即将改变前和改变后触发。

  我们可以利用beforeEach来完成标题的修改。

  to: 即将要进入的目标的路由对象。
  from: 当前导航即将要离开的路由对象。
  next: 调用该方法后, 才能进入下一个钩子。

  （路由文件中）
  router.beforeEach((to,from,next)=>{
  window.document.title=to.meta.title,
  next()
  }
  )
  

  如果是后置钩子, 也就是afterEach, 不需要主动调用next()函数。
  上面我们使用的导航守卫, 被称之为全局守卫。

  4.5、keep-alive

  keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。

  它们有两个非常重要的属性:
  include - 字符串或正则表达，只有匹配的组件会被缓存
  exclude - 字符串或正则表达式，任何匹配的组件都不会被缓存

  5、TabBar

  1.如果在下方有一个单独的TabBar组件，你如何封装
  自定义TabBar组件，在APP中使用
  让TabBar出于底部，并且设置相关的样式
  2.TabBar中显示的内容由外界决定
  定义插槽
  flex布局平分TabBar
  3.自定义TabBarItem，可以传入 图片和文字
  定义TabBarItem，并且定义两个插槽：图片、文字。
  给两个插槽外层包装div，用于设置样式。
  填充插槽，实现底部TabBar的效果
  4.传入 高亮图片
  定义另外一个插槽，插入active-icon的数据
  定义一个变量isActive，通过v-show来决定是否显示对应的icon
  5.TabBarItem绑定路由数据
  安装路由：npm install vue-router —save
  完成router/index.js的内容，以及创建对应的组件
  main.js中注册router
  APP中加入组件
  6.点击item跳转到对应路由，并且动态决定isActive
  监听item的点击，通过this.$router.replace()替换路由路径通过this.$route.path.indexOf(this.link) !== -1来判断是否是active
  7.动态计算active样式
  封装新的计算属性：this.isActive ? {‘color’: ‘red’} : {}