尚品汇项目笔记_html-js-css

尚品汇项目笔记 git代码地址前端Vue核心1、vue文件目录分析2、项目配置3、组件页面样式4、清除vue页面默认的样式5、pages文件夹6、footer组件显示与隐藏7、路由传参8、多次执行相同的push问题9、定义全局组件10、代码改变时实现页面自动刷新11、Home首页其它组件12、封装axios13、前端通过代理解决跨域问题14、请求接口统一封装15、nprogress进度条插件16、手动引入vuex17、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、插槽使用

git代码地址

我自己关于本项目的git仓库地址

前端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"
    ]
 }