Передняя часть

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

Обратите внимание: для нормального оформления заказа рекомендуется использовать официальный клиент Hungry Ghost.

Если у вас проблемы с сетью, перейдите на внутренний зеркальный ускоренный узел (https://gitee.com/easytuan/nuxt-elm).

Демонстрация эффекта

Чтобы просмотреть демонстрацию, нажмите здесь (рекомендуется использовать режим мобильного телефона Chrome для предварительного просмотра).

Сканируйте следующий QR-код с помощью мобильного устройства.

Документация по API

Адрес документации по API (на основе apidoc) (https://easytuan.gitee.io/node-elm-api/doc).

Стек технологий

Nuxt2 + Vue + Vuex + Vue-Router + Mint-UI.

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

git clone git@github.com:EasyTuan/nuxt-elm.git
# Внутренний зеркальный ускоренный узел: git@gitee.com: easytuan / node-elm-api.git
cd nuxt-elm
npm install
npm run dev
# Быстрый шаблон генерации
npm run tep `имя файла`
# pm2 развертывание
npm run start

Дополнительные сведения

Этот проект имеет соответствующую систему бэкенда. Если вы хотите одновременно разрабатывать переднюю и заднюю части, вы можете загрузить соответствующий бэкенд: адрес проекта бэкенда (https://github.com/EasyTuan/node-elm-api).

Если вы занимаетесь только разработкой передней части, пожалуйста, игнорируйте это предложение.

Отдых

Целевые функции

Введение в бизнес

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

├── assets                    // Статические ресурсы
│   ├── images                    // Ресурсы изображений
│   ├── services                  // Запросы API
│   ├── styles                    // Файлы стилей
│   └── utils                     // Общие инструменты
├── components                // Компоненты
├── config
│   └── index.js                  // Файл конфигурации
├── layouts                  // Макет
├── middleware               // Промежуточное ПО
├── pages                    // Страницы
├── plugins                  // Плагины
├── static                   // Статические ресурсы
└── store                    // Состояние vuex

Некоторые скриншоты

Главная страница

Личные данные

Моё

Заказ еды

Оценка ресторана

Объяснение

Если это полезно для вас, вы можете нажать «Star» в правом верхнем углу, чтобы поддержать его! ^_^

Или вы можете «follow» за мной, я буду продолжать открывать больше интересных проектов.

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

Ежедневная запись разработки

Создание шаблона Nuxt

Здесь о проекте инициализации, я непосредственно использую create-nuxt-app на официальном сайте Nuxt.

npx create-nuxt-app <имя проекта>

Он предложит вам сделать несколько выборов:
  1. Выберите серверную структуру между интегрированными структурами серверов:
    None (по умолчанию сервер Nuxt)
    Express
    Koa
    Hapi
    Feathers
    Micro
    Adonis (WIP)
  2. Выберите ваш любимый фреймворк UI:
    None (нет)
    Bootstrap
    Vuetify
    Bulma
    Tailwind
    Element UI
    Buefy
  3. Выберите режим Nuxt, который вы хотите (универсальный или SPA)
  4. Добавьте модуль axios, чтобы легко отправлять HTTP-запросы в ваше приложение.
  5. Добавить EsLint для проверки кода и ошибок при сохранении.
  6. Добавьте Prettier для форматирования/украшения вашего кода при сохранении.

Запустите локальный сервис
npm run dev

Посетите http://localhost:3000, теперь давайте посмотрим каталог проекта после инициализации.

Примечание: Nuxt по умолчанию будет считывать файлы vue в папках pages и автоматически генерировать маршруты. Если вам нужно настроить маршрут, вы можете настроить соответствующие параметры в файле nuxt.config.js.

Запрос на упаковку

Отделение данных и слоя представления необходимо, поэтому это также причина, по которой передняя часть всегда рекомендует дизайн MV*. Запрос на упаковку является первым шагом, который мы должны выполнить. Здесь я выбираю axios в качестве клиента HTTP-запроса, axios совместим с браузером и узлом, а также предоставляет такие функции, как перехват запросов и перехват ответов, которые делают разработку более приятной.

В файле config/index.js напишите:

module.exports = {
  IS_RELEASE: true, // true онлайн, false тестирование

  BASE_URL: `http://localhost:3000/api`, // тестирование

  // BASE_URL: `https://elm.caibowen.net/api`, // производство

  // IMG_URL: 'http://localhost:9000/', // тестирование

  IMG_URL: 'https://easytuan.gitee.io/node-elm-api/public/', // производство (используя службу страниц Gitee Code Cloud)

  HEADERS: {
    'Content-Type': 'application/json;charset=UTF-8'
  },

  TIMEOUT: 12000, // время ожидания api

};

В папке assets/utils/request.js напишите:

import axios from 'axios';
import config from '~/config';
import { Toast } from 'mint-ui';

axios.defaults.baseURL = config.BASE_URL;
axios.defaults.timeout = config.TIMEOUT;
axios.defaults.headers = config.HEADERS;

// Перехватчик запроса
axios.interceptors.request.use( request => {
``` ```
if (!config.IS_RELEASE) {
    console.log(
      `${new Date().toLocaleString()}【 M=${request.url} 】P=`,
      request.params || request.data,
    );
  }
  return request;
}, error => {
  return Promise.reject(error);
});

export default async (options = { method: 'GET' }) => {
  let isdata = true;
  if (
    options.method.toUpperCase() !== 'POST'
    && options.method.toUpperCase() !== 'PUT'
    && options.method.toUpperCase() !== 'PATCH'
  ) {
    isdata = false;
  }
  const res = await axios({
    method: options.method,
    url: options.url,
    data: isdata ? options.data : null,
    params: !isdata ? options.data : null,
  });
  if (res.status >= 200 && res.status < 300) {
    if (!config.IS_RELEASE) {
      console.log(
        `${new Date().toLocaleString()}【接口响应：】`,
        res.data,
      );
    }
    // 浏览器环境弹出报错信息
    if(typeof window !== "undefined" && res.data.code !== 0) {
      Toast(res.data.msg);
    }
    return res.data;
  }else {
    if(typeof window !== "undefined" && res.data.code !== 0) {
      Toast('请求错误');
    }
  }
};

Наконец все API-запросы записываются в файл server.js для удобства централизованного управления.

Обработка междоменных запросов

Те, кто знаком с Vue, наверняка знают, что для проектов, использующих Vue, vue-cli предоставляет слой абстракции над webpack для настройки прокси. Он предоставляет опцию proxyTable, которая объединяет webpack и его сторонние плагины, такие как http-proxy-middleware.

К сожалению, Nuxt не имеет такой опции конфигурации, как proxyTable. Однако, к счастью, в Nuxt можно напрямую настроить http-proxy-middleware для обработки междоменных запросов. Ещё более удачно то, что Nuxt предоставляет два пакета для решения проблемы междоменного доступа с помощью axios:

Сначала выполните установку:

npm i @nuxtjs/axios @nuxtjs/proxy -D

Затем настройте в файле nuxt.config.js:

  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/proxy'
  ],
  proxy: [
    [
      '/api',{
        // target: 'http://localhost:9000',
        target: 'https://elm-api.caibowen.net',
        changeOrigin: true,
        pathRewrite: { '^/api' : '/' }
      }
    ]
  ],

Теперь вы можете спокойно использовать axios для междоменных запросов.

Развёртывание проекта

Прежде чем перейти к развёртыванию, убедитесь, что у вас есть собственный сервер. Если нет, то стоит приобрести его (я не буду советовать вам AWS или Google Cloud, которые предлагают бесплатные пробные версии облачных серверов на год).

OK, продолжим статью. Прежде чем начать объяснение развёртывания, давайте рассмотрим команды разработки:

Команда	Описание
dev	Запускает веб-сервер с горячей перезагрузкой (режим разработки) localhost:3000.
start	Запускает веб-сервер как процесс с использованием pm2 (сначала будет выполнена команда nuxt build).
generate	Компилирует приложение и генерирует соответствующие HTML-файлы на основе конфигурации маршрутов (для статического развёртывания сайта).

Начало развёртывания

Загрузите код на сервер и выполните команду npm run start для прослушивания порта 3000. Затем начните настраивать nginx (используется для переадресации портов):

server {
  # Порт, http равен 80, если развёрнуто https, прослушивайте 443
  listen 80;
  # Доменное имя
  server_name elm.caibowen.net;
  # Обратный прокси
  location / {
    proxy_pass http://localhost:3000;
  }
}

После этого перезапустите nginx:

nginx -s restart

Теперь вы сможете получить доступ к своему веб-сайту по адресу http://elm.caibowen.net.

Заключение

Nuxt относительно прост и удобен в использовании. По сравнению с vue-ssr, он значительно упрощает конфигурацию разработки, позволяя разработчикам сосредоточиться на бизнес-логике, а не на настройке файлов. Среди прочего, Nuxt автоматически генерирует маршруты, отслеживая изменения в файлах в каталоге pages.

Однако в настоящее время Nuxt всё ещё нуждается в улучшении, и количество сторонних плагинов в сообществе ограничено, а доступных ресурсов по этой теме сравнительно мало.

Несмотря ни на что, я надеюсь, что сообщество Nuxt будет развиваться дальше.

Поддержка

Если статья оказалась полезной, поддержите автора.

Получив поддержку, я буду своевременно обновлять стену поддержки.

Ссылки

Адрес бэкенда проекта.

Лицензия

GPL.

OSCHINA-MIRROR/easytuan-nuxt-elm

Главная страница

Личные данные

Моё

Заказ еды

Оценка ресторана

Создание шаблона Nuxt

Запрос на упаковку

Обработка междоменных запросов

Развёртывание проекта

Начало развёртывания

Заключение

Поддержка

Ссылки

Лицензия

Комментарии ( 0 )

Введение

Обновления

Участники

Недавние действия

OSCHINA-MIRROR/easytuan-nuxt-elm .gitee-modal { min-width: 500px !important; } .gitee-modal .close { right: 0.6rem !important; }

Главная страница

Личные данные

Моё

Заказ еды

Оценка ресторана

Создание шаблона Nuxt

Запрос на упаковку

Обработка междоменных запросов

Развёртывание проекта

Начало развёртывания

Заключение

Поддержка

Ссылки

Лицензия

Комментарии ( 0 )

Введение

Обновления

Участники

Недавние действия

OSCHINA-MIRROR/easytuan-nuxt-elm