Проект персонального веб-сайта на стороне сервера (SSR), созданный nuxtjs+express+vue2+vuex

Node.js внешний интерфейс JavaScript Express

5se7en.com

Проект персонального веб-сайта на стороне сервера, созданный nuxtjs+express+vue2.0+vuex.
адрес проекта на гитхабе: https://github.com/se7en-1992/5se7en.com Онлайн-адрес проекта: https://5se7en.com/

Меры предосторожности

  • node>=v8.0.0+ (номер версии узла выше nuxt1.0.0 должен быть больше v8.0.0, иначе при запуске будет сообщено об ошибке)
  • Чтобы проверить вход в игру, нажмите здеськонная игразарегистрировать аккаунт

Технический отбор

Вот два отступления и поговорим о двух моментах времени, которые оказали глубокое влияние на фронтенд-разработку.

  • Появление ajax способствовало наступлению эпохи Web 2.0.
  • Появление nodejs позволяет интерфейсу делать больше, так что js — это не просто язык на стороне браузера. Почему я говорю это здесь, некоторые фронтенд-разработчики скажут, что узел не является бэкендом? Почему я должен изучать nodejs? На самом деле, с развитием фронтенда, особенно появлением ноды, развитие фронтенда меняется с каждым днем, и один за другим появляются различные инструменты автоматизации и фреймворки. Многие зависят от узла. Node используется не только для написания бэкенда, можно сказать, что если вы ничего не знаете о узле в данный момент и не изучаете его, то вас накрыла волна фронтенда.
  • В этом проекте используется наиболее часто используемый экспресс-интерфейсный веб-фреймворк в узле, демо-версия официального сайта описывается так =>ExpressJS + Nuxt.js= ⚡️ Да, можно сказать, что он очень быстрый. Мой личный сервер веб-сайта представляет собой машину студенческой версии Aliyun с 1 ядром 1g. За исключением того, что в первый раз веб-сайт открывается немного медленнее, можно сказать, что это скорость свет позже. Быстрее, чем любой фреймворк, который я когда-либо использовал.
  • Давайте поговорим о том, почему вы должны использовать рендеринг на стороне сервера и выбрать nuxtjs?
    • На Жиху есть тема, можете глянутьПочему серверный рендеринг html сейчас популярен?, Отвечающих все больше и больше, и это сложнее.Я кратко резюмирую здесь.
      • Рендеринг на стороне сервера в основном решает две болевые точки: SEO-оптимизацию (некоторым новостным и информационным сайтам требуется оптимизация для поисковых систем) и рендеринг первого экрана крупномасштабных приложений (для решения проблемы скорости загрузки домашней страницы некоторых крупных веб-сайтов). масштабные приложения)
      • На самом деле, это опять надо говорить об истории: в начале html рендерил бэкенд, а фронтенд собственно вырезал картинки (CSS) и делал спецэффекты (JS), так что зарплата фронтенда среди всех программистов был самым низким, и должность тоже была самой низкой. Так появилась цепочка презрения на переднем и заднем концах.
      • Развитие nodejs и фронтенда mvc усложняет фронтэнд, а фронтенд находит возможность развернуться, поэтому он полностью поддерживает эти две технологии, в результате чего веб-сайт не должен быть спа. Постепенно в крупных компаниях начало возникать движение по разделению интерфейсов и серверов, цель которого состоит в том, чтобы отделить интерфейсы от серверов и развиваться независимо. (На первый взгляд это для "разделения кода", но на самом деле это для "разделения персонала", то есть "разделения фронтенда и бэкенда", фронтенд больше не привязан к бек- Конечная команда)
      • После спа я обнаружил, что проблема seo очень большая, и скорость рендеринга первого экрана очень низкая, но дорога, которую я выбираю, трудна для ходьбы, поэтому я использую nodejs для рендеринга этой дороги на стороне сервера как способ вне
      • Короче говоря, фронтенд сначала не мог встать, потом, с появлением ноды и MVC/MVVM (Vue, React, Angular), фронтенд начал вставать и падать, стал самостоятельным и сделал вещи это должен быть серверный рендеринг SPA, а сейчас снова вышла новая технология, надо вовремя находить ошибки и вносить исправления. Разделение передней и задней частей является тенденцией. Поскольку все они разделены, мы не можем позволить задней части выполнять рендеринг. Давайте найдем способ выполнять рендеринг на стороне сервера во внешнем интерфейсе, поэтому платформа также появился.
    • Почему стоит выбрать nuxtjs?
      • Сначала я использовал рендеринг на стороне сервера для изученияN-blogИспользуя шаблонный рендеринг nodejs express+ejs, эффект на самом деле неплохой, код внутри не полностью компонентизирован, а проект, который я делаю, все еще использует jQuery, который настолько низок, как я могу это вынести, я определенно хочу играть с другой техникой. (Я не хочу принижать здесь jQuery. Я думаю, что jQuery — очень хорошая библиотека JavaScript. Раньше это был унифицированный интерфейс, в том числе и сейчас, в основном существует несколько интерфейсов, которые не используют jQuery, но как Могу ли я сказать, что jQuery медленный Медленный и бесшумный, работа с DOM сейчас не оптимальный выбор.) Интерфейс постоянно развивается, и нам нужно выбрать лучший.
      • На официальном веб-сайте vue также настоятельно рекомендуется использовать nuxtjs в сочетании с демонстрацией экспресс-шаблона на github nuxtjs.ExpressJS + Nuxt.js=⚡ Когда я увидел это, я выбрал этот кадр. Правильно, это был он.
      • nuxtjs сочетает в себе vue2, Webpack, vue-loader, babel-loader, vuex, Vue-Meta
      • Нет необходимости настраивать громоздкую конфигурацию веб-пакета, vue-loader автоматически генерирует маршруты, просто создайте файл в каталоге pages, чтобы автоматически сгенерировать соответствующий файл маршрутизации.

