[Attack Vue (3)] Используйте их, чтобы быстро развиваться

Vue.js

Не позволяй своему низу быть твоим потолком

В этой статье в основном говорится о следующем содержании, которое будет показано более четко с помощью коротких примеров, насколько это возможно. Установите и используйте меньше, внедряйте менее глобальный модуль; миксин распределяет повторно используемые функции в компонентах Vue; axios инкапсулирует модульный интерфейс запросов; ленивая загрузка vue-router, перехват маршрутизации; фильтр-фильтр, форматированный текст.

  • Используйте менее предварительно скомпилированный язык вместо традиционного css
  • использование инъекции миксина
  • пакет аксиом
  • vue-router ленивая загрузка, перехват маршрута
  • фильтрфильтр

bugfix:

  • Исправлена ​​проблема, из-за которой параметры среды, экспортированные в loadEnv.js, были ненормальными в webpack.config.js.
  • 🐛: исправление подсказок об ошибках eslint, которые вызывают ошибки конфигурации.@babel/plugin-syntax-dynamic-import

Less

Less — это предварительно скомпилированный язык для расширений CSS, который необходимо скомпилировать в традиционный CSS без использования плагинов. Он может использовать такие функции, как переменные, константы, вложенность, примеси, функции и т. д., и может писать CSS более эффективно и гибко. И некоторые плагины автоматически добавляют соответствующий префикс css во время процесса компиляции less.

установить меньше

npm i less less-loader style-resources-loader -D

style-resources-loaderиспользуется дляWebpackизCSSЗагрузчик ресурсов обработчика, который вводит несколько импортированных модулей для ваших ресурсов стиля (например). Такие какvariables, mixinscss, sass, scss, less, stylus.

srcСоздайте папку подlessА потом создатьcommon.lessфайл, здесь в основном помещаются глобальные стили меньшего размера, такие как цвет, имя и так далее. Пример:

@info: #2d8cf0;
@success: #19be6b;
@warning: #ff9900;
@error: #ed4014;

webpack.config.jsСредняя конфигурация

// webpack.config.js
module.exports = {
...
  module: {
    rules: [
      {
        test: /\.less$/,
        use: [
          'style-loader', 'css-loader', 'less-loader', {
            loader: 'style-resources-loader',
            options: {
              patterns: [resolve('src/less/common.less')]
            }
          }
        ]
      }
      ...
    ]
  }
};

После их настройки вы можете использоватьlessНу и остальные едят так же.

меньше использования

main.vueКод выглядит следующим образом:

<template>
  <div class="main">main
    <div class="info">info</div>
    <div class="success">success</div>
    <div class="warning">warning</div>
    <div class="error">error</div>
  </div>
</template>
...
<style lang="less" scoped>
.main {
  .info {
    color: @info;
  }
  .success {
    color: @success;
  }
  .warning {
    color: @warning;
  }
  .error {
    color: @error;
  }
}
</style>

mixin

В .в УП JS.org/V2/дорого/м...

Миксины предоставляют очень гибкий способ распространения повторно используемой функциональности в компонентах Vue. Объект миксина может содержать произвольные параметры компонента. Когда компонент использует примесь, все опции примеси будут «смешаны» с собственными опциями компонента.

Конкретные примеры можно посмотретьСтраница переключения миксинов Axios отменяет запрос интерфейса

axios

в первой статье[Attack Vue One] Создайте ведро семейства Vueaxios уже упоминался в, существуетmain.jsAxios монтируется в прототип объекта Vue, использовать его напрямую не элегантно, а если он используется в проекте, то надо судить о возврате различных состояний данных.this.$httpЭто будет казаться повторяющимся и громоздким в использовании.

пакет аксиом

srcСоздано в каталогеutilsкаталог, создатьrequest.jsдокумент.

import axios from 'axios';

/**
 * process.env.APP_BASEURL 环境中的参数，在不同的环境下自动使用对应环境参数
 * timeout: 默认超时7秒
 * 更多信息查看：https://www.npmjs.com/package/axios
 */
const request = axios.create({
  baseURL: process.env.APP_BASEURL,
  timeout: 7000
  // headers: {
  //   common: {
  //     'Authorization': 123
  //   }
  // }
});

