Подведение итогов за 2 года практического опыта проекта Vue

JavaScript Vue.js
Подведение итогов за 2 года практического опыта проекта Vue

предисловие

Как один из трех основных интерфейсных фреймворков, vue в настоящее время широко используется в Китае.Благодаря своей легкости и прогрессивному дизайну, он используется не только в системах ПК, но также в мобильном и настольном программном обеспечении (electronjs). , и т. д. также широко используются, и превосходные фреймворки с открытым исходным кодом, такие как elementUI, iView, ant-design-vue и т. д., также значительно снижают стоимость разработки для разработчиков и значительно повышают эффективность разработки. Когда я впервые столкнулся с vue, я также использовал фреймворк iview.По личному опыту, он действительно прост в использовании и мощен.

Автор имеет двухлетний опыт работы с проектами Vue.Основываясь на Vue, я делал мобильные проекты и ERP-системы на ПК.Хотя я обычно использую стек технологий реагирования в своей работе, я все еще накапливаю много лучших практик, связанных с Vue, и сделать некоторые на основе Vue. Vue - это проект с открытым исходным кодом, поэтому я думаю, что это лучший рост, чтобы обобщить опыт проекта Vue. Я также надеюсь поделиться некоторым опытом и мыслями с друзьями, которые хотят связаться с Vue framework или работать с Вью в этом году.

ты получишь

  • Vue framework: используйте меры предосторожности и лучший опыт
  • Сводка по опыту настройки проекта Vue
  • Краткий обзор опыта проектирования компонентов Vue
  • Архитектура проекта Vue и исследование сервисов

текст

Эта статья представляет собой не только сводку некоторых ям и проектного опыта, на которые наступил Vue, но и методологию и идеи проектирования компонентов в процессе использования фреймворка (vue/react), и, наконец, некоторые личные резюме инженерной мысли. чтобы друзья с большим опытом могли общаться и исследовать тайну Vue.

Прежде чем приступить к статье, автор рекомендует вам иметь определенное представление об основах javascript, css и html, потому что использование фреймворков может не позволить удовлетворить потребности и функции бизнеса. Интернета, поэтому я надеюсь, что вы знакомы со следующими базовыми знаниями. Если вы не знакомы с ними, вы можете потратить время на их изучение.

JavaScript:

  • Использование общих методов массивов, таких как обход forEach, map, filter, every, some, reduce, а также методы операций для сращивания, среза, объединения, push, shift, pop, sort и т. д.
  • Базовые структуры данных, ссылочные типы (объекты, массивы)
  • Основные логические операции if else, switch, тернарные операции: ? , циклы for/while и т. д.
  • Строковый общий API (например, replace, slice, substr, indexOf)
  • Основное регулярное использование
  • область видимости переменных, цепочка областей видимости, подъем переменных, подъем объявлений функций
  • Базовое использование объектов, объектно-ориентированное программирование

CSS:

  • Базовая блочная модель (граница/содержимое/заполнение и т. д.)
  • 4 общих позиционирования (статическое/абсолютное/относительное/фиксированное)
  • Общие методы компоновки (плавающая компоновка/гибкая компоновка, гибкая/адаптивная компоновка/сетка с сеткой)
  • Базовый стиль CSS3 и анимация (переход, анимация)

HTML:

  • Новая вкладка «Основное использование» и «Использование»
  • Роль и использование тега заголовка (в основном использование мета-атрибута)

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

1. Примечания и рекомендации по использованию vue framework

Самый быстрый способ изучить vue — это практика. Далее автор подытожит некоторый практический опыт разработки проектов Vue.

