Создайте полное мобильное приложение H5 на основе Vue CLI3.

Vue.js
Создайте полное мобильное приложение H5 на основе Vue CLI3.

предисловие

Перед разработкой проекта Vue я всегда строил леса сам и не использовал вспомогательный Vue-CLI. Причина в том, что:

Во-первых, CLI до версии 3.0 не имеет явных преимуществ, а конфигурация громоздка;

Во-вторых, я чувствую, что у меня больше возможностей контролировать настройку проектов с нуля.

Vue-CLI 3.0 был выпущен в августе прошлого года, но я об этом не знал. Недавно был разработан новый проект Vue H5, и я думал о создании проекта с использованием каркаса Vue CLI3.0. И запишите процесс сборки и использования.

Особенности проекта

  • на основе@vue/cli3
  • Предварительно скомпилированный язык CSS:less, инициализация глобального стиля
  • Пакет Ajax, реализация http-запроса с библиотекой Axios
  • инкапсуляция vue-router, ленивая загрузка, перехват
  • Плавное переключение страниц
  • Обобщенные компоненты
  • Адаптация мобильного терминала
  • Инструменты визуального анализа
  • Структура проекта разделена и т.д...

Лучшим справочником по использованию строительных лесов является официальная документация, которая относительно понятна и своевременно обновляется.
"Ссылка - Официальная документация"

Функциональные преимущества CLI3.0

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

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

  • Богатый функциями, его можно использовать «из коробки», и нет необходимости учитывать громоздкую настройку.
  • Гибкий механизм подключаемых модулей для повышения расширяемости.
  • Конфигурация проекта может быть создана и управляться через поддерживающий графический интерфейс. Иногда это кажется очень интуитивно понятным и удобным.
  • Он поддерживает запуск файла vue напрямую для быстрого прототипирования.
  • Не слишком беспокойтесь о побочных эффектах, вызванных итерацией обновления конфигурации.
  • Созданный командой vue, он хорошо поддерживается и дополняется официальными рекомендациями и передовыми технологиями.

image.png

Построить проект

Git-адрес проекта:GitHub.com/now1 слишком жесток/ву…;

Инициализировать проект

клонировать проект

git clone git@github.com:now1then/vue-h5-pro.git

Установить строительные леса:

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

Создать проект:

vue create my-project
# OR
vue ui  // 通过图形化界面创建项目
  • Выберите предустановленную функцию (выберите дополнительные функции здесь):

image.png

  • Выберите те, которые нужно установить (Babel, Router, Vuex, Pre-processors, Linter/Formatter):

TypeScript и модульное тестирование здесь не рассматриваются.
    

image.png

  • Использует ли маршрут режим истории (Да)

image.png

  • Выберите препроцессор CSS (меньше):

image.png

  • Выберите конфигурацию ESLint (ESLint + стандартная конфигурация) Стандартная конфигурация:

image.png

  • Выберите, когда выполнять проверку ESLint (Lint при сохранении):

image.png

  • Выберите способ настройки выбранных выше функций, сгенерируйте файл конфигурации отдельно или добавьте его в package.json (в специальных файлах конфигурации):

image.png

  • Сохранять ли предыдущие настройки в качестве предустановленного шаблона (y):

image.png

Если выбор y позволит вам ввести имя, вы можете использовать этот предустановленный шаблон для быстрой сборки проекта при следующей инициализации проекта.

запустить проект

учитьсяКоманды подключаемого модуля CLI.

Запустите сервер разработки и запустите проект:**npm run serve**;
Команда запускает сервер разработки (на основеwebpack-dev-server) и поставляется с Hot-Module-Replacement из коробки.

image.png

Упаковка для производственной среды:npm run build;

Графический интерфейс

пройти черезvue uiКоманды для графического создания проектов и управления ими:

vue ui

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

Интерфейс управления:

image.png

Введение в каталог:
**Панель управления проектами: **Настройка некоторых функциональных виджетов;
**Плагины:** Вы можете просматривать установленные плагины CLI и искать установленные плагины;
**Зависимости:** вы можете просматривать и управлять текущими зависимостями проекта и зависимостями разработки;
**Конфигурация: **Управление конфигурацией элемента конфигурации проекта, включаяКонфигурация Vue-CLIи конфигурация ESLint и т. д.
**Задание:** Вы можете выполнить соответствующее задание (соответствующее команде скрипта в package.json), что удобно для просмотра запущенного результата, анализа и проверки.

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

Плагины основной конфигурации

Babel

Предустановлено в CLI@vue/cli-plugin-babel, который по умолчанию использует Babel 7+babel-loader+ @vue/babel-preset-app, но можно сделать черезbabel.config.jsНастройте для использования любых других пресетов или плагинов Babel.
«В настоящее время достаточно только конфигурации по умолчанию, и она будет постепенно увеличиваться при последующем фактическом использовании»