// 请求拦截
request.interceptors.request.use(
  config => {
    // post请求时候参数格式转换
    if (config.method === 'post' || config.method === 'POST') {
      config.data = qs.stringify(config.data);
    }

    // config是发送请求时候所带的一些内容，比如数据什么的
    return config;
  },
  error => {
    Promise.reject(error);
  }
);

request.interceptors.response.use(
  response => {
    // 处理http状态码，以及处理后端接口返回的状态值
    // const { status, data } = response;
    // if (status === 200) {
    //   return data;
    // } else {
    //   window.alert(status);
    // }
    const data = response.data;
    return data;
  },
  error => {
    // 处理请求错误
    if (error.name === 'Error') {
      // window.alert(error.message);
    }
    // return error;
  }
);

export default request;

использование аксиом

srcСоздать папку в каталогеapi, этот файл используется только для размещения запроса接口, например, мне нужно запросить интерфейс для получения данных/getData.

Исправлять.env.developmentизAPP_BASEURL, если не сhttp|https,axiosПо умолчанию это символ имени пути после URL-адреса.

APP_BASEURL="http://dev/"
APP_TEXT="开发测试文本"
NODE_ENV="development"

import request from '@/utils/request';

/**
 * 请求接口
 * 如果想要请求非BASE_URL以外的url，比如一个新的url: https://v1.hitokoto.cn，
 * 直接在data中重新设置url即可，会把原来的url替换掉
 * @param {Object} data
 */
export const getData = data =>
  request({
    url: '/getData',
    method: 'GET',
    ...data
  });

Затем на странице используйте:

import { getData } from '@/api/account/index';

export default {
  created() {
    ...
    // 使用方法一
    getData().then(res => {
      console.log('Promise then', res);
    }).catch(err => {
      console.log('Promise catch error', err);
    });

    // 使用方法二
    this.getReqData();
  },
  methods: {
    // async异步
    async getReqData() {
      // 重置替换掉原来的链接
      const data = await getData({
        baseURL: 'https://v1.hitokoto.cn',
        url: ''
      });
      console.log('async异步获取', data);
    }
  }
};

потому что его не существуетhttp://dev/так было быnetwork error. как показано ниже

Страница переключения миксинов Axios отменяет запрос интерфейса

Примечание. Некоторые бизнес-сценарии отменяются после переключения страниц.axiosrequest, чтобы подсказка сообщения предыдущего (предыдущего) запроса не появлялась на новой странице. обратиться к боссуmixinспособ отменить.

/**
 * @name cancelRequestMixin.js
 * @url https://juejin.cn/post/6844904023191977998
 * @description 切换页面之后取消接口调用
 */

import axios from 'axios';

const CancelToken = axios.CancelToken;

const cancelRequestMixin = {
  data() {
    return {
      axiosCancelToken: null, // cancelToken实例
      axiosCancel: null // cancel方法
    };
  },
  created() {
    // 初始化生成axiosCancelToken实例，注册axiosCancel方法
    this.axiosCancelToken = new CancelToken(c => {
      this.axiosCancel = c;
    });
  },
  beforeDestroy() {
    // 组件销毁阶段调用axiosCancel方法取消请求
    this.axiosCancel('取消请求');
  }
};

export default cancelRequestMixin;

ленивая загрузка маршрутизации vue-router, перехват маршрутизации

Отложенная загрузка маршрутизации vue-router

При упаковке и создании приложений пакеты JavaScript могут стать очень большими и повлиять на загрузку страницы. Было бы более эффективно, если бы мы могли разделить компоненты, соответствующие разным маршрутам, на разные блоки кода, а затем загружать соответствующие компоненты при доступе к маршруту.

🐛: обновить контент

ошибки eslint могут сообщаться при использовании импортаParsing error: Unexpected token importeslint, на этот раз вам нужно установитьbabel-eslint.

npm i babel-eslint -D

Затем настройте в .eslintrc.js:

module.exports = {
...
  parserOptions: {
+    parser: 'babel-eslint',
    ecmaVersion: 2018,
    sourceType: 'module'
  }
...
}