1.1 Жизненный цикл Vue и приложения в разных жизненных циклах

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

  • beforeCreate: когда выполняется жизненный цикл beforeCreate, данные в данных и методах не были инициализированы, поэтому данные в данных и методы в методах не могут быть использованы в это время.
  • created: данные и методы инициализируются, и в это время можно использовать методы в методах и данные в данных.
  • beforeMount: Шаблон шаблона скомпилирован, но еще не смонтирован на странице, в это время страница находится в прежнем состоянии
  • mounted: на этом этапе инициализация экземпляра Vue завершена, и DOM смонтирован.Вы можете напрямую управлять DOM или использовать третью библиотеку DOM.
  • beforeUpdate: На данный момент данные обновлены, но страница не синхронизирована
  • updated: И данные, и страница были обновлены
  • beforeDestory: экземпляр Vue переходит в фазу уничтожения, но доступны все данные и методы, директивы, фильтры и т. д.
  • destroyed: На данный момент компонент уничтожен, данные, методы и т. д. недоступны.

Согласно приведенному выше введению, когда страница загружается в первый раз, она будет выполнена Четыре жизненных цикла beforeCreate, created, beforeMount, Mount, поэтому мы обычно обрабатываем HTTP-запросы для получения данных или выполняем некоторую обработку данных на этапе создания, мы будем управлять dom на этапе монтирования, например, используя jquery или эта другая сторонняя библиотека dom. Во-вторых, в соответствии с различными данными и состояниями страниц в вышеуказанных различных циклах мы также можем выполнять больше операций, поэтому состояние разработки каждого жизненного цикла очень важно и должно быть понято, чтобы мы могли иметь больший контроль над Vue.

1.2 Часто используемые инструкции vue и использование динамических инструкций

Директивы — это специальные атрибуты с префиксом v. Обычно используемые директивы для vue:

  • v-bind для оперативного обновления атрибутов HTML
  • v-if решает, следует ли вставлять/удалять элементы на основе истинного или ложного значения выражения
  • v-on используется для прослушивания событий DOM
  • v-show используется, чтобы решить, отображать ли элемент, нижний слой реализуется display: none
  • v-html вставляет html-контент внутрь dom
  • v-для цикла
  • v-text отображает текст содержимого указанного dom
  • v-cloak работает с правилами CSS, такими как [v-cloak] { display: none }, чтобы скрыть нескомпилированные теги Mustache, пока экземпляр не будет готов.

Выше приведены наиболее часто используемые инструкции, и конкретное использование не будет перечисляться по отдельности.Среди них v-cloak в основном используется, чтобы избежать проблемы мерцания при загрузке страницы.Это можно решить, комбинируя [ v-cloak] {display: none} метод CSS.вопрос. Что касается динамических параметров команды, использование также очень простое.Хотя он был недавно добавлен в 2.6.0, метод очень гибкий.Конкретное использование заключается в следующем:

<a v-on:[eventName]="doSomething"> ... </a>

Мы можем динамически переключать имя события в зависимости от конкретной ситуации, чтобы связать единую функцию.

1.3 Общие модификаторы и функции Vue

  1. модификатор события
  • .stop останавливает всплытие события
  • .prevent предотвратить поведение события по умолчанию
  • Обратный вызов запускается только тогда, когда элемент, к которому привязано событие .self, срабатывает сам.
  • Событие .once может быть запущено только один раз, во второй раз оно не будет запущено.
  • .native превращает компонент vue в обычный html, чтобы он мог прослушивать нативные события, такие как щелчок Конкретное использование заключается в следующем:
<Tag @click.native="handleClick">ok</Tag>
  1. модификатор формы
  • .lazy обновить представление, когда курсор покидает поле ввода после ввода содержимого
  • .trim отфильтровать начальные и конечные пробелы
  • .number Если вы сначала введете числа, это ограничит вас только числами; если вы сначала введете строки, это эквивалентно тому, что вы не добавляете .number

Использование заключается в следующем:

<input type="text" v-model.trim="value">

Есть также много модификаторов, таких как клавиатура, мышь и другие модификаторы, и все, кто заинтересован, могут изучать и исследовать самостоятельно.

1.4 Схема связи между компонентами, родительскими и дочерними компонентами

Схема связи между компонентами:

  • Через шину событий (шину), то есть через публикацию и подписку
  • vuex