Преобразовано по умолчанию_es6.promise、_``_es6.symbol_и другой общий синтаксис ES6, для синтаксиса, который не был введен, используйте «явное перечисление требуемого метода полифилла». такие как использованиеes6.string.includes, затем установите:

  presets: [
    ['@vue/app', {
      'polyfills': [
        'es6.string.includes'
      ]
    }]
  ],

ESLint

@vue/cli-plugin-eslint
"В настоящее время достаточно только конфигурации по умолчанию. 』, который можно настроить в соответствии с личными привычками и спецификациями проекта.
Например, я обычно отключаю следующие настройки:

  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warning' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warning' : 'off',
    'semi': 0, // 语句结尾分号
    'camelcase': 0, //驼峰命名
    'comma-dangle': 0, // 对象最后逗号
    'space-before-function-paren': 0, // 函数定义前，括号前分割
  },

Загрузить библиотеку mint-ui

// 安装
npm install mint-ui
Внедрить по требованию

с помощьюbabel-plugin-component, мы можем только ввести необходимые компоненты для достижения цели уменьшения размера проекта.
Сначала установите компонент babel-plugin:

npm install babel-plugin-component -D

Затем измените babel.config.js на:

module.exports = {
  presets: [
    ['@vue/app', {
      'polyfills': [
        'es6.string.includes'
      ]
    }]
  ],
  "plugins": [
    ["component", {
      "libraryName": "mint-ui",
      "style": true
    }]
  ]
}

Таким образом, компоненты могут быть импортированы по требованию.

инкапсуляция запроса ajax

Реализовать http-запросы с помощью библиотеки Axios.

"Ссылка на сайт-китайская документация axios"

Установить:
npm install axios;

Цель пакета для достижения:

  • Единый интерфейс обслуживания и управления;
  • Поддержка переадресации прокси интерфейса;
  • Прочтите конфигурацию среды, чтобы отличить среду обработки.
  • Перехватывать запросы и ответы и обрабатывать нестандартные ситуации, такие как тайм-аут входа в систему и 404;
  • Сопоставьте префикс URL-адреса интерфейса в соответствии с запрошенной конфигурацией и выполните специальную обработку для поддержки.

Подробности смотрите в другой моей статье:
"Долгая дорога - пакет Axios"

Адаптация мобильного терминала

Принимая во внимание совместимость браузера и привычки использования, адаптацию мобильного терминала или режим ручной покупки, примитеpx转rem + lib-flexibleвыполнить.
postcss-pxtoremПлагин конвертирует сконфигурированные px в rem;
lib-flexibleБиблиотека автоматически устанавливает шрифт и метамасштабирование HTML в зависимости от размера страницы и dpr.

  1. Установитьpostcss-pxtoremплагин
yarn add postcss-pxtorem -D
  1. Добавьте конфигурацию pxtorem в postcss.config.js.
// postcss.config.js
module.exports = {
  plugins: {
    "autoprefixer": {}, 用来自动处理浏览器前缀的一个插件。
    "postcss-
    ": {
      "rootValue": 37.5, // 设计稿宽度的1/10
      "unitPrecision": 5, //小数位
      "minPixelValue": 1, //转换的最小单位
      "selectorBlackList": [], //忽略的样式, 正则
      "propList": ["*"] // 需要做转化处理的属性，如`hight`、`width`、`margin`等，`*`表示全部，正则
    }
  }
}

Гибкая конфигурация в соответствии с реальной ситуацией проекта.

  1. Установитьlib-flexible, и введенный в файл входа main.js
// 安装 lib-flexible
yarn add lib-flexible

// main.js中引入lib-flexible
import 'lib-flexible';

Познакомьтесь с инструментами мобильной отладки

Отлаживать H5 на мобильных устройствах очень неудобно, в это время можно внедрить очень полезный инструмент отладки Eruda.

Eruda — это панель отладки, предназначенная для мобильного веб-интерфейса, похожая на мини-версию DevTools, ее основные функции включают в себя: сбор журналов консоли, проверку состояния элемента, отображение показателей производительности, сбор запросов XHR, отображение информации о локальном хранилище и файлах cookie, браузер. обнаружение признаков и т. д.
Для получения подробной информации, пожалуйста, посетите-ссылка на гитхаб

На него можно ссылаться через CDN, и, конечно, его также можно загрузить в проект для непосредственного использования.

Эта конфигурация проекта использует конфигурацию переменной среды CLI, чтобы указать, следует ли загружать Eruda. Фактическое использование проекта может быть гибко настроено.
.env.developmentфайл для установки переменных окружения:

