В процессе обучения есть ли следующие болевые точки: надеюсь использовать актуальную популярную технологию для разработки личных веб-проектов, но меня пугает громоздкость настройки вебпака; надеюсь иметь адрес онлайн-проекта, но покупать облачные хосты дороги и трудоемки; Или документ, написанный третьей стороной, недостаточно красив, я надеюсь, что у меня будет адрес онлайн-документа для записи накопления технологий, а стиль будет более элегантным и удобным.
Если у вас есть вышеуказанные вопросы, эта статья может предоставить вам хорошее решение:
- Используйте парцеллы для упаковки и создания веб-страниц (парцеллы — это почти нулевая конфигурация, вы можете использовать популярные офлайн-технологии)
- Используйте docsify для написания документов (стиль документа более элегантный и красивый,Пример)
- Используйте firebase для размещения наших страниц (бесплатный хостинг статических файлов https)
Используя три вышеупомянутых инструмента, вам нужно выполнить всего несколько команд:Упаковка собственного веб-приложения,писать документацию,иИметь свой собственный совершенно бесплатный онлайн-адрес
Пожалуйста, используйте версию 8.x для узла
Используйте firebase для бесплатного размещения веб-страниц (требуется преодоление стены)
Чтобы использовать firebase, сначала зарегистрируйте учетную запись Google.
step 1:Установите firebase-tools глобально
npm install -g firebase-tools
step 2:Если вы используете Firebase в первый раз, вам необходимо авторизоваться для входа. Если вы уже авторизовали вход, пропустите этот шаг.
firebase login
Примечание. Если в среде окна сообщается об ошибке, будьте осторожны при использованииcmdвместоgit bash
step 3:Открытымбазовая консоль firebase, щелкните Добавить элемент, как показано ниже.
step 4:Введите название проекта и запишите идентификатор проекта, как показано ниже.
step 5:Создайте новую папку test-firebase (имя только для примера)
step 6: cd test-firebase
step 7:инициализация firebase, выберитеHosting, нажмите пробел и Enter; выберите проект, который вы только что создали; нажмите Enter до конца, некоторые скриншоты выглядят следующим образом
Пока что, если все пойдет хорошо, вы можете использовать firebase для бесплатного размещения статических страниц и иметь свой собственный онлайн-адрес, кроме того, вы можете управлять версиями в консоли firebase.
существуетstep 7, есть вариантWhat do you want to use as your public directory, по умолчанию используетсяpublicКак окончательный путь загрузки для статических файлов, его можно изменить здесь.firebase.jsonможно настроить, больше ссылок на содержаниехостинг firebase
Сборка с упаковкой посылок
В настоящее время популярные технологии обычно требуют компиляции, и наиболее критикуемой частью веб-пакета является то, что конфигурация слишком громоздка и подвержена ошибкам.Рекомендуется использовать пакет для упаковки и сборки нашего приложения, что очень удобно в использовании. справочные материалы следующие:
Хотя посылка называется нулевой конфигурацией, на самом деле она все еще требует настройки небольшого количества контента, такого как среда babel и т. д. Здесь написан начальный проект, используя в качестве примера посылки в сочетании с vue.parcel&vue demo
Если вы устанавливали посылку ранее, убедитесь, что глобально установленная версия посылки >= 1.7.0
npm install -g parcel-bundler
git clone git@github.com:nwa2018/parcel-vue-demo.git
cd parcel-vue-demo
npm i
parcel serve ./index.html --open -p 4567 --out-dir dist --no-cache
Когда приложение должно быть выпущено в сети, обратитесь к вышеупомянутой базе данных для завершения инициализации (см. здесь первый шаг и не буду повторять его здесь), и для окончательного выпуска требуются только две команды.
parcel build ./index.html --out-dir public --no-cache
firebase deploy
Начальная страница, которая наконец была опубликована в Интернете, выглядит так:Пример
Документация с docsify
docsify поддерживает использование синтаксиса md для написания документов, а письменные документы элегантны и удобны. Вы даже можете использовать docsify для написания статей, похожих на официальный сайт vue. Вы можете обратиться кдокументировать официальный сайта такжеdocsify awesome,документировать версию этой статьи
отdocisfy-start-demoПример
Установить
npm i docsify-cli -g
Пишите документацию локально
git clone git@github.com:nwa2018/docisfy-start-demo.git
docsify serve docisfy-start-demo/ -o -p 3456
Опубликуйте в Интернете, используйте firebase для завершения инициализации (см. первый шаг здесь и не буду их повторять)
Примечание: это необходимо изменитьfirebase.jsonсерединаpublicПоле./, потому что необходимоdocisfy-start-demoВсе файлы в каталоге передаются на хостинг
cd docisfy-start-demo
firebase deploy
Окончательный онлайн-эффект:Пример
Суммировать
- по команде
parcel serve ./index.html --open -p 4567 --out-dir dist --no-cacheРазрабатывайте приложения Vue локально, с очень небольшим содержанием конфигурации, вы можете использовать текущие популярные функции синтаксиса и инженерные функции. - по команде
parcel build ./index.html --out-dir public --no-cache firebase deployдля упаковки и сборки нашего приложения и передачиfirebase deployПубликуйте приложения одним щелчком мыши и получайте собственный онлайн-адрес - по команде
docsify serve docisfy-start-demo/ -o -p 3456Запустите службу локально, чтобы написать документ и передатьfirebase deployПубликуйте документы одним щелчком мыши и получайте собственный онлайн-адрес