Родительский и дочерний компоненты:

  • Родительский компонент передает данные самостоятельному компоненту через реквизиты.
  • Подкомпоненты связывают пользовательские события и вызывают пользовательские события через this.$emit(event,params)
  • Используйте предоставленный vueparent /методы children и $refs для общения

1.5 Vue реализует загрузку компонентов по требованию

Загрузка компонентов по требованию является частью оптимизации производительности проекта, а также может сократить время рендеринга первого экрана.Загрузка компонентов по требованию, используемых автором в проекте, выглядит следующим образом:

  1. Используйте () => import(), конкретный код выглядит следующим образом:
<template>
    <div>
       <ComponentA />
       <ComponentB />
    </div>
</template>
<script>
const ComponentA = () => import('./ComponentA')
const ComponentB = () => import('./ComponentB')
export default {
    // ...
    components: {
    ComponentA, 
    ComponentB 
    },
    // ...
}
</script>
  1. Используйте разрешить => требовать (['./ComponentA'], разрешить) следующим образом:
<template>
    <div>
       <ComponentA />
    </div>
</template>
<script>
const ComponentA = resolve => require(['./ComponentA'], resolve)
export default {
    // ...
    components: {
    ComponentA
    },
    // ...
}
</script>

1.6 Некоторые свойства и функции vuex, а также основной способ использования vuex

Vuex — это шаблон управления состоянием, разработанный для приложений Vue.js. Он использует централизованное хранилище для управления состоянием всех компонентов приложения и использует соответствующие правила, чтобы гарантировать предсказуемое изменение состояния.

Основной рабочий режим vuex показан на следующем рисунке:

Изменения состояния полностью контролируются мутациями, Нам не нужно использовать vuex для любого проекта, для средних и крупных сложных проектов, когда есть много состояний, которые нужно разделить, использование vuex — лучший выбор. Далее я подробно расскажу о концепции и функциях каждого API.

  • state Единое дерево состояний, содержащее все состояния уровня приложения с одним объектом и существующее как единый источник данных.
  • Геттеры похожи на вычисляемые свойства, возвращаемое геттером значение кэшируется в соответствии с его зависимостями и будет пересчитываться только при изменении его зависимостей. Например следующий случай:
const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: '...', done: true },
      { id: 2, text: '...', done: false }
    ]
  },
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    }
  }
})
// 访问getters里的属性
this.$store.getters.doneTodos
  • Мутация — единственный способ изменить состояние в хранилище Vuex, вариант использования следующий:
const store = new Vuex.Store({
  state: {
    num: 1
  },
  mutations: {
    add (state) {
      // 变更状态
      state.num++
    }
  }
})

// 在项目中使用mutation
store.commit('add')
// 添加额外参数
store.commit('add', 10)
  • Действие Действие отправляет мутацию вместо прямого изменения состояния. Оно может включать в себя любую асинхронную операцию. Конкретное использование выглядит следующим образом:
