Vue笔记【尚品汇项目】

尚品汇项目笔记目录

  • 1、vue文件目录分析
  • 2、项目的其他配置
    • 2.1项目运行起来的时候,让浏览器自动打开 --package.json
    • 2.2eslint校验功能关闭(根目录下创建vue.config.js)
    • 2.3src文件夹简写方法,配置别名
  • 3、组件页面样式
  • 4、清除默认的样式
  • 5、pages文件夹
    • 5.1创建router文件夹
    • 5.2路由组件与非路由组件的区别?
    • 5.3路由的跳转有两种形式
  • 6、路由相关面试题*
    • 6.1、路由传递参数(对象写法)path是否可以结合params参数一起使用?
    • 6.2、如何指定params参数可传可不传?
    • 6.3、params参数可以传递也可以不传递,但是如果传递是空串,如何解决?
    • 6.4、路由组件能不能传递props数据?
    • 6.5、编程式路由跳转到当前路由(参数不变),多次执行会抛出NavigationDuplicated的警告错误?
      • 6.5.1为什么编程式导航进行路由跳转的时候,就有这种警告错误呢?
      • 6.5.2通过给push方法传递相应的成功、失败的回调函数,可以捕获到当前错误,可以解决
      • 6.5.3通过底层的代码,可以实现解决错误
    • 6.6、call与apply区别?
  • 7、footer组件显示与隐藏
  • 8、路由传参
    • 8.1query传参
    • 8.2params传参
      • 8.2.1params传参问题
      • (1)如何指定params参数可传可不传
      • (2)传参方法
  • 9、定义全局组件
  • 10、vue项目热更新
  • 11、[封装axios](https://www.kancloud.cn/yunye/axios/234845)
  • 12、前端解决跨域问题-[webpack](https://webpack.docschina.org/configuration/dev-server/#devserverproxy)
  • 13、请求接口统一封装
  • 14、nprogress进度条插件
  • 15、引入vuex
  • 16、async await使用
  • 17、使用vuex
  • 18、loadsh插件防抖和节流
    • 18.1为什么需要防抖和节流
    • 18.2案例解析
  • 19、编程式导航+事件委派实现路由跳转
  • 20、Vue路由销毁问题
  • 21、mock插件的使用
  • 22、vuex数据存储与使用
  • 23、swiper插件实现轮播图
  • 24、props父子组件通信
  • 25、将轮播图模块提取为公共组件
  • 26、getters使用
    • 26.1为什么要使用getters?
  • 27、Object.asign实现对象拷贝
  • 28、利用路由信息变化实现动态搜索
  • 29、组件通信方式
  • 30、面包屑有哪些操作?
      • 30.1、删除分类属性(query)并修改路由信息
      • 30.2、删除搜索(params)、修改路由信息、删除输入框内容【兄弟组件通信】$bus
  • 31、SearchSelector子组件传参及面包屑操作
    • 31.1字符串拼接 ·${}·
    • 31.2数组去除[indexOf](https://www.w3school.com.cn/jsref/jsref_indexOf.asp)
  • 32、商品排序功能
    • 32.1引入iconfont图标
    • 32.2使用计算属性computed
  • 33、手写分页器
  • 34、滚动条
  • 35、商品详情之放大镜【事件总线$bus】
  • 36、失焦事件【blur与change】
  • 37、加入购物车
    • 37.1组件中的函数
    • 37.2store中的代码
    • 37.3localStorage和sessionStorage
  • 38、购物车组件开发
  • 39、购物车商品
    • 39.1、every和some【every:一假即假;some:一真即真】
    • 39.2、every使用
    • 39.3、修改商品数量【使用了节流】
    • 39.4、购物车状态修改和商品删除
  • 40、删除多个商品/修改商品全部状态(actions扩展)
    • 40.1删除全部勾选的产品
    • 40.2修改商品的全部状态
  • 41、注册登录业务
    • 41.1ES6 const新用法
    • 41.2用户注册模块
      • 1、获取验证码
      • 2、用户注册
      • 3、登录模块
      • 4、登录后获取用户信息
      • 5、token的使用
      • 6、退出登录
  • 42、[导航守卫](https://router.vuejs.org/zh/guide/advanced/navigation-guards.html)
  • 43、路由独享的守卫
  • 44、图片懒加载
  • 45、路由懒加载
  • 46、打包项目
  • 47、组件通信的6种方式
    • 1、props[适用于父子组件通信]
    • 2、自定义事件[子组件给父组件传递数据]`$on`与`$emit`
    • 3、全局事件总线`$bus`[万能]
    • 4、pubsub-js:在React框架中使用比较多。[发布与订阅]
    • 5、Vuex[万能]
    • 6、插槽[父子组件通信]
  • 48、组件通信注意事项
    • 1、事件注意事项
    • 2、v-model【组件通信方式之一】
    • 3、属性修饰符sync【组件通信方式之一】
    • 4、`$listeners`与`$attrs`【组件通信方式之一】
    • 5、`$children`与`$parent`【组件通信方式之一】
    • 6、混入[mixin](https://blog.csdn.net/HLH_2021/article/details/121036662)
    • 7、插槽

1、vue文件目录分析

node_modules: 文件夹:项目依赖文件夹

public文件夹: 一般防置一些静态资源(图片),需要注意的,放在public文件夹中的静态资源,webpack进行打包的时候,会原封不动的打包到dist文件夹中.

src文件夹(程序员源代码文件夹):

assets文件夹:一般也是防置静态资源(一般防置多个组件共用的静态资源),需要注意,防置assets文件夹里面静态资源,在webpack打包的时候,webpack会把静态资源当做一个模块,打包JS文件里面。
components文件夹: 一般放置的是非路由组件(全局组件) 	 	
APP.vue:唯一的根组件,Vue当中的组件(.vue) 
main.js:程序的入口文件 也是最先执行的文件

babel.config.js: 配置文件(babel相关)
package.json: 认为是项目的身份证,记录项目叫什么,项目当中有哪些依赖、项目怎么运行。
package-lock.json: 缓存性文件
README.md: 说明性文件

2、项目的其他配置

2.1项目运行起来的时候,让浏览器自动打开 --package.json

  "scripts": {
    "serve": "vue-cli-service serve --open",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },

2.2eslint校验功能关闭(根目录下创建vue.config.js)

不关闭会有各种规范,不按照规范就会报错

module.exports = {
  //关闭eslint
  lintOnSave: false
  }

2.3src文件夹简写方法,配置别名

jsconfig.json别名@提示【@代表的src文件夹,这样将来文件过多,找的时候方便很多】

{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "baseUrl": "./",
    "moduleResolution": "node",
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  }
}

3、组件页面样式

组件页面的样式使用的是less样式、浏览器不识别该样式,需要下载相关依赖
npm install --save less less-loader@5
如果想让组件识别less样式,则在组件中设置

你可能感兴趣的:(Vue,vue.js,javascript,webpack)