VUE_APP_ERUDA=false  # ture表示启用Eruda调试工具

Настройки файла index.html:

<!--手机调试-->
<% if (VUE_APP_ERUDA === 'true') { %>
  <script src="//cdn.bootcss.com/eruda/1.5.2/eruda.min.js"></script>
  <script> window.eruda.init(); </script>
  <% } %>

Эффект:

ereda演示.gif

Дополнительная конфигурация интерфейса командной строки

postcss.config.js

postcss-import：Этот плагин в основном решает проблему пути импорта @import. Файлы, которые импортируют локальные файлы, node_modules и т. д.
postcss-url：Этот плагин в основном используется для обработки файлов, таких как файлы изображений, файлы шрифтов и другие пути ссылок.
autoprefixer：Плагин для автоматической обработки префиксов браузера.

Инструменты визуального анализа

Используйте подключаемый модуль инструмента визуального анализа ресурсовwebpack-bundle-analyzerПроанализируйте размер пакета производственных файлов.

// vue.config.js  
configureWebpack: config => {
    // 生产环境打包分析体积
    if (process.env.NODE_ENV === 'production' && process.env.npm_config_report) {
      return {
        plugins: [
          new BundleAnalyzerPlugin()
        ]
      }
    }
  },

Команда терминала:yarn build --report
Графический интерфейс, конечно任务->build->分析Размер пакета также можно приблизительно проанализировать в формате .

Равномерно установите менее глобальную переменную

Ссылаться на"ссылка - автоматический импорт css vue-cli3".
использоватьstyle-resources-loaderПлагин, который автоматически глобально импортирует переменные LESS и функции примесей в пути конфигурации для одного файла Vue. Таким образом, вы можете использовать определенные переменные Less напрямую, не вводя каждый файл отдельно.

Установитьstyle-resources-loader;
yarn add style-resources-loader -D
конфигурация vue.config.js
chainWebpack: config => {   // CLI内部webpack配置
  const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
  types.forEach(type => addStyleResource(config.module.rule('less').oneOf(type)))
},
// 全局样式 变量、函数
function addStyleResource (rule) {
  rule.use('style-resource')
    .loader('style-resources-loader')
    .options({
      patterns: [
        path.resolve(__dirname, 'src/styles/variables.less'),
        path.resolve(__dirname, 'src/styles/mixin.less'),
      ],
    })
}

Другие изменения в проекте:

Инициализация стиля CSS

Вводить_normalize.css_ ,_minireset.css _+ Настройте параметры CSS, инициализируйте стили CSS и сделайте стили HTML-элементов максимально согласованными в разных браузерах.
Загрузите соответствующий файл и поместите его прямоsrc/assets/styles/под дорожкой.

вводитьfastclick

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

// 安装
yarn add fastclick

// main.js中引入使用
import FastClick from 'fastclick';
FastClick.attach(document.body);

Разработка проекта

Структура каталогов

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

image.png

Разработка проекта находится в каталоге src;

В каталоге src/assets в основном хранятся статические файлы ресурсов, такие как значки шрифтов, изображения и сторонние библиотеки, которые напрямую импортируются или редко изменяются.

Описание модуля Vue

Глобальные общедоступные компоненты, фильтры-фильтры и директивы могут быть внедрены непосредственно в глобальный Vue или могут быть внедрены отдельно по запросу в компоненты страницы, когда они используются.

Глобальные компоненты делятся на:
components_basics公共基础组件, в котором в основном хранятся инкапсулированные базовые компоненты, не относящиеся к бизнесу.
components_modules公共业务组件, в котором в основном хранятся извлеченные повторно используемые бизнес-компоненты.
Для бизнес-компонентов, которые не используются повторно, их не нужно извлекать наружу, а можно напрямую хранить в определенном каталоге страниц.

Внедряйте модули по мере необходимости в компонент страницы:

<script>
import { formatDate } from '@/utils/cloud-utils';
import MainButton from '@/component_basics/MainButton';
import transferDom from '@/directives/transferDom';

export default {
  name: 'demoPage',
  components: { // 组件
    MainButton
  },
  directives: { // 指令
    transferDom
  },
  filters: { // 过滤器
    formatDate
  },
  data() {
    return {
      title: '测试'
    }
  },
  methods: {}
}
</script>

Инкапсуляция маршрутизации маршрутизатора

  1. Отложенная загрузка маршрута

"Ссылка - Отложенная загрузка Vue Router"
Компоненты сгруппированы в блоки в сочетании с асинхронными компонентами Vue и функцией разделения кода Webpack, чтобы обеспечить ленивую загрузку компонентов маршрутизации.