const store = new Vuex.Store({
  state: {
    num: 0
  },
  mutations: {
    add (state) {
      state.num++
    }
  },
  actions: {
    add (context) {
      context.commit('add')
    },
    asyncAdd ({ commit }) {
    setTimeout(() => {
      commit('add')
    }
  }
})
// 分发action
store.dispatch('add')
// 异步action
store.dispatch('asyncAdd')
// 异步传参
store.dispatch('asyncAdd', { num: 10 })
  • Модуль разбивает магазин на модули. Каждый модуль имеет свое состояние, мутации, действия, геттеры и даже вложенные подмодули.

У автора больше практического опыта, и он резюмировал набор стандартных режимов использования, взяв в качестве примера предыдущую авторскую XPXMS с открытым исходным кодом, следующим образом:

Каталог хранилища используется для организации кода vuex.Я управляю действиями, мутациями и состоянием в отдельных файлах, чтобы ими было легко управлять и запрашивать после того, как проект станет большим. Давайте посмотрим, как организован этот файл:

// type.ts 
// 用来定义state等的类型文件
export interface State {
    name: string;
    isLogin: boolean;
    config: Config;
    [propName: string]: any;  // 用来定义可选的额外属性
}

export interface Config {
    header: HeaderType,
    banner: Banner,
    bannerSider: BannerSider,
    supportPay: SupportPay
}

export interface Response {
    [propName: string]: any;
}

// state.ts
// 定义全局状态
import { State } from './type'
export const state: State = {
    name: '',
    isLogin: false,
    curScreen: '0', // 0为pc， 1为移动
    config: {
        header: {
            columns: ['首页', '产品', '技术', '运营', '商业'],
            height: '50',
            backgroundColor: '#000000',
            logo: ''
        }
    },
    // ...
    articleDetail: null
};

// mutation.ts
import { 
    State,
    Config, 
    HeaderType, 
    Banner,
    BannerSider,
    SupportPay
} from './type'

export default {
    // 预览模式
    setScreen(state: State, payload: string) {
        state.curScreen = payload;
    },

    // 删除banner图
    delBanner(state: State, payload: number) {
        state.config.banner.bannerList.splice(payload, 1);
    },

    // 添加banner图
    addBanner(state: State, payload: object) {
        state.config.banner.bannerList.push(payload);
    },

    // ...
};

// action.ts
import { 
    HeaderType,
    Response
 } from './type'
import http from '../utils/http'
import { uuid, formatTime } from '../utils/common'
import { message } from 'ant-design-vue'

export default {
    /**配置 */
    setConfig(context: any, paylod: HeaderType) {
        http.get('/config/all').then((res:Response) => {
            context.commit('setConfig', res.data)
        }).catch((err:any) => {
            message.error(err.data)
        })
    },
    /**header */
    saveHeader(context: any, paylod: HeaderType) {
        http.post('/config/setHeader', paylod).then((res:Response) => {
            message.success(res.data)
            context.commit('saveHeader', paylod)
        }).catch((err:any) => {
            message.error(err.data)
        })  
    },
    // ...
};

// index.ts
import Vue from 'vue';
import Vuex from 'vuex';
import { state } from './state';
import mutations from './mutation';
import actions from './action';

Vue.use(Vuex);

export default new Vuex.Store({
  state,
  mutations,
  actions
});

// main.ts
// 最后挂载到入口文件的vue实例上
import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store/';
import './component-class-hooks';
import './registerServiceWorker';

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount('#app');

Мы можем использовать этот метод для организации и управления кодом, связанным с vuex, в реальных проектах.

1.7 Базовый режим использования vue-router, а также использование и функции навигационных хуков

Вы не должны быть незнакомы с использованием vue-router.Вот случай непосредственно:

// router.ts
import Vue from 'vue';
import Router from 'vue-router';
import Home from './views/admin/Home.vue';

Vue.use(Router);

const router =  new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      component: Home,
      beforeEnter: (to, from, next) => {
        next();
      },
      children: [
        {
          // 当 /user/:id/profile 匹配成功，
          // UserProfile 会被渲染在 User 的 <router-view> 中
          path: '',
          name: 'header',
          component: () => import(/* webpackChunkName: "header" */ './views/admin/subpage/Header.vue'),
        },

        {
          path: '/banner',
          name: 'banner',
          component: () => import(/* webpackChunkName: "banner" */ './views/admin/subpage/Banner.vue'),
        },
        {
          path: '/admin',
          name: 'admin',
          component: () => import(/* webpackChunkName: "admin" */ './views/admin/Admin.vue'),
        },
      ],
    },
    {
      path: '/login',
      name: 'login',
      component: () => import(/* webpackChunkName: "login" */ './views/Login.vue'),
      meta:{
        keepAlive:false //不需要被缓存的组件
      }
    },
    {
      path: '*',
      name: '404',
      component: () => import(/* webpackChunkName: "404" */ './views/404.vue'),
    },
  ],
});

