Создание универсальной полки для мобильных терминалов на базе vue+vant

Первоначальный замысел проекта

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

Исходный код проекта находится в конце статьи, не забудьте проверить его~

Основная функция

Общие псевдонимы каталогов
Адаптация Ванта/Рема
поддержка scss, _mixin.scss, _variables.scss
Анимация переключения страниц + KeepAlive
Заголовок страницы
Автоматическая регистрация: автоматическая регистрация таблицы маршрутизации / автоматическая регистрация введения значка Vuex/svg
mock server
инкапсуляция axios, управление API
Аутентификация пользователя
vuex-loading
vo-pages/dayjs/vconsole
Оптимизация производственной среды

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

alias配置

Адаптация Ванта/Рема

Согласно официальному сайту Ванта, компоненты импортируются автоматически по требованию, так же на официальном сайте Ванта есть рекомендуемые конфигурации для адаптации Rem.Используйте в соответствии с инструкциями официального сайта. Следует отметить, что в настройках postcss под autoprefixerbrowsersнеобходимо заменить наoverrideBrowserslist, иначе будет выдано сообщение об ошибке. Как показано на рисунке
postcss配置

поддержка scss, _mixin.scss, _variables.scss

Выберите scss в качестве предварительной обработки css и глобально введите миксин, переменные, common.scss.

css: {
    // 是否使用css分离插件 ExtractTextPlugin
    extract: !!IS_PRODUCTION,
    // 开启 CSS source maps?
    sourceMap: false,
    // css预设器配置项
    // 启用 CSS modules for all css / pre-processor files.
    modules: false,
    loaderOptions: {
      sass: {
        data: '@import "style/_mixin.scss";@import "style/_variables.scss";@import "style/common.scss";' // 全局引入
      }
    }
  }

Анимация переключения страниц + KeepAlive

Используйте vuex для доступа/обновления направления переключения страниц, взаимодействуйте с переходом vue для выполнения анимации переключения страниц, а маршрутизатор устанавливает keepAlive, чтобы определить, требуется ли буферизация страницы.

// vuex中
state: {
  direction: 'forward' // 页面切换方向
},
mutations: {
  // 更新页面切换方向
  updateDirection (state, direction) {
    state.direction = direction
  }
},
// App.vue
<template>
  <div id="app">
    <transition :name="transitionName">
      <keep-alive v-if="$route.meta.keepAlive">
        <router-view class="router"></router-view>
      </keep-alive>
      <router-view class="router" v-else></router-view>
    </transition>
  </div>
</template>

Заголовок страницы

Добавьте заголовок метаданных в конфигурацию страницы vue-router, сотрудничайте сvue-routerизbeforeEachЗарегистрируйте пользователя Front Guard, чтобы получить заголовок конфигурации страницы.

// get-page-title.js
import defaultSettings from '@/settings'

const title = defaultSettings.title || 'H5Vue'

export default function getPageTitle (pageTitle) {
  if (pageTitle) {
    return `${pageTitle} - ${title}`
  }
  return `${title}`
}
// permission.js
router.beforeEach((to, from, next) => {
  // set page title
  document.title = getPageTitle(to.meta.title)
}

автоматическая регистрация

Давайте сначала узнаемrequire.context():

ты можешь пройтиrequire.context()Функция для создания собственного контекста.

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

webpack будет анализировать код в сборкеrequire.context().

Выше это исходные слова официального сайта.Может быть, вы не слишком понимаете, как я.Грубо говоря, его можно использовать для импорта модулей.

Давайте посмотрим, как его использовать, файловая структура под моим роутером такая:

router-tree

// 利用require.context()自动引入article.js和user.js
const routerContext = require.context('./', true, /\.js$/)
routerContext.keys().forEach(route => {
  // 如果是根目录的 index.js 、不处理
  if (route.startsWith('./index')) {
    return
  }
  const routerModule = routerContext(route)
  /**
   * 兼容 import export 和 require module.export 两种规范
   */
  routes = routes.concat(routerModule.default || routerModule)
})

Следует отметить, что страницу 404 необходимо привязать к массиву маршрутизации после ее автоматического импорта, иначе она будет сопоставлена со страницей 404 заранее.

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

mock server

К серверной части Mock можно напрямую обратитьсяvue-element-adminфиктивная схема

пакет аксиом

В части axios настраивается baseUrl и таймаут, а в заголовок с помощью перехватчика добавляется Token пользователя, что удобно для следующей аутентификации пользователя, и делается Toast-подсказка при ошибках. Конкретный код ошибки зависит от каждой компании. Этот проект используется только в качестве примера.

Аутентификация пользователя

существуетvue-routerизbeforeEach, добавьте функцию аутентификации пользователя. Когда пользователь входит в систему, файл cookie используется для постоянного сохранения токена пользователя и назначения его vuex, а токен можно использовать для получения информации о пользователе позже. Конкретный код выглядит следующим образом: permission

vuex-loading

В vuex3.1.0 дляvuex.subscribeActionВнесены изменения, чтобы иметь хуки до/после.

// subscribeAction官网示例
store.subscribeAction({
  before: (action, state) => {
    console.log(`before action ${action.type}`)
  },
  after: (action, state) => {
    console.log(`after action ${action.type}`)
  }
})

С ним, сvuexизплагинФункция, это больше не является проблемой для реализации мониторинга состояния соответствующего действия.

Нажмите, чтобы просмотреть конкретный код реализации

Ссылаться наОптимизированное решение Vue для мобильных устройств

// 使用方法
computed: {
  ...mapState({
    loading: state => state['@@loading'].effects['test/onePlusAction']
  })
}
// 其中 test对应的是vuex中的模块名，onePlusAction对应模块内的actions

Специфический эффект:
loading

Страницы списка (использование vo-страниц)

Здесь, на странице со списком, я использую компоненты, которые написал сам.vo-pages, подробное использование можно посмотретьПростой в использовании, настраиваемый компонент vue для перелистывания страниц.

Осознайте эффект:

vo-pages

Оптимизация производственной среды

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

Обычные библиотеки вместо этого используют CDN
Отключите исходную карту, чтобы предотвратить утечку исходного кода
Уродливый html/css/js
генерировать gzip
удалить отладчик/консоль
Используйте webpack-bundle-analyzer для анализа ресурсов, чтобы обеспечить дальнейший оптимизированный анализ данных.

Если вы хотите узнать больше о производительности и ресурсах, рекомендуетсяРуководство по оптимизации упаковки веб-пакета проекта Vue SPAЭта статья.

Более

На разработку этого проекта ушло много времени, в надежде повысить эффективность разработки H5. Вы также можете обмениваться и учиться со мной.

Ссылки по теме

Адрес источника

Ссылка на статью

На основе vue-cli3.0 для создания полнофункциональной полки мобильного терминала.
Руководство по оптимизации упаковки веб-пакета проекта Vue SPA
Оптимизированное решение Vue для мобильных устройств
vue-element-admin
Прикоснитесь к своей руке, чтобы элегантно использовать значок
Простой в использовании, настраиваемый компонент vue для перелистывания страниц.

возобновить

Добавлена версия vue-cli4. Вы можете переключить соответствующую ветку.

Заинтересованные партнеры также могут присоединиться к разработке версии TypeScript.

Инструмент создания каркасов h5vue теперь выпущен.

Как использовать:

// 全局安装h5vue脚手架工具
yarn global add h5vue
// 初始化项目
h5vue init