...
const Hello = () => import(/* webpackChunkName: "apply" */ '@/views/hello');
const Demo = () => import(/* webpackChunkName: "demo" */ '@/views/demo');
  1. перехват маршрута

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

// 部分路由信息
  {
    path: '/demo',
    name: 'demo',
    component: Demo,
    meta: {
      title: '演示Demo', // 标题
      requireAuth: true, // 登录权限
      keepAlive: false,
    }
  },
    
//路由拦截
// 路由导航守卫
router.beforeEach((to, from, next) => {
  // 登录权限
  if (to.meta.requireAuth) { // 判断是否校验登录权限
    if (!window.userName) { // 判断是否登录，根据实际业务处理
      next({
        path: '/login',
        query: {
          redirect: to.fullPath // 未登录，跳转到登录页，登录后跳转回当前页。
        }
      })
      return;
    }
  }
  // 路由发生变化修改页面title
  if (to.meta.title) {
    document.title = to.meta.title + ' | vue-h5-pro';
  } else {
    document.title = 'vue-h5-pro';
  }
  next()
})

Плавная анимация перехода страницы

Изображение эффекта:

页面切换动画.gif

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

router.jsПерехватывайте маршруты в файл и записывайте историческую информацию о маршрутах.

// 路由拦截 router.js
router.afterEach((to, from) => {
  // console.log(to, from);
  if (!(from.path === '/' && from.name === null)) {
    setLocalRoute(to, from)
  }
});

function setLocalRoute(to, from) {
  // 本地已访问页面路由,存5条
  const localRoute = window.myVue.localRoute = window.myVue.localRoute || [];
  const from_index = localRoute.indexOf(from.path);
  const to_index = localRoute.indexOf(to.path);
  if (from_index < 0) {
    localRoute.unshift(from.path);
    to_index >= 0 && localRoute.splice(to_index, 1)
  }
  if (localRoute.length > 5) {
    localRoute.splice(0, 1)
  }
}

main.vueВ файле стиль анимации перехода задается динамически в соответствии с переходом по маршруту.

<template>
  <div id="app">
    <transition :name="direction">
      <router-view class="page" />
    </transition>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {};
  },
  computed: {
    // 动态设置过渡样式
    direction: function() {
      const currentPath = this.$route.path;
      const localRoute = (window.myVue && window.myVue.localRoute) || [];
      // console.log(localRoute, currentPath);
      const index = localRoute.indexOf(currentPath);
      let tranName = '';

      if (localRoute.length === 0) {
        tranName = 'fade'; // 首页，渐显
      } else if (index >= 0) {
        tranName = 'page-back'; // 回退，右划
      } else {
        tranName = 'page-go'; // 进入新页面，左划
      }
      return tranName;
    }
  },
};
</script>

<style lang="less">
  .page {
    position: absolute;
    width: 100%;
    height: 100%;
    transition: all 0.8s ease-in-out;
  }
  .page-go-enter-active {
    transform: translate3d(100%, 0, 0);
  }
  .page-go-enter-to {
    transform: translate3d(0, 0, 0);
  }
  .page-go-leave-active {
    transform: translate3d(0, 0, 0);
  }
  .page-go-leave-to {
    transform: translate3d(-100%, 0, 0);
  }
  .page-back-enter-active {
    transform: translate3d(-100%, 0, 0);
  }
  .page-back-enter-to {
    transform: translate3d(0, 0, 0);
  }
  .page-back-leave-active {
    transform: translate3d(0, 0, 0);
  }
  .page-back-leave-to {
    transform: translate3d(100%, 0, 0);
  }
}
</style>

Детали строительства и развития проекта будут постоянно обновляться в будущем. Конкретный код приглашаем посетить проект для просмотра.

Обобщенные компоненты (обновлено...)

Здесь задокументированы инкапсулированные обобщенные базовые компоненты.
Обобщенные базовые компоненты хранятся вsrc/component_basic/Под содержанием.

Компонент наконечника

Например: компонент подсказки, использование компонента и код см. в проекте.
Изображение эффекта:

点击tip.gif

ссылка на проект

Ссылка на гитхаб:GitHub.com/now1 слишком жесток/ву…;
Vue-CLI3 создает мобильное приложение H5 — Юке:у-у-у-у. yuque.com/теперь тогда/ ты…;
Vue-CLI3 создает мобильные приложения H5 — самородки:nuggets.capable/post/684490…

Для улучшения:

  • Разработка кода и соглашений об именах

  • Конфигурация загрузки пакета проекта

  • Улучшение обобщенных компонентов

  • Представьте фиктивную платформу

  • Интернационализированная языковая конфигурация

  • Извлечение отдельной конфигурации проекта на стороне ПК

  • Рассмотрите возможность поддержки нескольких страниц

Категории