©2020-2024 ioDraw All rights reserved
node_modules文件夹：项目依赖文件夹
public
文件夹：一般放置一些静态资源（图片），需要注意，放在public文件夹中的静态资源，webpack进行打包的时候，会原封不动的打包到dist文件夹内
src文件夹(程序员源代码文件夹)：
assets
文件夹：一般也是放置静态资源（一般放置多个组件共用的静态资源），需要注意，放置在asserts文件夹里面的静态资源在webpack打包的时候，webpack会把静态资源当作一个模块，打包到js文件里面
components文件夹：一般放置的是非路由组件（全局组件）
App.vue：唯一的根组件
main.js：程序入口文件，也是整个程序当中最先执行的文件
babel.config.js:配置文件（babel相关）
package.json:认为是项目的身份证，项目叫什么，什么依赖，怎么运行
package-lock.json：缓存性文件
README.md:说明性的文件
项目的其他配置
"scripts": {
"serve": "vue-cli-service serve --open",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
启动项目后打开浏览器
配置代理
module.exports = {
// 关闭eslint校验工具
lintOnSave:false
}
配置src的简写方式，配置别名
路由分析
vue-router
前端所谓的路由：KV键值对。
key：URL（地址栏中的路径）
value：相应的路由组件
注意：项目上中下结构
路由组件：
Home首页路由组件、Search路由组件、login登录路由组件、Refister注册路由
非路由组件：
Header Footer（登陆、注册页面没有）
v-if和v-show区别：从性能角度出发，v-show更好，v-if是操纵dom元素
路由跳转方式（两种）：
1、声明式导航：router-link（务必要有to属性）
2、编程式导航：利用组件的实例$router.push|replace方法
推荐使用编程式导航，声明式能做的后者都能做到，而且可以写一些自己的业务
路由传参方式：
params参数：属于路径当中的一部分，需要注意，在配置路由的时候，需要占位
query参数：不属于路径当中的一部分，类似于ajax中的queryString /home?k=v&kv=,不需要占位
模块组件的拆分
1、先把静态页面完成
2、拆分出静态组件
3、获取服务器数据并显示
4、动态业务
多个模块出现的组件，可以把该组件注册成全局组件
经过postman测试，接口是没有问题的
注意：
1、如果服务器返回的数据code字段返回200，代表服务器返回数据成功
2、整个项目，接口的前缀都有/api
axios二次封装
XMLHttpRequest、fetch、JQ、aixos
为什么要进行axios的二次封装？
请求拦截器、响应拦截器：请求拦截器，在请求之前可以处理一些业务、相应拦截器，当服务器数据返回之后，可以处理一些事情
项目中常常有API,用来放axios
接口中都有：/api
baseURL：”/api“
接口统一管理
项目很小：完全可以在组建的生命周期函数里面发送请求
项目大：vuex
跨域问题
什么是跨域：协议、域名、端口号不同
解决问题：JSCNP CROS 配置代理
服务器和服务器之间是没有跨域问题的，浏览器和服务器才有
nprogress进度条的使用
vuex是官方提供的一个插件，状态管理库，集中式管理项目中组件共用的数据
项目大适用
三级联动用户可以点击：一级分类、二级分类、三级分类，当你点击时会从Home跳转到Search，点击信息会进行传递
路由跳转：
声明式
编程式
三级联动：如果使用声明式导航会出现卡顿，原因循环出很多的router-link组件，真实DOM渲染过度
注意：html允许自定义属性 以data-开头即为自定义属性
// 最好的解决方法式：编程式导航 + 事件委派：（其他兄弟组件不需要:1.如何确定点击的是a标签?2.路由跳转参数如何获取?）
// 第一个问题：把子节点当中的a标签，加上自定义属性data-categoryName,其余子节点没有该属性
合并参数
mockjs使用步骤
1、在src文件夹创建mock文件夹
2、创建假的数据 json后缀文件，格式化（防止存在空格）
3、把mock数据的图片放到public文件夹下（路径前缀/根目录）
4、开始mock虚拟数据，创建mockServe.js
5、把mockserve.js放到入口文件中引入
listcontainer组件开发：
安装Swiper插件：最新版本6，但是可能会出问题，所以安装五版本的swiper
组件通信方式：
props：用于父子通信
自定义事件：@on @emit 可以实现子给父通信
全局事件总线：$bus 全能
插槽
vuex
把首页中的轮播图封装成全局组件
search模块开发：
1、静态页面+静态页面组件拆分
2、发请求（API）
3、vuex
4、组件获取仓库数据，动态展示数据
getters 作用为简化数据
可以把我们将来在组件中的数据简化一下
模块化以后 当前形参state是当前仓库中的state，并非大仓库中的那个state
最后在说一句,很多情况下你是用不到getters的,请按需使用,不要用getters去管理state的所有派生状态,如果有多个子组件或者说子页面要用到,才考虑用getters.
合并对象es6新增语法
Object.assign
配置全局总线：
new Vue({
render: h => h(App),
beforeCreate(){
Vue.prototype.$bus = this;
},
// 注册路由,组件身上都具有$router,$route属性
router,
// 注册仓库,组件实例身上会多伊俄属性$store属性
store
}).$mount('#app')
// 通知兄弟组件删除关键字
this.$bus.$emit("clear");
mounted() {
// 通过全局事件总线清除关键字
this.$bus.$on("clear", () => {
this.keyword = "";
});
},
排序问题：
谁有类名？order属性包含1还是2
谁应该有箭头？谁有类名谁有箭头
分页？
数据量大。
手写分页（全局组件）
分页器的数据?
1.当前页数 pageNo
2.每一页需要展示多少数据 pageSize
3.一共多少页||数组总数 total
4.连续的页码的个数 (奇数对称) continues
开发某一产品的详情页面
1、静态组件（详情页的组件：还没有注册为路由组件）
点击商品图片时需要跳转到详情页，并且带上产品的id
滚动行为：scrollBehavior(to,from,savePosition){
return {y:0}
},
2、api接口
3、vuex 获取产品详情信息
dispatch只能传一个参数，多个参数用对象传
promise.all([p1,p2,p3])都是promise对象，如果一个失败则都失败，
若都成功，返回成功
css内用@需要在前面加一个~
vuex的数据不是持久化的
当用户注册完成之后，用户登录需要向服务器发送请求，登陆成功获取token，存储仓库中（非持久化）
刷新，获取不到用户信息，所以需要本地持久化存储token
问题:例如用户登录完不能回到登录页
导航守卫：当路由开始跳转时，判断是否跳转
全局守卫（前置、后置、解析）：
前置：跳转之前
后置：跳转之后
路由独享守卫：
array.find（）：返回的时符合条件的对象
生命周期函数尽量不要使用async 和 await
二维码生成qrcode
图片懒加载Vue-Lazyload