// 路由导航钩子的用法
router.beforeEach((to, from, next) => {
  if(from.path.indexOf('/preview') < 0) {
    sessionStorage.setItem('prevToPreviewPath', from.path);
  }
  next();
})

export default router

Вышеприведенный случай является типичной конфигурацией статической маршрутизации и использованием навигационных крючков (как загружать компоненты маршрутизации, динамически загружать компоненты маршрутизации, конфигурация маршрутизации 404 страницы и использование навигационных крючков маршрутизации). Если вы работаете в качестве серверной системы, часто используется система разрешений, поэтому обычно используется динамическая маршрутизация конфигурации.Благодаря методу маршрутизации, согласованному между интерфейсом и сервером, файл конфигурации маршрутизации обрабатывается сервером. -end с разрешениями разных пользователей. Поскольку детали дизайна громоздки и включают в себя предварительные и внутренние соглашения, здесь хорошо просто обсудить идеи.

1.8 Примечания по обнаружению изменений в vue

Из-за ограничений современного JavaScript Vue не может обнаруживать добавление или удаление свойств объекта. Поскольку Vue выполняет преобразования геттера/установщика свойств при инициализации экземпляра, свойство должно существовать в объекте данных, чтобы Vue мог преобразовать его в реактивный. Также есть случай, когда vue не может обнаружить изменение значения свойства данных как массива или объекта, поэтому нам нужно создать новый объект с исходным объектом и свойствами объекта, которые нужно смешать. Вы можете использовать this.$set или глубокую копию объекта.Если это массив, вы можете использовать splice, оператор распространения и другие методы для обновления.

1.9 Использовать кеш маршрута поддержки активности для указанных страниц

keep-alive — это встроенный компонент Vue, который может сохранять состояние в памяти во время переключения компонентов, предотвращая повторный рендеринг DOM. Мы можем установить, кэшируются ли определенные страницы, используя:

  1. Через файл конфигурации маршрутизации и настройки просмотра маршрутизатора:
// routes 配置
export default [
  {
    path: '/A',
    name: 'A',
    component: A,
    meta: {
      keepAlive: true // 需要被缓存
    }
  }, {
    path: '/B',
    name: 'B',
    component: B,
    meta: {
      keepAlive: false // 不需要被缓存
    }
  }
]

Конфигурация просмотра маршрута:

// 路由设置
<keep-alive>
    <router-view v-if="$route.meta.keepAlive">
        <!-- 会被缓存的视图组件-->
    </router-view>
</keep-alive>

<router-view v-if="!$route.meta.keepAlive">
    <!-- 不需要缓存的视图组件-->
</router-view>
  1. Через ключевой атрибут router-view Конкретные методы заключаются в следующем:
<template>
  <div id="app">
    <keep-alive>
      <router-view :key="key" />
    </keep-alive>
  </div>
</template>

<script lang="ts">
import { Vue } from 'vue-property-decorator';
import Component from 'vue-class-component';
@Component
export default class App extends Vue {
  get key() {
    // 缓存除预览和登陆页面之外的其他页面
    console.log(this.$route.path)
    if(this.$route.path.indexOf('/preview') > -1) {
      return '0'
    }else if(this.$route.path === '/login') {
      return '1'
    }else {
      return '2'
    }
  }
}
</script>

1.10 Краткое изложение общих функций инструментов vue

Кратко опишите наиболее часто используемые автором инструментальные функции в проекте vue.

  • идентифицировать т.е. браузер
/**
 * 识别ie--浅识别
 */
export const isIe = () => {
    let explorer = window.navigator.userAgent;
        //判断是否为IE浏览器
    if (explorer.indexOf("MSIE") >= 0) {
        return true;
    }else {
        return false
    }
}
  • цвет шестнадцатеричный в rgba
/**
 * 颜色转换16进制转rgba
 * @param {String} hex 
 * @param {Number} opacity 
 */