среда разработки

  • Node.js: ^8.9.4
  • express: ^4.16.2
  • nuxtjs: ^1.0.0-rc11
  • vue: ^2.5.3 
npm install
npm run dev

Открыть в браузереhttp://localhost:5757

дружеское напоминание

Введение в Nuxt

  • Подробное вводное руководство Nuxt здесь подробно не представлено.официальная документацияЭто было объяснено очень подробно. Вот краткое введение в роль каталога проекта

Введение в каталог nuxt

  • assets

    • Если ваши статические файлы ресурсов должны быть созданы и скомпилированы Webpack, вы можете поместить их в каталог ресурсов, в противном случае вы можете поместить их в статический каталог.
    • Когда сервер Nuxt запускается, файлы в этом каталоге будут сопоставлены с корневым путем / приложения, а такие файлы, как robots.txt или sitemap.xml, подходят для размещения в статическом каталоге.

  • components

    • Компоненты каталога компонентов используются для организации компонентов приложения Vue.js. Nuxt.js не будет расширять и улучшать компоненты Vue.js в этом каталоге, то есть эти компоненты не будут иметь одинаковогоasyncDataсвойства метода. Короче говоря, этот каталог является обычным каталогом компонентов vue.

  • layouts

    • Этот каталог с именем Nuxt.js зарезервирован и не может быть изменен.
    • Вы можете настроить стиль по умолчанию и стиль ошибок, подходящий для вашего сайта.

  • middleware

    • Последовательность выполнения промежуточного ПО:
      • nuxt.config.js
      • соответствие макету
      • соответствующая страница

  • pages

    • Этот каталог с именем Nuxt.js зарезервирован и не может быть изменен.
    • Страницы каталога страниц используются для организации маршрутов и представлений приложения. Фреймворк Nuxt.js считывает все файлы .vue в этом каталоге и автоматически создает соответствующую конфигурацию маршрутизации.
    • Все файлы .vue для этой страницы имеютasyncData,fechметод.

  • plugins

    • Каталог plugins plugins используется для организации подключаемых модулей Javascript, которые необходимо запустить до создания экземпляра корневого приложения vue.js.
    • Мы можем использовать element-ui или mint-ui и другие плагины в плагинах.

  • static

    • Этот каталог с именем Nuxt.js зарезервирован и не может быть изменен.
    • Каталог статических файлов static используется для хранения статических файлов приложения. Nuxt.js не будет вызывать такие файлы для сборки и компиляции с помощью Webpack. При запуске сервера файлы в этом каталоге будут сопоставлены с корневым путем / приложения.

  • store

    • Этот каталог с именем Nuxt.js зарезервирован и не может быть изменен.
    • Каталог хранилища используется для организации файлов дерева состояний Vuex приложения. Фреймворк Nuxt.js интегрирует соответствующие функциональные конфигурации дерева состояний Vuex.Создайте файл index.js в каталоге хранилища, чтобы активировать эти конфигурации.

Введение в конфигурацию nuxt

  • config

    • Этот каталог не является собственным каталогом nuxt, но некоторый опыт проекта подсказал мне добавить этот каталог для более удобного управления и использования переменных, необходимых в проекте.
    • NEWRELIC_KEY:newrelicКлюч newrelic — это программное обеспечение для мониторинга производительности на стороне сервера.
    • TIMBER_KEY:timberКлюч Timber — это облачная система логирования, проще говоря, она записывает какие-то логи на линии.
    • SENTRY_PROJECT_ID/SENTRY_PUBLIC_KEY/SENTRY_PRIVATE_KEY:SentryИдентификатор проекта, открытый ключ и закрытый ключ. Sentry — это инструмент для создания отчетов об ошибках в режиме реального времени с открытым исходным кодом.
    • porductionProxy/developmentProxy: это настройка пути для запроса прокси модуля axios от nuxt.
    • На самом деле, я также использовал его, когда проект только начинался.pm2Люди, у которых есть опыт в экспресс-проекте, говорят, что это хорошо, есть мониторинг состояния логов и т. д., это действительно удобно.

  • nuxt.config.js

  • .editorconfig

    • EditorConfig — решение для унифицированного форматирования кода

  • .eslintrc.js

    • ESLint — широко используемый инструмент проверки кода JavaScript.

  • gitignore

    • git commit игнорирует файл конфигурации элемента

  • newrelic.js

    • конфигурационный файл newrelic

  • start.js

    • Express запускает входной файл, среда разработки использует nuxt напрямую для запуска без запуска.js, а производственная среда используетpm2запустить файл
Категории