vue2项目复习
一、vue-cli脚手架初始化
方法:(在有网络的情况下)文件路径打开cmd 输入vue create app
前提环境:node、webpack、淘宝镜像(下载依赖会快很多)
二、下载完成后app目录分析
1.node_modules文件夹:项目依赖
eg : @babel 可以把ES6转化(翻译)为ES5,这样兼容性更好
2.public文件夹:
注意:放置一些静态资源(图片等),这里的静态资源在webpack进行打爆的时候,会原封不动打包到dist文件夹中
eg : index.html静态页面 favicon.ico图标
3.src文件夹(程序员源代码文件夹):
(1）assets:一般放置(多个组件共用)静态资源,在webpack打包时,webpack会把它当作一个模块,打包到js文件里
(2）components:放置非路由组件(全局组件)
(3）App.vue:唯一的根组件
(4) main.js:程序入口文件,也是整个程序当中最先执行的文件
(5) gitignore
(6) babel.config.js:配置文件(babel相关)
(7) package-lock.json:缓存性文件,曾经下载依赖的一些信息,地址等会缓存到这里(该文件可以删除)
(8) package.json:可以看作项目的身份证,里面记录了项目的各种信息:包含了哪些依赖,项目怎么运行
(9) README.md:项目说明
三、项目其他配置
让项目运行完毕后在浏览器自动打开
找到package.json文件--> "serve": "vue-cli-service serve --open"
"scripts": {
<!-- "serve": "vue-cli-service serve --open --host localhost --port 8080" -->
"serve": "vue-cli-service serve --open",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
}
eslint校验功能关闭
在vue.config.js文件中添加
module.exports = {
// 关闭eslint
lintOnSave: false
}
src文件夹简写方法,配置别名。 @
在jsconfig.配置别名@提示[@代表的是src文件夹,将来文件很多的时候,方便寻找]
｛
"compilerOptions": {
"baseUrl": "./",
"paths": {"@/*": ["src/*"]
},
"exclude": ["node_modules","dist"]
}
｝
四、项目路由分析 vue-router
前端路由:KV键值对
key:URL(地址栏路径)
value:相应的路由组件
路由组件和非路由组件
头部header部分 和 底部footer部分 是 非路由组件
中间center部分属于路由组件
components文件夹,用来放置非路由组件(这里放置Header、Footer组件)
pages/views文件夹,用来放置路由组件(Home,Search,Login,Register)
组件要求:
Footer组件:在Home、Search组件显示。但在Login、Register组件隐藏
实现方式1:v-if v-show (可以实现,但不是最终方案)
实现方式2:可以在路由上设置meta属性,根据组件身上的$route获取当前路由信息,通过路由路径判断Footer显示与隐藏
注意 配置路由时,可以给路由添加元信息meta,路由需要配置对象,只能写成meta:{...}的形式.不能自己起名,比如kangf:{...}
开发步骤
1.书写静态页面
2.拆分组件
3.获取服务器的数据动态展示
4.完成相应的动态业务逻辑
五、安装less依赖
npm i --save less less-loader
六、安装vuex 和 vue-router依赖注意事项
vue2 中只能使用vuex的3版本 和 vue-router@3版本
npm i vuex@3
npm i vue-router@3
七、路由的跳转
两种形式
1.声明式导航(默认push):
2.编程式导航(replace/push):this.$router.replace('/home') 功能更强大
路由传参
params参数:属于路径当中的一部分,需要注意,在配置路由的时候需要占位
query参数:不属于路径当中的一部分,类似ajax中的queryString,不需要占位 eg:/home?k=''&v=''
八、Home模块组件拆分
--1.完成静态页面
--2.拆分出静态组件
--3.获取服务器的数据进行展示
--4.动态业务
完成三级联动组件
---由于三级联动在Home、Search、Detail都有使用,所以把三级联动注册为全局组件.
这样只需注册一次,就可以多次使用
九、POSTMAN测试接口工具
--使用postman工具测试，接口是否可用
--如果服务器返回的数据code字段200，则表示成功
--整个项目，接口前缀都有/api字样
http://gmall-h5-api.atguigu.cn/api/product/getBaseCategoryList
十、axios二次封装
向服务器发送请求: 1.XMLHttpRequest、fetch、JQuery、axios
为什么需要进行二次封装axios??
请求拦截器:可以在发送请求之前处理一些业务
响应拦截器:当服务器返回后,可以处理一些事情
接口当中，路径都带有 /api
baseURL:"/api"
基础不好可以去官方看git|NPM关于axios文档
十一、接口统一管理
项目很小:完全可以在组件的生命周期函数中发送请求
项目很大:axios.get(xxx')
跨域问题
什么是跨域:协议、域名、端口号不同请求,称之为跨域
前端项目本地服务器:http://localhost:8080/
后台服务器:
解决方法:JSONP、CROS、数据代理proxy
devServer代理方法vue.js官网里有详细方法，点我跳转
devServer: {
// proxy代理服务,紧跟端口号后的字符串
proxy: {
// 请求前缀
'/api': {
target: 'http://gmall-h5-api.atguigu.cn',
// 修改target地址接收路径,前面request.js中已经配置了baseURL: "/api",所以下面这步可以省略
// pathRewrite: { '^/api': '' },
// 下面两项默认为true
// ws: true,//用于支持websocket
// changeOrigin: true
},
}
}
十二、nprogress进度条的使用
安装
npm i nprogress
引入
import nprogress from 'nprogress'//引入插件
import 'nprogress/nprogress.css'//引入样式
npropress.start()进度条开始
nprogress.done()进度条结束
十三、完成一级背景颜色
方法一:通过样式 :hover
方法二:通过JS(不推荐) :class="{ cur: currentIndex == index }"
可以用 :style="display:{currentIndex==index?"block","none"}" 实现隐藏是显示
十四、卡顿现象
卡顿:用户操作行为过快,导致浏览器解析不过来,就会出现部分事件没有触发,这就是卡顿现象.
解决方法:防抖与节流(机制:闭包+延时器)
防抖:前面的所有的触发都被取消，最后一次执行在规定的时间之后才会触发，也就是说如果连续快速的触发只会执行一次
lodash详解地址
lodash防抖语法 _.debounce(func, [wait=0], [options=])
节流:在规定的间隔时间范围内不会重复触发回调，只有大于这个时间间隔才会触发回调，把频繁触发变为少量触发
lodash节流语法 _.throttle(func, [wait=0], [options=])
lodash引入方法:
//把lodash全部功能函数引入,不推荐
// import _ from "lodash";
// 按需引入,这里只引入throttle函数,默认暴露throttle不用加{}
import throttle from "lodash/throttle";
