vue技术栈

MVC、MVP、MVVM

定义

mvc

• Model - 模型，数据保存

• View - 视图 用户界面

• Controller - 控制器 业务逻辑

mvvm框架？

• M - Model

• V - View

• VM - ViewModel

采用 双向绑定（data-binding）：View的变动，自动反映在 ViewModel，ViewModel 会自动去更新 Model 数据，反之亦然（即当 Model 发生改变时也会自动反映到 ViewModel 上，触发 View 的自动更新渲染）

VUE

官网

现行两大版本：vue2.x vue3.x

vue架构中包含了mvvm…

Vue2.x 不支持 IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性(Object.defineProperty())

• Vue2.x 底层使用 Object.defineProperty() 来实现 数据劫持
• Vue3.x 底层使用 Proxy 来实现 数据代理。
• 用于构建用户界面的渐进式框架，核心库只关注视图层。

安装

• 使用

  • template：视图结构

  • script：交互逻辑

  • style：样式

    • lang：使用 css 预处理器，如：scss、less

  • scoped：表示所书写的样式仅支持在当前组件中使用，其它组件不受影响

  Vue loader

  Vue Loader 是一个 webpack 的 loader，它允许你以一种名为单文件组件 (SFCs)的格式撰写 Vue 组件

  VUE CLI

  vue工具：vue Devtools || vue cli

  基于 Vue.js 进行快速开发的完整系统。

  • 脚手架：快速搭建项目结构

  安装

  $ npm install -g @vue/cli
  # OR
  $ yarn global add @vue/cli
  

  安装完毕后，可以在 cmd 命令行中输入：

  $ vue --version
  

  如果能够查看到版本信息，则说明安装成功，否则安装失败或环境变量配置有问题。

  创建项目

  GUI - 图形化用户界面

  $ vue ui
  

  命令行

  1. 执行创建命令：

  $ vue create project-name
  

  显示创建项目的向导

  2. 选择手动选择项目新特性项：

  ? Please pick a preset:
    Default ([Vue 3] babel, eslint)
    Default ([Vue 2] babel, eslint)
  > Manually select features #手动配置项目
  

  3. 选择新特性：

  ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection, and
  <enter> to proceed)
   (*) Babel
   ( ) TypeScript
   ( ) Progressive Web App (PWA) Support
   (*) Router
   (*) Vuex
  >(*) CSS Pre-processors
   (*) Linter / Formatter
   ( ) Unit Testing
   ( ) E2E Testing
  

  4. 选择 vue 版本：

  ? Choose a version of Vue.js that you want to start the project with
    3.x
  > 2.x
  

  5. 选择 CSS 预处理器：

  ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
    Sass/SCSS (with dart-sass)
  > Less
    Stylus
  

  6. 选择 linter 规范：

  ? Pick a linter / formatter config:
    ESLint with error prevention only
    ESLint + Airbnb config
  > ESLint + Standard config
    ESLint + Prettier
  

  7. 选择保存时验证并格式化：

  ? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to pr
  oceed)
  >(*) Lint on save
   ( ) Lint and fix on commit
  

  8. 选择配置文件存放位置：

  ? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
  > In dedicated config files
    In package.json
  

  9. 是否将上述选择特性保存为预设项：

  ? Save this as a preset for future projects? (y/N)
  

  如果是 yes，则还需要输入预设项名称

  10. 安装项目依赖
  11. 项目创建成功后，进入项目目录，运行任务：

  $ cd project-name
  $ npm run serve # 或 yarn serve
  

  项目说明

  • public 目录中放置的是应用的 html 文件（通常只有一个 index.html）

  • src 目录中放置我们自己项目中所书写的源代码

  • src 下 main.js 是应用的入口 JS 文件，名字勿改

  • .eslintrc.js 是 ESLint 的配置文件

  • babel.config.js 是 Babel 的配置文件

  • package.json 是项目配置文件

  • vue.config.js 是 Vue CLI 的配置文件（在 VueCLI4.x 中这个文件需要自己手动创建）

    // 老项目维护：
    module.exports = { ... }
    

  npm scripts

  {
    "scripts": {
      "start": "npm run serve",
      "serve": "vue-cli-service serve",
      "build": "vue-cli-service build",
      "lint": "vue-cli-service lint"
    },
  }
  

  • serve: 开发任务，会自动启动开发服务器（webpack-dev-server）
  • build：生产任务，构建生产环境下的资源
  • lint：验证并格式化代码

  安装 VSCode 插件

  ESLint ：代码规范报错

  Vetur ：让代码具有高亮

  代码规范配置

  • 对于自己的代码习惯，可以添加在eslintrc.js文件中的rules，根据提示跳转到对于配置页面，找到options，将代码复制进文件中

    'comma-dangle': ['erro', 'always'],
    

    ’ erro ’ == 3 红色报错

    ’ warn ’ == 2 黄色警告

    ’ off ’ == 1 关闭提示

  • 设置后，原代码不符用户习惯，出现很多报错，cmd输入命令

    npm run lint  //根据规则自动格式化
    

    注意：vscode 只打开项目文件，多余文件出现Eslint可能不会识别

  Todolist - 3.0 单文件组件

  标准规则注意点：单文件组件要用多个单词命名

  Vuex

  Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。---- 工具，用于管理应用中组件间共享的状态（数据）

  vuex4 – vue 3

  vuex3 – vue 2

  采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

  概念

  • store：仓库，用于集中式管理
  • state：状态，应用中组件要共享的数据
  • mutation：同步更新状态数据的函数，在 vuex 中仅能提交 mutation 来更新状态数据
  • action：和 mutation 类似，但可以包含异步操作，不能直接更新状态，而是要提交 mutation 更新
  • getter：是 store 中的计算属性
  • module：模块，每个模块可以有自己的 state、mutation、action、getter，甚至自己的 module

  使用

  安装

  $ npm i [email protected]
  # 或
  $ yarn add [email protected]
  

  创建 src/store/index.js 文件

  import Vue from 'vue'
  import Vuex from 'vuex'
  
  // 使用核心插件 Vuex
  Vue.use(Vuex)
  
  // 创建 Store
  const store = new Vuex.Store({
    state: { // 组件间共享的数据
      todos: [],
    },
    getters: { // store的计算属性
      /* 7.是否所有都完成？ */
      allChecked (state) {
        return state.todos.every(item => item.completed)
    },
    mutations: { // 唯一进行同步更新状态数据的方法
      /**
       * 添加新待办事项
       */
      addTodoItem(state, payload) {
        state.todos.push({
          id: Math.random(),
          title: payload.title,
          completed: false,
        })
      },
    },
  })
  
  export default store
  

  向根实例中 main.js 注入 store

  import Vue from 'vue'
  
  // 引入 store
  import store from './store' // import store from './store/index.js'
  
  new Vue({
    store, // 注入 store，这样，在所有后代组件中，都可以使用 this.$store 获取 vuex 的 Store 使用
    // render: h => h(App),
  }).$mount('#app')
  

  使用store中的mutations getters

  //使用store中的state
  this.$store.state.todos
  //辅助函数
  import { mapGetters, mapMutations, mapState, mapActions } from 'vuex'
   methods: {
      ...mapMutations(['clear', 'checkAll'])
      // clear () {
      //   this.$store.commit('clear')
      // },
      // checkAll (event) {
      //   this.$store.commit('checkAll', { checked: event.target.checked })
      // }
    },
    computed: { // 获取仓库的getters 和 公共数据
      ...mapGetters(['allChecked', 'checkCount', 'todoCount'])
      todos () {
        return this.$store.state.todos
      }
      // allChecked () {
      //   return this.$store.getters.allChecked
      // },
      // checkCount () {
      //   return this.$store.getters.checkCount
      // },
      // todoCount () {
      //   return this.$store.getters.todoCount
      // }
    },
  

  维护vuecli老任务注意？

  1. package.json文件
     • scripts 任务打开指令是 dev || start || serve ？ npm run …
     • vue 版本 2.6 || 2.5 代码差异
  2. eslintrc.js 文件
     • 配置自己的代码规范

  Todolist - 3.1 单文件组件样式

  样式css美化

  • Bootstrap – 响应式布局 栅格系统

  • Bulma – css类名库

  字体图标库

  • iconfont
  • fontawesome

  如何使用Bulma?

  1. 安装

     npm install bulma
     

  2. src/main.js

     /* 引入模块*/
     import 'bulma/css/bulma.min.css'
     

  3. 官网copy喜欢的结构components

  4. 让图标显示

   
  <script src="https://kit.fontawesome.com/304fcfb799.js" crossorigin="anonymous">script>
  

  Vue Router

  SPA

  单页Web应用（single page web application，SPA），就是只有一张Web页面的应用，是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。

  前端路由

  利用 hash 或 history 改变不会向后端发起新的 html 请求特点

  模式

  • hash：利用 URL 中 #hash hash 值改变后，不会发送新的网络请求的特点，来实现的路由。使用如 #/home、#/login 类似的方式来表示所请求的前端 URL 资源。

    window.onhashchange = function () 
    	{ console.log('hash changes', location.hash)}
    

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-14OAV0SJ-1654654274393)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1652690682250.png)]

  • history：利用 h5 中 history 新增的 API pushState()(往历史记录添加)、replaceState()( 替换当前历史记录 ) 来实现。其路由的格式与服务端路由 URL 格式一致（比 hash 模式来说，没有多余的如 # 之类的符号），所以，这种路由模式要用好，还需要服务端配置（运维工作）（刷新当前页面会认为向服务端请求资源，会出现404所以需要服务端配置）。

  Vue Router

  是 Vue.js 官方的路由管理器，是一个核心插件，与 Vue.js 高度集成。

  Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举

  安装

  $ npm i [email protected]
  # 或
  $ yarn add [email protected]
  

  定义 VueRouter 对象

  • 创建组件 Home | About

  src/views/Home.vue | src/views/About.vue

  • 创建index.js

  src/router/index.js

  import Vue from 'vue'
  import VueRouter from 'vue-router'
  import Home from '@/views/Home'
  import Login from '@/views/Login'
  
  // 使用路由插件
  Vue.use(VueRouter)
  
  // 创建 VueRouter 对象
  const router = new VueRouter({
    mode: 'hash', // 路由模式，可取 hash、history，默认为 hash
    routes: [ // 静态路由的配置信息
      {
        path: '/home', // 当 URL 中访问地址为 /home 时
        component: Home, // 拿 Home 组件渲染
      },
      {
        path: '/login',
        component: Login,
      },
    ],
  })
  
  // 导出路由对象
  export default router
  

  在 Vue 组件中使用 VueRouter 时，可使用 VueRouter 提供的两个内置组件：

  • router-link：链接，相当于
  • router-view：视图，用于渲染访问路径所对应的组件

  注入 router 到 vue 根实例

  • main.js

  import App from './routerApp.vue'
  // 引入 router
  import router from './router'
  
  new Vue({
    router,
    // render: h => h(App),
  }).$mount('#app')
  

  当在 Vue 根实例中注入了 router 后，在 routerApp.vue 组件中会自动注入如下两个属性：

  • $router：代表 VueRouter 对象实例
  • $route：代表的是当前激活的路由对象

  3.src/routerApp.vue

  npm run serve

  重定向

  /* 重定向：在访问根目录的时候直接访问当前地址 */
   routes: [ // 静态路由的配置信息
      {
        path: '/',
        redirect: '/home' // 重定向
      },
      {
        path: '/home', // 当 URL 中访问地址为 /home 时
        component: Home // 拿 Home 组件渲染
      },
  

  编程式导航

  导航到不同的位置 注意：在 Vue 实例中，你可以通过 $router 访问路由实例。因此你可以调用 this.$router.push

  导航方法：

  handleClick () {
  //push 当用户点击浏览器后退按钮时，会回到之前的 URL。
       this.$router.push('./todo') 
  //replace 当用户点击浏览器后退按钮时，不会回到之前的 URL是取代。
       this.$router.replace('./todo') 
      
  //path 属性 
      router.push({ path: '/home', replace: true })
      // =====
      router.replace({ path: '/home' })
      
  //除了path之外，也可以通过name
       this.$router.push({
          name: 'todo'
        })
  } 
      back() {
        this.$router.back()
        this.$router.forward()
        this.$router.go()
      },
  

  • 当你点击 时，内部会调用这个方法，所以点击 相当于调用 router.push(...)
  • 声明式
  • 编程式 this.$router.push(‘./todo’)

  路由传参：

  /* 字符串 =>传参 */
  //1.
  this.$router.push('./todo?id=12345&title=你好')
  location.href=> http://localhost:8080/#/todo?id=12345&title=%E4%BD%A0%E5%A5%BD
  
  //2.
  this.$router.push({
          name: 'todo',
          query: {
            id: 345,
            title: 'lanlan',
            price: 212.123,
            amount: 9
          }
  }) 
  location.href=> http://localhost:8080/#/todo?id=345&title=lanlan&price=212.123&amount=9
  
  => app2.vue
  created () {
      //route 激活路由
      console.log(this.$route)
  }
  log=> obj.query
  

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lEX7oFK0-1654654274394)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1652700930073.png)]

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nS8QPBLJ-1654654274394)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1652700830455.png)]

  /* 动态路径传参 */
   {
        path: '/todo/:id', // /：id动态路径传参
        name: 'todo',
        component: todoList // 渲染App2 组件
  }
  routerApp.vue
  this.$router.push({
          name: 'todo',
          params: {
            id: 2000
          }
  })
  //注意：path会忽略 params 
  //一般只传 1-2 个参数
  location.href =>http://localhost:8080/#/todo/2000
  

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tZSbLNpF-1654654274395)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1652702078267.png)]

  命名视图

  • 如果 router-view 没有设置名字，那么默认为 default。

  嵌套路由

  //主页 /category
      获取方法1：点击获取id,发起请求
      获取方法2：路由嵌套
      <div class="right">
        <router-view></router-view>
      </div>
  //子路由 /category/sub
  import SubCategory from '@/views/category/sub-category'
  
  {
      path: '/category',
      name: 'category',
      // component: Category,
      components: {
        footer: AppTabbar,
        default: Category,
        header: AppNavbar,
      },
      children: [ // 子路由，嵌套路由
        { /* 'sub/:id' => 完整路径：/category/sub，:id 是定义的动态路径参数，用于接收传递的分类id
          *   /sub,/ 代表根路径 => /sub
          */
          path: 'sub/:id',
          name: 'sub',
          component: SubCategory,
        },
      ],
    },
  

  UI组件库

  通用的已封装好的基础组件，可在各种类型项目中使用。

  印记中文–vue( mobile ) vue( pc )

  移动端

  • vant
  • mint-ui
  • cube-ui
  • Mand mobile (金融场景)

  PC端

  • Element UI
  • vuetify
  • iview
  • ant design vue (蚂蚁金服)

  即时通信

  =>难 云信 音频视频,

  前端后端配合

  课堂案例taotao

  电商 – 移动端

  实现功能页面

  • 首页
  • 分类
  • 购物车
  • 我的
  • 商品详情
  • 登录
  • …

  创建并构建项目

  1. 利用 vue cli 创建项目：选择 vue、babel、vue-router、vuex、less、linter 待功能

  2. 配置 eslint 规则（特别是团队协作时，eslint 规范很重要）

     .eslintrc/
     /* 配置规则总有逗号 */
         'comma-dangle': ['error', 'always-multiline'],
         'vue/multi-word-component-names': 0,
     

  3. 配置应用开发服务器，如：端口、主机、自动打开浏览器功能等…

     vue.config.js/
     老版本如下内容：
     module.exports = {
       devServer: {
         port: 3000,
         host: 'localhost', // 0.0.0.0  别人用你的ip就能看到界面
         open: true,
       },
     }
     

  4. 创建页面级 .vue 文件

     views/home/index.vue
     views/category/index.vue
     ...
     

     • 每个页面要实现的功能很多，所以需要响应页面文件夹进行管理

  5. 定义路由

     router/routes.js =>单独写所有页面的路由
     /* 由于每个组件页面下的文件命名都为index.vue所以书写路径可省略 */
     import Home from '@/views/home'
     import Detail from '@/views/detail'
     import Login from '@/views/login'
     import Mine from '@/views/mine'
     import Cart from '@/views/cart'
     import Category from '@/views/category'
     
     const routes = [
       { /* 重定向 */
         path: '/',
         redirect: 'home',
       },
       {
         path: '/home',
         name: 'home',
         component: Home,
       },
       {
         path: '/detail',
         name: 'detail',
         component: Detail,
       },
       {
         path: '/login',
         name: 'login',
         component: Login,
       },
       {
         path: '/mine',
         name: 'mine',
         component: Mine,
       },
       {
         path: '/cart',
         name: 'cart',
         component: Cart,
       },
       {
         path: '/category',
         name: 'category',
         component: Category,
       },
        { /* 通配符路由 */
         path: '*',
         component: Notfount,
       },
     ]
     export default routes
     

     • 当使用通配符路 由时，请确保路由的顺序是正确的，也就是说含有通配符的路由应该放在最后。路由 { path: '*' } 通常用于客户端 404 错误

  6. 引入项目使用的 UI 组件库

     移动端–vant2–vue2

     1. 安装

        npm i [email protected] #版本号去npm.js找对应版本下载量最多的
        

        示例工程

     2. 引入组件：

        2.1 推荐使用自动按需引入组件

        • 配置操作

        # 安装插件
        npm i babel-plugin-import -D
        # babel.config.js 中配置文件 || 在.babelrc 中添加配置（老版本）
         plugins: [
            ['import', {
              libraryName: 'vant',
              libraryDirectory: 'es',
              style: true,
            }, 'vant'],
          ],
        # 接着你可以在代码中直接引入 Vant 组件
        插件会自动将代码转化为方式二中的按需引入形式
        import { Button } from 'vant';
        

        • 组件注册](https://youzan.github.io/vant/v2/#/zh-CN/advanced-usage)

        ex：全局注册
        import Vue from 'vue'
        import { Button } from 'vant'
        // 方式一. 通过 Vue.use 注册
        // 注册完成后，在模板中通过  或  标签来使用按钮组件
        Vue.use(Button)
        
        
        

        • 单独文件模块封装

        src/utils/vant-import.js
        import Vue from 'vue'
        import {
          Button, Cell, CellGroup,
        } from 'vant'
        // 方式一. 通过 Vue.use 注册
        // 注册完成后，在模板中通过  或  标签来使用按钮组件
        
        Vue.use(Button)
        Vue.use(Cell)
        Vue.use(CellGroup)
        ...
        
        src文件入口/main.js
        /* 引入单独的vantjs文件 */
        import './utils/vant-import'
        

        • 注意每引入一次,use一次
        • 可能cv的代码包含方法和属性，注意粘贴整合
        • 可能cv的代码包含其他的van-开头标签，也需要其他组件引入并use才会展示效果

        2.2 导入所有组件=>可能vant组件你全部都用到

        src入口文件/main.js
        
        import Vue from 'vue';
        import Vant from 'vant';
        import 'vant/lib/index.css';
        
        Vue.use(Vant);
        

        • Tips: 配置按需引入后，将不允许直接导入所有组件。
        • 与2.1互斥

  7. axios 二次封装

  8. 接口文档使用

  import 异步任务，实现懒加载技术

  component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue'),
  

  定制主题

  每个人页面主题不一致，颜色不一致，难看，需要统一

  • 按需引入样式

    babel.config.js配置
    plugins: [
        [
          'import',
          {
            libraryName: 'vant',
            libraryDirectory: 'es',
            // 指定样式路径
            style: (name) => `${name}/style/less`,
          },
          'vant',
        ],
      ],
    

  • 修改样式变量

    // vue.config.js
    module.exports = {
      css: {
        loaderOptions: {
          less: {
            // 若 less-loader 版本小于 6.0，请移除 lessOptions 这一级，直接配置选项。
            lessOptions: {
            // modifyvars 修改变量:里面自定义
              modifyVars: {
                // 直接覆盖变量
                'text-color': '#111',
                'border-color': '#eee',
                // 或者可以通过 less 文件覆盖（文件路径为绝对路径）
                hack: `true; @import "your-less-file-path.less";`,
              },
            },
          },
        },
      },
    };
    

    vue-cli 搭建的项目，可以在 vue.config.js 中进行配置。

  国际化 I18N

  i18n（其来源是英文单词 internationalization的首末字符i和n，18为中间的字符数）是“国际化”的简称

  网络请求

  1.数据请求

  ajax( 步骤分散 ) => JQuery( 封装ajax $ajax) =>ES6 promise ( 避免回调地狱 )=> axios （基于 ajax 和 promise 进行封装的库，核心原理是 Ajax,封装使用 promise管理,解决异步并行问题 ） => fetch ( 内置的类，进行数据请求的，天生就是基于promise 进行管理的 )

  Fetch API

  优点：

  • 减少对外部依赖项的加载，不用安装三方包

  • 写法简单

  • 兼容使用polyFill

    fetch() 必须接受一个参数——资源的路径。无论请求成功与否，它都返回一个 Promise 对象，resolve 对应请求的 Response对象。你也可以传一个可选的第二个参数 init（参见 Request）

  • IE兼容问题

  • 默认请求方式get,可以fetch(一参，二参)

  • 测试接口：get请求

  home.vue组件实现：
  created () {
     /* 网络请求方法1：fetch API */
       const result = fetch('https://jsonplaceholder.typicode.com/users')
       console.log('result', result)
       result
         .then(res => res.json())
         .then(data => {
           console.log(data)
         })
  	// 调用两次then
    },
  

  axios二次封装

  Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

  特性

  • 从浏览器中创建 XMLHttpRequests
  • 从 node.js 创建 http 请求
  • 支持 Promise API
  • 拦截请求和响应
  • 转换请求数据和响应数据
  • 取消请求
  • 自动转换 JSON 数据
  • 客户端支持防御 XSRF

  安装

  使用 npm:

  $ npm install axios qs
  qs: 对象转化为ur url转化成对像
  

  axios二次封装 【面试】

  2.配置scripts字段

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NdQgVo9n-1654654274395)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1654246759625.png)]

  • 定义 baseURL – 适应不同环境请求不同接口

  src/utils/request.js
  import axios from 'axios'
  import { Toast } from 'vant'
  /* 定义 baseURL -- 适应不同环境请求不同接口 */
  // const baseURL = process.env.NODE_ENV === 'development' ? '开发测试接口' : '生产服务器接口'
  // const baseURL = process.env.NODE_ENV === 'development' ? 'http://102.666.6.6' : 'http://www.test-site.com'
  const baseURL = ''
  
  /* 创建 axios 实例 */
  const service = axios.create({
    baseURL,
    timeout: 10000,
  })
  
  // 拦截请求
  service.interceptors.request.use(config => {
    // 加载提示
    Toast.loading({
      message: '加载中...',
      forbidClick: true,
      duration: 0, // 展示时间，0为不消失
    })
    // 添加请求头中的token 认证数据
    // ...
    return config
  })
  // 拦截响应
  service.interceptors.response.use(resData => {
    // 关闭提示
    Toast.clear()
    // 响应数据处理:根据前后端接口规范来处理数据结果
    if (resData.status === 200) {
      return resData.data
    }
    return Promise.reject(new Error('接口请求异常...'))
  })
  export default service
  
  

  调用方法：

  • 每个组件调用–繁琐

  home.vue组件实现：
  import request from '@/utils/request'
  created () {
  
      /* 网络请求方法2：axios */
      request({
        url: 'https://jsonplaceholder.typicode.com/users',
        method: 'GET',
      }).then(data => console.log(data))
      // request.get()
      // request.post()
    },
  

  • 入口文件调用 【推荐】

  /* 引入二次封装的axios文件 */
  import request from './utils/request'
  Vue.prototype.$http = request
  
  每个组件中使用方便
  created () {
   /* 网络请求方法2：axios */
      this.$http({
        url: 'https://jsonplaceholder.typicode.com/users',
        method: 'GET',
      }).then(data => console.log('$http', data))
  },
  

  • 注意公司中文件的this.$http名字 是axios封装的 还是 插件vue-resourse
  • vue-resourse = > The plugin for Vue.js provides services for making web requests and handle responses using a XMLHttpRequest or JSONP.

  接口文档

  去公司会遇到各种格式…

  txt | doc | swagger | 公司工具…

  swagger文档理解

  案例接口地址：http://quanzhan.site:3000/swagger/

  使用

  统一处理网络请求

  src/api/constants.js

  /* 很多页面需要调用当前接口，采取变量保存；
    改版接口时，只需要改一次变量值，方便维护
  */
  const API = {
    /* api/tabs 获取所有分类信息 */
    TABS_API: 'api/tabs',
  }
  export default API
  

  封装Tabbar组件( 底部导航 )

  面试刚需：你有自己写过组件吗？

  意思是说自己封装使用组件的这个过程，每个公司业务不一样，需要你进行整理封装复用

  vant – tabbar标签栏

  不使用vant组件，自己如何封装定义vue插件tabbar呢？

  插件通常用来为 Vue 添加全局功能。插件的功能范围没有严格的限制——一般有下面几种：

  1. 添加全局方法或者 property。如：vue-custom-element
  2. 添加全局资源：指令/过滤器/过渡等。如 vue-touch
  3. 通过全局混入来添加一些组件选项。如 vue-router
  4. 添加 Vue 实例方法，通过把它们添加到 Vue.prototype 上实现。
  5. 一个库，提供自己的 API，同时提供上面提到的一个或多个功能。如 vue-router

  src/components/tabbar/tab-bar.vue 定义插件

  • 当前页面home,点击home,重复跳转渲染当前页面的时候，控制台会报错
  • 不用管，这是新版会提示
  • 也可以在 this.$router.push(path).catch(()=>{})静默处理（对于异常什么也不做）

  src/components/tabbar/index.js 开发插件

  import Tabbar from './tab-bar'
  /* 开发插件 */
  // 自定义 Vue 插件 暴露install方法 官网
  const plugin = {
    install (Vue) {
      // 全局注册自定义的 tabbar 组件
      Vue.component('tao-tabbar', Tabbar)
    },
  }
  export default plugin
  
  

  home/index.vue渲染插件

  3. home/index.vue 定义tabbar 动态数组

     /* tabbar数组 */
     const list = [
       {
         pagePath: '/home', // 点击跳转路径
         text: '首页',
         icon: 'index', // icon图标
       },
       {
         pagePath: '/category',
         text: '分类',
         icon: 'cat',
       },
       {
         pagePath: '/cart',
         text: '购物车',
         icon: 'cart',
       },
       {
         pagePath: '/mine',
         text: '我的',
         icon: 'mine',
       },
     ]
     

  4. 多个页面跳转，当前tabbar要激活

     将之前定义的组件外部添加标签

     
         // router-link自动转化成
         
         
     
             {{item.icon}}
             {{item.text}}
         
         
     
     

     • router-link 配置 tag 属性生成别的标签

     • class与style绑定

     • router-link标签带来的class类router-link-exact-active| router-link-active

     • v-slot作用域插槽 是个对象，无slot生成a标签

       v-slot="{ href, route, navigate, isActive, isExactActive }"
       

       • href：解析后的 URL。将会作为一个 a 元素的 href attribute。
       • route：解析后的规范化的地址。
       • navigate：触发导航的函数。会在必要时自动阻止事件，和 router-link 同理。
       • isActive：如果需要应用激活的 class 则为 true。允许应用一个任意的 class。
       • isExactActive：如果需要应用精确激活的 class 则为 true。允许应用一个任意的 class。

  5. 激活两种方法