export function hex2Rgba(hex, opacity) {
	if(!hex) hex = "#2c4dae";
    return "rgba(" + parseInt("0x" + hex.slice(1, 3)) + "," + parseInt("0x" + hex.slice(3, 5)) + "," + parseInt("0x" + hex.slice(5, 7)) + "," + (opacity || "1") + ")";
}
  • Удалить теги HTML
// 去除html标签
export const htmlSafeStr = (str) => {
    return str.replace(/<[^>]+>/g, "")
}
  • Получить объект параметра URL
/* 获取url参数 */
export const getQueryString = () => {
    let qs = location.href.split('?')[1] || '',
        args = {},
        items = qs.length ? qs.split("&") : [];
        items.forEach((item,i) => {
            let arr = item.split('='),
                name = decodeURIComponent(arr[0]),
                value = decodeURIComponent(arr[1]);
                name.length && (args[name] = value)
        })
    return args;
}
  • Разобрать параметры URL
/* 解析url参数 */
export const paramsToStringify = (params) => {
    if(params){
        let query = [];
        for(let key in params){
            query.push(`${key}=${params[key]}`)
        }
        return `${query.join('&')}`
    }else{
        return ''
    }
}
  • преобразовать данные в массив
export const toArray = (data) => {
    return Array.isArray(data) ? data : [data]
}
  • URL-адрес перехода с параметрами (режим хеширования)
/**
 *  带参数跳转url（hash模式）
 * @param {String} url 
 * @param {Object} params 
 */
export const toPage = (url, params) => {
    if(params){
        let query = [];
        for(let key in params){
            query.push(`${key}=${params[key]}`)
        }
        window.location.href = `./index.html#/${url}?${query.join('&')}`;
    }else{
        window.location.href = `./index.html#/${url}`;
    }
}
  • Управление отображением строк символов и отображение многоточия, если количество символов превышает указанное число.
/**
 * 指定字符串 溢出显示省略号
 * @param {String} str
 * @param {Number} num
 */
export const getSubStringSum = (str = "", num = 1) => {
    let newStr;
    if(str){
        str = str + '';
        if (str.trim().length > num ) {
            newStr = str.trim().substring(0, num) + "...";
        } else {
            newStr = str.trim();
        }
    }else{
        newStr = ''
    }
    return newStr;
}
  • сгенерировать UUID
/**
 * 生成uuid
 * @param {number} len 生成指定长度的uuid
 * @param {number} radix uuid进制数
 */
export function uuid(len, radix) {
    let chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('');
    let uuid = [], i;
    radix = radix || chars.length;
 
    if (len) {
      for (i = 0; i < len; i++) uuid[i] = chars[0 | Math.random()*radix];
    } else {
      let r;
 
      uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-';
      uuid[14] = '4';
 
      for (i = 0; i < 36; i++) {
        if (!uuid[i]) {
          r = 0 | Math.random()*16;
          uuid[i] = chars[(i == 19) ? (r & 0x3) | 0x8 : r];
        }
      }
    }
 
    return uuid.join('');
}
  • Сгенерировать строку времени в указанном формате
/**
 * 生成指定格式的时间
 * @param {*} timeStemp 时间戳
 * @param {*} flag 格式符号
 */
export function formatTime(timeStemp, flag) {
    let time = new Date(timeStemp);
    let timeArr = [time.getFullYear(), time.getMonth() + 1, time.getDate()];
    return timeArr.join(flag || '/')
}

1.11 Как повторно инкапсулировать http-запрос с перехватом запроса/ответа на основе аксиом

Это в основном для понимания axios.Вы можете изучить официальную документацию axios.Вот шаблон вторичной упаковки:

import axios from 'axios'
import qs from 'qs'

// 请求拦截
axios.interceptors.request.use(config => {
  // 此处可以封装一些加载状态
  return config
}, error => {
  return Promise.reject(error)
})

// 响应拦截
axios.interceptors.response.use(response => {
  return response
}, error => {
  return Promise.resolve(error.response)
})