ленивая загрузка

component: () => import(/webpackChunkName:'name'/'@/views/name.vue')

router/index.jsМодификация файла:

import Vue from 'vue';
import VueRouter from 'vue-router';
import main from '@/views/main.vue';

Vue.use(VueRouter);

const routes = [
  {
    path: '/',
    name: 'main',
    component: main
  },
  {
    path: '/auth',
    name: 'auth',
    meta: {
      // auth字段表示需要权限才能进入
      auth: true
    },
    component: () => import(/*webpackChunkName:'auth'*/'@/views/auth.vue')
  },
  {
    // 作为拦截后的展示页面
    path: '/403',
    name: '403',
    // 这里的import eslint一直报错，有人知道是为什么吗。。
    component: () => import(/*webpackChunkName:'403'*/'@/views/403.vue')
  },
  {
    // 所有不存在的路由都会跳转到404
    path: '*',
    name: '404',
    component: () => import(/*webpackChunkName:'404'*/'@/views/404.vue')
  }
];

const router = new VueRouter({
  routes
});

export default router;

перехват маршрута

добавить 3 страницыauth.vue,403.vue,404.vue, настройка содержимого, используемая для демонстрации примера перехвата маршрута.

  • auth.vueНа странице отображается контент, требующий разрешения
  • 403.vueПодскажите нет разрешения

Исправлятьmain.js.

...
router.beforeEach((to, from, next) => {
  if (to.meta.auth) {
    if (!localStorage.getItem('token')) {
      router.push('/403');
    } else {
      next();
    }
  } else {
    next();
  }
});
...

В настоящее время, если вы хотите ввести авторизацию, вы не можете войти, и вы сразу попадете на страницу 403.localStorageдобавлено вtoken: value.

filter

К .v ue js.org/v2/ Дорого / fi ...

Vue.js позволяет настраивать фильтры, которые можно использовать для некоторых распространенных форматов текста. Фильтры можно использовать в двух местах: интерполяция двойной фигурной скобки и выражения v-bind (последнее поддерживается начиная с версии 2.1.0+). Фильтры следует добавлять в конце выражений JavaScript, обозначенных символом «труба».

<!-- 在双花括号中 -->
{{ message | capitalize }}

<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>

Создайтеfilter.jsдокумент

Вот пример отформатированной функции

// 时间格式化
const dateFormatter = (formatter, date) => {
  date = date ? new Date(date) : new Date();
  const Y = date.getFullYear() + '';
  const M = date.getMonth() + 1;
  const D = date.getDate();
  const H = date.getHours();
  const m = date.getMinutes();
  const s = date.getSeconds();
  return formatter
    .replace(/YYYY|yyyy/g, Y)
    .replace(/YY|yy/g, Y.substr(2, 2))
    .replace(/MM/g, (M < 10 ? '0' : '') + M)
    .replace(/DD/g, (D < 10 ? '0' : '') + D)
    .replace(/HH|hh/g, (H < 10 ? '0' : '') + H)
    .replace(/mm/g, (m < 10 ? '0' : '') + m)
    .replace(/ss/g, (s < 10 ? '0' : '') + s);
};
// 方便扩展
export { dateFormatter }

определить глобальный фильтр и использовать

main.jsИсправлять:

...
import * as filters from './filter';

Object.keys(filters).forEach(key => {
  Vue.filter(key, filters[key]);
});
...

использовать в коде

<template>
  <div>
    <p>需要被拦截的页面</p>
    <div class="money">{{ date | dateFormatter('YYYY-MM-DD')}}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      date: new Date()
    }
  }
}
</script>

На этом статья заканчивается, конструкция проекта vue будет выложена на GitHub, а друзья, которым она нужна, смогут тянуть ее сами, на ее основе будут следующие статьи. Если есть что-то, что нужно оптимизировать, или если у вас есть предложения получше, вы можете оставить сообщение в области комментариев (представьте, что его читает много людей).

Репозиторий на гитхабе:GitHub.com/Скоро ночь/Интернет…
Ветви кода по адресу:/tree/dev/20200624-Somefeatures

Категории