шаблон для мобильного приложения на Vue

Запуск проекта

1. npm i для установки зависимостей
2. npm run serve для запуска проекта
3. cd server (директория с API)
4. npm i
5. npm run dev

Введение

За полдня я собрал шаблон для мобильного приложения на Vue, чтобы помочь начинающим разработчикам, которые ещё не знакомы с процессом создания проектов на Vue. Также приветствуются любые предложения от опытных разработчиков. В данной статье предполагается, что вы уже знакомы с Webpack и Vue.>#### Основные концепции

1. Шаблон vue-cli3

   • Создание проекта
   • Настройка среды разработки и продакшена
   • Настройка кросс-доменного доступа (CORS)

2. vue-router для маршрутизации

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

3. vuex для межкомпонентной коммуникации

   • Настройка vuex
   • Сохранение состояния vuex
   • Использование vuex

4. rem для адаптивного дизайна мобильных устройств

   • Установка размера шрифта для элемента root с помощью amfe-flexible
   • Преобразование px в rem с помощью pxtorem, без необходимости ручного ввода rem

5. Настройка axios

   • Использование интерцепторов для настройки baseURL и добавления токена в заголовок запроса
   • Использование интерцепторов для обработки возвращаемых данных
   • Подключение к прототипу Vue для удобства использования

6. Использование promise

   • Использование async/await для преобразования асинхронного кода в синхронный, что упрощает написание и чтение кода

7. Использование библиотеки UI Vant от Youzan

   • Навигационная панель
   • Ячейки
   • Загрузка
   • ...

8. Использование компонента keep-alive для кэширования определенных компонентов (новое)9. Добавление небольшого сервера для создания API, необходимых для проекта

Шаблон vue-cli3

1. Для более подробной информации перейдите на официальную документацию vue-cli3
2. Настройка среды разработки и продакшена

• В корневой директории создайте два файла .env.development для настройки среды разработки и .env.production для настройки среды продакшена Содержимое файлов

// .env.development
VUE_APP_URL="https://www.easy-mock.com/mock/5cd62747d3a84206275d58d1/huruqing/api"

// .env.production
VUE_APP_URL="https://www.easy-mock.com/mock/5cd62747d3a84206275d58d1/huruqing/api"

3. Конфигурация package.json По умолчанию vue-cli3 уже настроил для вас модель, в которой для разработки используется development, а для продакшена — production. Если вы не знаете модель, перейдите на официальный веб-сайт документации webpack )
4. В вашем проекте переменные, которые вы установили в конфигурационных файлах среды, можно получить через process.env.VUE_APP_URL >#### vue-router маршрутизация В этом разделе мы рассмотрим конфигурацию маршрутизации и маршрутизационных гвардейцев. Сначала посмотрим на схему. Далее рассмотрим конфигурацию маршрутизационных гвардейцев. >#### Межкомпонентная коммуникация Vuex
5. В проекте используются следующие места для Vuex:
   • Установка состояния входа
   • Установка имени пользователя
   • Сохранение токена
6. Пример использования при входе При успешном входе состояние входа устанавливается в true При выходе из системы состояние входа устанавливается в false
7. Получение переменных, установленных в state, через mapGetters, посмотрим на схему
8. ПERSISTЕНТНОЕ ХРАНЕНИЕ СОСТОЯНИЯ VUEX
   • Используйте плагин vuex-persistedstate для сохранения состояния Vuex
   • При перезагрузке страницы состояние сохраняется
   • На самом деле этот плагин сохраняет состояние в localStorage Метод конфигурации, самый простой вариант представлен ниже После использования плагина vuex-persistedstate состояние в store сохраняется в localStorage

Мобильная адаптация REMПринципы адаптации я не буду подробно описывать, если вам это не знакомо, прочитайте мою другую статью Использование rem для написания адаптивных веб-страниц для мобильных устройств. Здесь я расскажу, как настроить это в vue-cli3.

1. Установите плагин amfe-flexible npm i amfe-flexible --save-dev
2. Импортируйте в main.js ! ipone6
3. В данный момент ваше приложение автоматически устанавливает font-size в зависимости от размера экрана мобильного устройства, как показано на рисунке ! !
4. Настройте плагин pxtorem, который поможет автоматически преобразовать rem в px. Конкретные настройки приведены ниже, они находятся в файле vue.config.js (если его нет, создайте) в корневой директории проекта, как показано на рисунке ! >#### Axios конфигурация
5. Axios интерцепторы Позволяют нам выполнять некоторые общие операции с данными, например, если данные от сервера приходят в объекте data, а axios оборачивает эти данные еще в один объект data, без обработки это может вызвать неудобства.
6. Установите заголовок запроса, сервер часто использует токен для идентификации пользователя. При входе мы получаем токен от сервера и сохраняем его в store. При отправке запроса мы можем добавить токен в заголовок запроса, как показано на рисунке
7. Привяжите экземпляр axios к экземпляру Vue При отправке запроса достаточно использовать this.$axios.get или this.$axios.post, не так ли удобно >#### Использование Promise Promise — это отличная вещь, которая позволяет преобразовать асинхронные операции в синхронные. В проекте использование async await для написания кода делает работу намного приятнее. Конкретные примеры использования приведены ниже: >#### Библиотека Youzan Vant UI Youzan занимается разработкой электронной коммерции и считается одним из лучших в области шаблонов для WeChat Official Accounts и小程序. Vant UI — это открытая им UI-библиотека, а также у них есть UI-библиотека для小程序. Если вас это интересует, вы можете посмотреть(https://youzan.github.io/vant/) её.>