VUE中安装插件

今天我们来学习在VUE中安装插件的相关内容。
1.命令行

1.切换到项目目录
2.npm install 插件名 （运行环境）
3.npm install --save -dev 插件名 （开发环境）

2.界面化方式

vue ui

3.打包

1.vue ui 任务 build
2.切换到项目目录 npm run build

4.Cookie

• 特点

1.可以通过js操作
2.可以通过服务端操作 （php java python）
3.存储在浏览器里面
4.一个域名 最多存2M
5.会过期 默认关闭浏览器就过期/可以设置过期时间
6.用户可以在浏览器查看，手动删除（不安全）
7.cookie有域名限制，自己的js只等读自己域名的cookie
8.每一次向服务器请求内容 都会带上cookie

• 作用

能够存储用户信息 登录信息/痕迹

5.用户的登录过程
5.1 能够存储用户信息 提交给服务器
5.2 服务验证，如果验证成功

1.服务端生成session 标识这个用户是登录状态
2.通过结合session 加密 生成一段cookie 存储在浏览器端

5.3 当需要进入有权限的页面（user页面）

1.向服务器发送请求要页面
2.请求会带上cookie
3.验证cookie 通过解密后和session 做对比 对比成功，给用户user界面/对比不成功 给用户一个登录页面

5.4 cookie有过期时间

1.如果cookie过期了（自动删除）
2.当向服务请求页面时候没有这个cookie
3.当你向后端请求页面
4.后端会认为你没有登录成功

6.浏览器的同源策略
6.1当用户发起xhr（ajax）请求的时候 默认浏览器只能给自己域名的地址发送ajax请求
6.2默认cookie是同源策略
6.3同源

http://www.baidu.com/a.html
http://www.baidu.com/b.html

6.4不同源

1.协议不同
http://www.baidu.com/a.html
https://www.baidu.com/a.html
2.域名不同
http://www.baidu.com/a.html
http://www.jd.com/a.html
3.子域名不同
http://www.baidu.com/a.html
http://pan.baidu.com/a.html
http://m.baidu.com/a.html
4.端口不同
http://localhost:8080
http://localhost:8000

7.如果绕过同源，跨域
7.1.jsonp

script src能不能引用 别的网址的js
原理是：script src是没有同源策略限制
__jq2(data数据)

function __jq2(data){
console.log(data)
}

7.2header头信息跨域 cros

1.后端允许跨域加了条头信息
https://biger.applinzi.com/duan/jok.php
http://localhost:8080
Access-Control-Allow-Origin:*
允许接触控制的域名是*（所有域名都可以）
可以跨域访问的网址是 * 代表所有

<?php 
header("Access-Control-Allow-Origin:*");
?php>

8.组件间非父子关系如果传递参数

在哪个页面里面，我们要知道现在是否登录成功
router.js 页面要知道用户是登录状态
在 login登录成功后要改变用户的登录状态为 成功
在刷新页面也要保持用户的登录状态 cookie/localStorage

9.路由导航守卫-全局守卫

当用户进入 user界面前判断用户是否登录
如果没有登录进入 login页面
login页面登录成功，跳转到之前的页面（user）

好了，今天的分享就到这里了！
愿你三冬暖，愿你春不寒；愿你天黑有灯，下雨有伞。

小晴天