function checkStatus (response) {
  // 此处可以封装一些加载状态
  // 如果http状态码正常，则直接返回数据
  if(response) {
    if (response.status === 200 || response.status === 304) {
      return response.data
      // 如果不需要除了data之外的数据，可以直接 return response.data
    } else if (response.status === 401) {
      location.href = '/login';
    } else {
      throw response.data
    }
  } else {
    throw {data:'网络错误'}
  }
  
}

// axios默认参数配置
axios.defaults.baseURL = '/api/v0';
axios.defaults.timeout = 10000;

// restful API封装
export default {
  post (url, data) {
    return axios({
      method: 'post',
      url,
      data: qs.stringify(data),
      headers: {
        'X-Requested-With': 'XMLHttpRequest',
        'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
      }
    }).then(
      (res) => {
        return checkStatus(res)
      }
    )
  },
  get (url, params) {
    return axios({
      method: 'get',
      url,
      params, // get 请求时带的参数
      headers: {
        'X-Requested-With': 'XMLHttpRequest'
      }
    }).then(
      (res) => {
        return checkStatus(res)
      }
    )
  },
  del (url, params) {
    return axios({
      method: 'delete',
      url,
      params, // get 请求时带的参数
      headers: {
        'X-Requested-With': 'XMLHttpRequest'
      }
    }).then(
      (res) => {
        return checkStatus(res)
      }
    )
  }
}

Этот шаблон является просто общей структурой, и вы можете уточнить ее в соответствии с бизнес-требованиями.Этот случай предоставляет методы спокойного интерфейса, такие как получение/публикация/удаление/помещение и т. д.

1.12 Общие компоненты сообщества Vue, плагины

Чтобы повысить эффективность разработки проекта Vue, автор также будет напрямую использовать сторонние плагины.Давайте разберемся с часто используемыми компонентами и библиотеками сообщества Vue.

  1. Фреймворк пользовательского интерфейса
  1. компонент сообщества

Другие компоненты можно найти насообщество плагинов vueПроверять.

2. Сводка по опыту настройки проекта Vue

После разговора об опыте проекта vue, чтобы каждый мог нести независимую ответственность за проект, нам также необходимо знать шаги для создания проекта с нуля и настройки структуры проекта, которая соответствует фактической ситуации проекта. Например, некоторые компании будут использовать сборку vue+ element+vue+less, некоторые компании используют vue+iview+vue+sass или другие технологические стеки, поэтому нам нужно иметь возможность контролировать, мы должны быть знакомы с конфигурацией webpack. или vue-cli3 scaffolding, у автора есть некоторый опыт. Подробные статьи о создании пользовательских проектов с помощью webpack и vue-cli3 здесь не перечислены из-за ограниченного места. Заинтересованные друзья могут обратиться к следующим двум статьям:

3. Краткий обзор опыта проектирования компонентов Vue

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

Что касается базового компонента, как мы начинаем его проектировать? В первую очередь, автор считает, что надо начинать с требований и функций, сначала разделить функциональные границы компонентов, что они могут делать, а уже после их уточнения начинать писать компоненты.

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

  • Определение границ и функционального позиционирования конструкций компонентов
  • Компоненты пытаются следовать принципу единой ответственности и использовать композицию вместо функциональной гибридизации.
  • Воздействие свойств компонентов должно быть умеренным, а не переходным воздействием свойств.
  • Инкапсуляция компонентов должна учитывать возможности повторного использования, компоновки и настройки.
  • Хорошо разделите дизайн на типы компонентов (компоненты отображения, компоненты ввода, базовые компоненты, компоненты макета, компоненты обратной связи, бизнес-компоненты и т. д.).

Автор принимает компонент загрузки файлов, ранее выпущенный в сообществе с открытым исходным кодом в качестве примера, чтобы проиллюстрировать примеру, код выглядит следующим образом:

