vue-总结07-高级-全家桶-router-基础-引入组件库-过滤器

SPA （ single page App ） 单页面应用

1. 多页面应用 有多个html文件，通过a标签的连接联通各个页面
2. 缺点
   -开发起来太冗余，编译、压缩很耗时间
   -页面之间的跳转速度太慢，这个时候就会出现一个严重的问题，白屏
3. 单页面应用
   -不需要刷新页面，因为它就是一个页面
   -这个页面内容在切换
   -单页面内容之间的切换要想实现我们就是用路由了
   -如今我们的app、后台管理系统 主要的开发形式就是spa

vue路由模式

1.hash

	-应用于浏览器
	-传统的路由模式，兼容性好

2.history

	-H5 新型的路由模式，性能更好，但是需要后端支持

3.abstrict

	-应用于服务端【后台】

路由基础

1.安装

• yarn add vue-router

2.创建路由的配置文件夹

• 可能名字会不一样
• routers
• router
• router
• router.config.js

3.在文件夹里创建一个 index.js文件，此文件是路由的配置文件，需要创建路由模块
3.1路由模块中的路由表可以分离出去

4.在根实例中注入路由模块
5.在路由展示区使用 router-view组件（标签）来接收 routes配置中的component选项
6.我们可以使用 router-link 组件（标签），进行页面跳转

• router-link 加to属性，to属性的属性值为 routes配置中的path选项
• router-link组件会被默认的解析为a标签
• router-link组件加 tag 属性可以被解析为任何标签 tag=‘div’
• router-link组件加active-class=‘active’属性可以实现路由激活
• router-link组件加 keep-alive可以实现路由组件的动态缓存

路由高级

1.引入组件库

-组件库可以帮助我们实现样式布局和基本逻辑
-组件库 vs UI库
	-组件库指的是有组件构成的类库
	-ui更多偏向的是样式：sui
	-类型
		说明：Vue的组件库很多，我这边列举的是比较流行的
		◆ pc端【后台管理系统】
			● element-ui 饿了吗前端开发团队完成
			● iview 
		◆ 移动端
			Mint-ui
			● Vant
	-组件库的安装
		-安装方式
			◆ 全局引入，将组件库所有组件都引入项目，这样会增大项目体积（vant举例）
				1. 安装： yarn add vant / npm i vant -S 
				2. 在mian.js引入：import Vant from 'vant'
				3. 在main.js中使用Vue.use注册插件    Vue.use（Vant）
			◆ 按需引入，只将我们需要的组件引入进来
				1.安装： yarn add vant / npm i vant -S
				2.	安装自动按需引入插件：yarn add babel-plugin-import / npm i babel-plugin-iport
				3.	在项目配置文件中插入代码3-1，项目配置文件改过后必须重启项目
				4.	在man.js中注册你要使用的组件

插入代码3-1
// 在.babelrc 中添加配置
// 注意：webpack 1 无需设置 libraryDirectory
{
  "plugins": [
    ["import", {
      "libraryName": "vant",
      "libraryDirectory": "es",
      "style": true
    }]
  ]
}

// 对于使用 babel7 的用户，可以在 babel.config.js 中配置
使用这个
module.exports = {
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
};
// 接着你可以在代码中直接引入 Vant 组件
// 插件会自动将代码转化为方式二中的按需引入形式
import { Button } from 'vant';

过滤器