做vue项目前插件的安装

1.Vue DevTools的安装

devtools调试工具，一个基于浏览器的插件
在谷歌浏览器的扩展程序里面导入chrome.zip
注意：这个是vue2的插件，vue3不能使用

2.前端跨域

跨域是浏览器为了安全而做出的限制策略，所以前端才存在跨域
浏览器请求必须遵循同源策略：同域名、同端口、同协议

3.前端跨域的解决方案

CORS跨域：

    服务端设置，前端直接调用
    说明：后台允许前端某个站点进行访问 
    响应头里面会携带：
        Access-Control-Allow-Credentials:true  允许带cookie
        Access-Control-Allow-Origin:http://localhost:8080  指定访问地址

JSONP跨域：

    前端和后端都要修改
    安装jsonp插件:npm install jsonp --save
    jsonp语法：jsonp(url,{option},(err,res)=>{
        //返回结果
    })  //option可省略，注意返回结果第一个参数是err
    实际上是正常的访问一个接口，传入参数。不是一个请求，是一个js脚本

代理跨域：

    接口代理：访问/a接口代理到/b
    前端修改，后端不改
    通过配置vue.config.js实现代理
    因为前端才存在跨域，所以通过配置node.js代理就可以解决跨域，像爬虫一样，可以爬任何一个网站的信息
    代码：
        devServer:{
            host:'localhost',
            port:8080,
            proxy:{
                '/api':{
                    target:'目标地址',
                    changeOrigin:true,
                    pathRewrite:{
                        '/api':''
                    }
                }
            }
        }
    访问时：url = '目标地址/api/文件名'
    配置文件改完后要重启

4.目录结构的设置

图片资源，大的图片放在public里面，小的icon放在src的assets文件夹
App.vue 根组件，通常里面只放入<router-view></router-view>
src下的文件夹：
    api  接口文件夹
    util  公共机制，存放公共的方法 
    storage  数据存储
    store    vuex
    route    路由
    pages     页面
    components  组件
    assets    静态资源文件

5.常用插件的安装

axios    请求
vue-router  路由
vuex  状态管理
vue-lazyload  懒加载
element-ui   ui框架
node-sass@4.14.1    预处理器
sass-loader@8.0.2
swiper@^5.3.6   轮播
vue-awesome-swiper 
vue-cookie   保存cookie