尚品汇项目笔记

尚品汇项目笔记

  • 前端Vue核心
  • 1、vue文件目录分析
  • 2、项目配置
  • 3、组件页面样式
  • 4、清除vue页面默认的样式
  • 5、pages文件夹
  • 6、footer组件显示与隐藏
  • 7、路由传参
  • 8、多次执行相同的push问题
  • 9、定义全局组件
  • 10、代码改变时实现页面自动刷新
  • 11、Home首页其它组件
  • 12、封装axios
  • 13、前端通过代理解决跨域问题
  • 14、请求接口统一封装
  • 15、nprogress进度条插件
  • 16、手动引入vuex
  • 17、async await使用
  • 18、vuex(*****)
  • 19、loadsh插件防抖和节流
  • 20、编程式导航+事件委托实现路由跳转
  • 21、Vue路由销毁问题
  • 22、mock插件使用
  • 23、vuex数据存储与使用
  • 24、swiper插件实现轮播图
  • 25、props父子组件通信
  • 26、将轮播图模块提取为公共组件
  • 27、getters使用
  • 28、Object.asign实现对象拷贝
  • 29、对象深拷贝
  • 30、利用路由信息变化实现动态搜索
  • 31、面包屑相关操作
  • 32、组件通信方式
  • 33、SearchSelector子组件传参及面包屑操作
  • 34、商品排序
  • 35、手写分页器
  • 36、字符串拼接
  • 37、滚动条
  • 38、undefined细节(*****)
  • 39、商品详情
  • 40、失焦事件
  • 41、加入购物车成功路由
  • 42、购物车组件开发
  • 43、购物车商品数量修改及个人疑问
  • 44、购物车状态修改和商品删除
  • 45、删除多个商品(actions扩展)
  • 46、注册登录业务(ES6 const新用法)
  • 47、导航守卫
  • 48、交易模块
    • Vue图片引入
  • 49、个人中心
  • 50、路由独享的守卫(*****)
  • 51、图片懒加载
    • vue使用插件的原理
  • 52、表单验证
  • 53、路由懒加载
  • 54、打包项目
  • 55、Vue新知识点(只针对个人)
    • 1、DOM、事件、props个人理解
    • 2、ref使用
    • 3、$ children $parent使用
    • 4、插槽使用

前端Vue核心

开发一个前端模块可以概括为以下几个步骤:
(1)写静态页面、拆分为静态组件;
(2)发请求(API);
(3)vuex(actions、mutations、state三连操作);
(4)组件获取仓库数据,动态展示;

1、vue文件目录分析

public文件夹:静态资源,webpack进行打包的时候会原封不动打包到dist文件夹中。

pubilc/index.html是一个模板文件,作用是生成项目的入口文件,webpack打包的js,css也会自动注入到该页面中。我们浏览器访问项目的时候就会默认打开生成好的index.html。

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

assets: 存放公用的静态资源
components: 非路由组件(全局组件),其他组件放在views或者pages文件夹中
App.vue: 唯一的跟组件
main.js: 程序入口文件,最先执行的文件

babel.config.js: 配置文件(babel相关)
package.json: 项目的详细信息记录
package-lock.json: 缓存性文件(各种包的来源)

2、项目配置

2.1 项目运行,浏览器自动打开

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

2.2 关闭eslint校验工具(不关闭会有各种规范,不按照规范就会报错)

  • 根目录下创建vue.config.js,进行配置
module.exports = {
  //关闭eslint
  lintOnSave: false
  }

2.3 src文件夹配置别名,创建jsconfig.json,用@/代替src/,exclude表示不可以使用该别名的文件

 {
    "compilerOptions": {
        "baseUrl": "./",
            "paths": {
            "@/*": [
                "src/*"
            ]
        }
    },

    "exclude": [
        "node_modules",
        "dist"
    ]
 }

3、组件页面样式

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

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