【尚品汇】项目笔记

【尚品汇】项目笔记

  • 1、vue文件目录分析
  • 2 项目配置
  • 3 路由组件
    • 3.1 创建router文件夹
    • 3.2 总结
      • 1. 路由组件和非路由组件区别:
      • 2. A->b路由跳转方式
      • 3. 路由传参有几种方式
      • 面试题1 路由传递参数(对象写法),path是否可以结合params参数一起使用?
      • 面试题2 如何指定params参数可传可不传
      • 面试题3 params可传可不传,但是如果传递的时空串,如何解决
      • 面试题4 路由组件能不能传递props数据
  • 4 footer组件显示与隐藏
    • 多次执行相同的push问题
      • call和apply的区别
    • 定义全局组件
  • 5 封装axios
  • 6 接口统一管理
    • 6.1 解决跨域问题
  • 7 nprogress进度条插件
  • 8 vuex
    • Vuex基本使用
    • Vuex的模块化
  • 9 给一级菜单加颜色
  • 10 loadsh插件防抖和节流(*重要)
  • 11 编程式导航+事件委托实现路由跳转
  • 11 TypeNav在Search上隐藏&过渡动画
  • 12 Vue路由销毁问题-性能优化
  • 13 params和query参数合并
  • 14 mock插件使用
  • 15 vuex数据存储与使用
  • 16 swiper插件实现轮播图
    • 完美解决方案:使用`watch+this.$nextTick()`

1、vue文件目录分析

vue create 项目名称
目录分析
public文件夹:静态资源,webpack进行打包的时候会原封不动打包到dist文件夹中。

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

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

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

babel.config.js:babel配置文件,把es6翻译成es5
package.json:看到项目描述、项目依赖、项目运行指令
package-lock.json: 缓存性文件(各种包的来源)
README.md:项目说明文件

2 项目配置

  1. 项目运行,浏览器自动打开
    package.json"serve": "vue-cli-service serve --open",

  "scripts": {
    "serve": "vue-cli-service serve --open",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  1. 关闭eslint校验工具、开启自动刷新
    (不关闭会有各种规范,不按照规范就会报错)

vue.config.js,进行配置

module.exports = {
  //默认打开地址http://localhost:8080/
  devServer: { 
    host: 'localhost', 
    port: 8080, 
  },
  //关闭eslint
  lintOnSave: false
  }
  1. src文件夹配置别名,jsconfig.json,用@/代替src/exclude表示不可以使用该别名的文件
 {
    "compilerOptions": {
        "baseUrl": "./",
            "paths": {
            "@/*": [
                "src/*"
            ]
        }
    },

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

  1. 路由的配置

    2个非路由组件,四个路由组件

    两个非路由组件:
    Header 【首页、搜索页】
    Footer【在首页、搜索页】在登录页是没有的
    路由组件:
    Home
    Search
    Login(没有底部的Footer组件,带有二维码的)、
    Register(没有底部的Footer组件,带二维码的)

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

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

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