vue知识总结及思维导图

另外自己总结了一份很全面的vue, 思维导图只要5个积分，挣点积分，因为我有时也要用积分，大家不要介意O(∩_∩)O哈哈~vue思维导图下载

一、解构对象

const {comment, index, deleteComment} = this
const { status } = error.response
可以直接获取对象中指定key值的数据

二、vue 中prototype 原型挂载需要挂载到主函数main.js中

或者我们也可以将其挂在到vuex上通过$store来使用

注意事项挂载到vue上使用的话，需要依赖vue，如果在vue对象中使用，则直接使用 this.$request().then…
如果在js中使用，要么导入vue对象，要么导入封装对象

三、路由导航守卫

处理每个页面的title

四、可以使用 vue ui命令进行线上配置

五、全局样式

reset.css/border.css

mormalize.css/base.css

---

入口文件main.js：
require(’./assets/css/base.css’);
　　或：
import ‘./assets/css/base.css’;

---

调用css

@import ‘./assets/css/base.css’;

六、@和~ 区别

1. @ 使用说明

    @这是webpack设置的路径别名。

    在build/webpack.base.conf这个文件里面定义。       

    vue项目中默认定义了@（最常用）和vue$两个别名，如果需要，可以自己添加。



    默认定义：@这东西代表着到src这个文件夹的路径

2. ~ 使用说明

    ~ 是 stylus-loader 的东西，参考 https://github.com/shama/stylus-loader（但是好像不引入这个库，也可以用~）

    ~是相对于其他路径（文件）的，类似于相对路径

示例：

~@/assets/scss/_variables.scss ==>>表示相对于@（别名，一般是src目录）下的 assets/scss/_variables.scss；

七、公共样式常量定义和使用

/*:root -> 获取根元素html*/
:root {
  --color-text: #666;
  --color-high-text: #ff5777;
  --color-tint: #ff8198;
  --color-background: #fff;
  --font-size: 14px;
  --line-height: 1.5;
}

使用

---

a {
  color: var(--color-text);
  text-decoration: none;
}

##八、简单实现吸顶功能
通过css样式实现
position: sticky; //
top: 44px;