Введение в фронтенд персонального блога на Vue 3

Используется Vite для разработки, изменены настройки и архитектура для нескольких страниц, обновлены версии некоторых плагинов, исправлены проблемы с загрузкой изображений и ошибки, возникшие при обновлении версии Element Plus.

В данном проекте отсутствует Element UI, вместо него были созданы собственные компоненты. Разработаны навигационная панель, глобальные уведомления, уведомления о событиях, состояние пустой страницы, бесконечное скроллинг, кнопки, аватары, кнопка возврата вверх, формы для комментариев, плеер для музыки, пагинация, ползунок, предварительный просмотр Markdown, изображения. Стили для изображений взяты из Element, а для плеера музыки — из APlayer. Остальные компоненты стилизованы с использованием Ant Design of Vue.

Из-за этого после оптимизации размер фронтенда сократился с 1.3 МБ до примерно 0.9 МБ. Удалены функции регистрации, входа и информации о пользователе. Вместо них используется авторизация через сторонние сервисы. Весь сайт адаптирован под мобильные устройства, дизайн стал более минималистичным. Внедрена единая стилистика дизайна, а backend обновлен до Vue 3 + Element Plus, добавлены возможности для аналитики данных.

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

Переход на Vue 3 включает в себя две части (фронтенд переработан, а backend обновлен до Vue 3 + Element Plus):1. Создание компонентов для фронтенда блога 2. Переработка дизайна и функционала фронтенда блога

Исходный код фронтенда на Vue 3: https://gitee.com/baymaxsjj/by-vue3-blog

Исходный код UI-компонентов на Vue 3: https://gitee.com/baymaxsjj/by-vue3-ui

Исходный код фронтенда на Vue 2: https://gitee.com/baymaxsjj/by-vue-blog

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

Vue версия: 3.0.3, Laravel версия: 7.0

1. Конфигурация Vue для нескольких страниц, проект включает фронтенд и бэкенд.

2. Использование Element UI для разработки фронтенда и бэкенда.

3. Завершенные модули:Фронтенд: Главная страница, представление статей, представление меток, представление категорий, анализ статей, создание оглавления, запуск демо, представление модулей, комментарии, ссылки на другие сайты, авторизация через третьи стороны (QQ, GITEE, GITHUB) (регистрация, вход, восстановление пароля, удаление личных данных).Бэкенд: Статистика данных, публикация статей (управление модулями, публикация на нескольких платформах, отправка в поисковую систему Baidu), список статей, управление пользователями, ссылки на другие сайты, управление проектами, пути развития, управление комментариями, объявления сайта, слайдер на главной странице, управление музыкой.

4. Конфигурация проекта: Разделение фронтенда и бэкенда на отдельные пакеты, загрузка по требованию, динамические маршруты, сжатие gzip, удаление console.log в режиме production, обратное проксирование, использование CDN, автоматическое получение кода сервером для сборки и компиляции.

Установка зависимостей

pnpm install

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

// Запуск фронтенда
pnpm run dev_home
// Запуск бэкенда
pnpm run dev_admin

Сборка

// Сборка фронтенда
pnpm run build_home
// Сборка бэкенда
pnpm run build_admin

Конфигурация vue cli

См. Справочник конфигурации.

Разделение сборки фронтенда и бэкенда

В файле package.json:

 "scripts": {
        "dev_home": "vite --mode home_dev",
        "build_home": "vite build --mode home_pro",
        "preview_home": "vite preview --mode home_pro",
        "dev_admin": "vite --mode admin_dev",
        "build_admin": "vite build --mode admin_pro",
        "preview_admin": "vite preview --mode admin_pro"
    },

В файле vue.config.js:

const env = loadEnv(mode, process.cwd())
const app_ip = env.VITE_API_HOST_IP;
const isDev = mode == 'development'
const app_host = `http://${app_ip}`;
let pageName = env.VITE_PAGE_NAME
let pageRoot = env.VITE_PAGE_ROOT
console.log('Название страницы', pageName)
console.log('Корневая директория страницы', pageRoot)
```### Конфигурация нескольких страниц
Использование переменных окружения для конфигурации нескольких страниц

```js
root: pageRoot,
// Базовая директория развертывания проекта
build: {
  outDir: `./dist/${pageName}`,
  rollupOptions: {
    input: {
      main: resolve(__dirname, `${pageRoot}/index.html`),
    },
  },
},

Конфигурация обратного прокси-сервера

Поскольку проект использует интерфейсы третьих сторон, требуется обратный прокси.```js devServer: { sockHost: "localhost", disableHostCheck: true, port: 8080, // порт host: "0.0.0.0", https: false, // https:{type:Boolean} open: true, // автоматическое открытие браузера proxy: { // интерфейсы сервера "/apis": { // target: "http://127.0.0.1:80/api/v1", // адрес для запроса target: import.meta.env.VITE_APP_API_URL, // адрес для запроса changeOrigin: true, // требуется ли поддержка кросс-доменных запросов pathRewrite: { "^/apis": "" // замена адреса запроса target, то есть, при запросе, url '/proxy' заменяется на 'http://ip.taobao.com' } }, // интерфейсы музыки "/music": { target: "https://music.liuzhijin.cn", // адрес для запроса // target: import.meta.env.VUE_APP_URL, // адрес для запроса changeOrigin: true, // требуется ли поддержка кросс-доменных запросов pathRewrite: { "^/music": "" // замена адреса запроса target, то есть, при запросе, url '/proxy' заменяется на 'http://ip.taobao.com' } }, // интерфейсы ежедневного английского "/english": { target: "http://sentence.iciba.com", // адрес для запроса // target: import.meta.env.VUE_APP_URL, // адрес для запроса changeOrigin: true, // требуется ли поддержка кросс-доменных запросов pathRewrite: { "^/english": "" // замена адреса запроса target, то есть, при запросе, url '/proxy' заменяется на 'http://ip.taobao.com' } }, "/loimg": { target: "https://pc-store.lenovomm.cn/wallpapercontent/wallpaper/classify/tag_wallpapers", // адрес для запроса // target: import.meta.env.VUE_APP_URL, changeOrigin: true, // требуется ли поддержка кросс-доменных запросов pathRewrite: { "^/loimg": "" // замена адреса запроса target, то есть, при запросе, url '/proxy' заменяется на 'http://ip.taobao.com' } } } }

В этом тексте исправлены пробелы и пунктуация, а также переведены комментарии на русский язык.meta: env: VUE_APP_URL,   // адрес для запроса
                 changeOrigin: true, // требуется ли поддержка кросс-доменных запросов
                 pathRewrite: {
                     "^/loimg": "" // замена адреса запроса target, то есть, при запросе, url '/proxy' заменяется на 'http://ip.taobao.com'
                 }
             }
         },
     },
 ```### Конфигурация nginx``````bash
location /apis {        
      proxy_pass свой_внутренний_адрес;
    }
    location /vendor/sitemap/styles/xml.xsl {        
      proxy_pass https://api.yunmobai.cn/vendor/sitemap/styles/xml.xsl;
    }
    location /music {
      proxy_pass https://music.liuzhijin.cn/;
    }
    location /english {
      proxy_pass http://sentence.iciba.com/;
    }

Автоматизированный скрипт

echo Синхронизация удаленного репозитория
git pull
echo Компиляция главной страницы
npm run build_home
echo Удаление исходных файлов
rm -r ../js ../css ../img ../fonts
echo Копирование главной страницы
cp -rf ../home/. ../
echo Удаление файлов компиляции
rm -r ../home ../admin.html
echo Завершено