<template>
    <div>
        <a-upload
            :action="action"
            listType="picture-card"
            :fileList="fileList"
            @preview="handlePreview"
            @change="handleChange"
            :remove="delFile"
            :data="data"
            >
            <template v-if="!fileList.length && defaultValue">
                <img :src="defaultValue" alt="" style="width: 100%">
            </template>
            <template v-else>
                <div v-if="fileList.length < 2">
                    <a-icon type="plus" />
                    <div class="ant-upload-text">上传</div>
                </div>
            </template>
        </a-upload>
        <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
            <img alt="example" style="width: 100%" :src="previewImage" />
        </a-modal>
    </div>   
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator';
@Component
export default class Upload extends Vue {
  @Prop({ default: 'https://www.mocky.io/v2/5cc8019d300000980a055e76' })
  action!: string;

  @Prop()
  defaultValue: string;

  @Prop()
  data: object;

  @Prop({ default: function() {} })
  onFileDel: any;

  @Prop({ default: function() {} })
  onFileChange: any;

  public previewVisible: boolean =  false;
  public previewImage: string =  '';
  public fileList: object[] = [];

  // 预览图片
  public handlePreview(file: any) {
    this.previewImage = file.url || file.thumbUrl;
    this.previewVisible = true;
  }
  
  // 删除文件和回调
  public delFile(file: any) {
    this.fileList = [];
    this.onFileDel();
  }

  // 文件上传变化的处理函数
  public handleChange({ file }: any) {
    this.fileList = [file];
    if(file.status === 'done') {
      this.onFileChange(file.response.url);
    } else if(file.status === 'error') {
      this.$message.error(file.response.msg)
    }
  }
  // 取消预览
  public handleCancel() {
      this.previewVisible = false;
  }
}
</script>

Вышеупомянутый предварительный просмотр загрузки файла реализован ts, но идеи дизайна те же, вы можете обратиться и обменяться. О том, как спроектировать надежный компонент, автор также написал соответствующие статьи, общая идея, похоже, та же, вы можете обратиться к:

Идеи и методы проектирования компонентов не имеют ничего общего с конкретными фреймворками, поэтому основой проектирования компонентов является методология.Только постоянно обобщая и абстрагируя в проекте, мы можем получить более глубокое понимание проектирования компонентов.

4. Архитектура проекта Vue и изучение сервисов

Вот набор ментальных карт, которые автор резюмирует:

Это немного похоже на архитектуру микроинтерфейса, но нужно учитывать множество деталей. Эта архитектура подходит для среды, в которой различные подсистемы развертываются и разрабатываются независимо, и нет необходимости учитывать выбор конкретного стека технологий.Одна и та же структура использует один и тот же набор самостоятельно созданных библиотек компонентов для повторного использования компонентов.Рекомендуется учитывать компоненты в начале разработки проекта, добиваться максимального разделения и разъединения функций. Автор потратит время наедине, чтобы обобщить некоторые конкретные дизайнерские идеи и планы реализации архитектуры микро-интерфейса, а желающие могут обсудить и пообщаться вместе.

5. библиотека компонентов xui

Автор опубликовал компоненты, которые он реализовал ранее в npm.Если вам интересно, вы можете установить его напрямую с npm и использовать его следующим образом:

npm i @alex_xu/xui

// 导入xui
import { 
  Button,
  Skeleton,
  Empty,
  Progress,
  Tag,
  Switch,
  Drawer,
  Badge,
  Alert
} from '@alex_xu/xui'

Библиотека компонентов поддерживает импорт по запросу, нам нужно только настроить в проекте babel-plugin-import, конкретная конфигурация выглядит следующим образом:

// .babelrc
"plugins": [
  ["import", { "libraryName": "@alex_xu/xui", "style": true }]
]

Скриншот библиотеки npm выглядит следующим образом:

Наконец

Если вы хотите узнать большеигра Н5, webpack,node,gulp,css3,javascript,nodeJS,визуализация данных холстаВ ожидании передовых знаний и реальных сражений, присоединяйтесь к нам в общедоступном аккаунте «Интересный передний конец», чтобы вместе учиться и обсуждать, а также вместе исследовать границы переднего плана.

больше рекомендаций

Категории