tm nuxtjs starter
1.0.0
Это мой минимальный, но функциональный стартовый комплект Vue и демонстрационное приложение по состоянию на август 2018 года.
Если вы устали от усталости JavaScript и хотите быстро и легко начать, взгляните на это. Разработка современного приложения VUE не становится намного проще, чем это.
Демонстрационное приложение-это статический сайт, основной одностраничный приложение, которое имеет несколько адресуемых страниц, которые ленивы загружены по требованию. Он демонстрирует основные операции CRUD: 1) Перечислите фильмы, 2) просмотреть детали фильма, 3) Создать/редактировать и 4) Удалить фильм.
Демо использует браузер LocalStorage для хранения данных, что означает, что он работает без бэкэнда. Источники содержат модуль, который выполняет реальные вызовы AJAX на бэкэнд REST - вам просто нужно включить модуль и написать сервер, и вы находитесь в хорошем пути, чтобы иметь реальное веб -приложение. Я разработал API API -сервер RESTPIE3 Python, который реализует этот простой API фильма в качестве примера.
Демонстрационное приложение состоит из простого, но мощного технического стека, который предоставляет важную функциональность для создания современных веб -приложений. Он стоит на плечах нескольких великих библиотек:
├── /assets/ # assets to be processed by Nuxt
│ └── /layout.sass # main layout of site
├── /components/ # vue components used by pages
│ └── /myheader.vue # site header component
├── /layouts/ # page top-level layouts
│ └── /default.vue # main site layout
├── /pages/ # pages
│ ├── /about.vue # about page
│ ├── /index.vue # home page, lists movies
│ ├── /moviedetails.vue # details page, views a movie
│ └── /movieedit.vue # edit page, edits a movie
├── /static/ # static assets, accessed/exported as is
│ ├── /favicon.ico # favicon
│ └── /exampledata/
│ └── /movies.json # sample list of 4 movies - loaded initially
├── /store/ # data stores managed by Vuex
│ └── /index.js # the single store for this app
├── config.js # app config, select ajax or localstorage
├── nuxt.config.js # nuxtjs config
├── package-lock.json # npm something
├── package.json # list of npm packages required
├── README.md # this doc
├── serverapi_ajax.js # API, talks AJAX to a real backend
└── serverapi_localstorage.js # API, talks to localStorage
Вот как запустить стартер в местной машине:
$ git clone https://github.com/tomimick/tm-nuxtjs-starter
$ cd tm-nuxtjs-starter
$ npm install
$ npm run devЗатем укажите свой браузер на http: // localhost: 3000.
Когда любой из зависимых файлов изменяется, изменения загружаются горячими и мгновенно видимы. Наслаждайтесь разработкой!
Nuxtjs-это отличная маленькая структура, которая привносит структуру и основную функциональность спа-салона в приложения на основе VUE. Это позволяет легко начать разработку приложения, позволяя вам сосредоточиться на вашем основном приложении, но также предоставляет практики, направленные на создание более сложного приложения.
Nuxt.js преимущества в двух словах:
Nuxt.js использует преимущества единичных компонентов Vue, что является отличным практическим решением для инкапсуляции шаблона, логики и стиля компонента Vue вместе в одном и том же исходном файле.
Nuxt.js напрямую вдохновлен NextJS, которая является той же основой для экосистемы React. Nuxt.js представляет немного больше иерархии, имея папки для макетов, плагинов и промежуточного программного обеспечения.
Поскольку Nuxtjs имеет инструмент для поддержки разработки приложения с большим количеством данных и кода, обычно требуется какое -то решение для управления состоянием для обмена данными на страницах и компонентах.
Nuxtjs изначально интегрируется с библиотекой управления Vuex State. Это хорошо продуманная библиотека, которая авторируется Эваном, вы, тем же талантливым парнем, который создал Vue. Vuex достаточно прост, чтобы быстро учиться. Вы строите свой магазин из данных о состоянии, а также мутации и функции действия.
Чтобы активировать Vuex, вы просто бросаете компонент магазина в магазин/ папку, где Nuxt выбирает его и делает его доступным, как this.$store во всех компонентах страницы Vue. Это все для этого, дальнейшая конфигурация не требуется.
Также возможно использовать другие государственные библиотеки, такие как MOBX, но из-за встроенной интеграции VEUEX является естественным выбором с NUXTJS.
Возможность генерирования статического сайта с помощью Nuxtjs является важным инструментом, который позволяет запускать приложения без сервера бэкэнд. Вы можете экспортировать сайт на страницы GitHub, NetLify или Amazon S3. (Но проверьте несколько Gotchas с префиксами сайта+ссылки с страницами GitHub.)
Другая победа статической генерации - иметь возможность подключить приложение с любым бэкэнд отдыха, независимо от того, что такое язык бэкэнд. Чистое разделение фронта и бэкэнда также обеспечивает модуляризацию на техническом уровне и, возможно, на уровне команды.
Чтобы генерировать статический сайт, просто запустите
$ npm run export И статические файлы будут сгенерированы в dist .
Чтобы проверить статический сайт локально через локальный www -server, я быстро запускаю сценарий Python: (Python3 -m http.server)
$ npm run pyserveА затем протестируйте сайт по адресу http: // localhost: 8000.
Nuxtjs хорошо работает, генерируя домашнюю страницу, размер которой составляет всего около 69 КБ . Это хороший результат из коробки.
Браузер загружает домашнюю страницу в общей сложности 4 запроса, и каждая новая страница, загруженная по требованию, делает один запрос JS один раз .
Page Size Inspector Report
URL: https://nuxtjs.tomicloud.com/
REQUEST REQ BYTES
TOTAL___________________________________________4____68,802
Document________________________________________1_______960
-nuxtjs.tomicloud.com/ 960
Script__________________________________________3____67,842
-nuxtjs.tomicloud.com/_.../0b088016842f5f4f735 53,552
-nuxtjs.tomicloud.com/_.../1c78d24f170a4f6d1ea 13,680
-nuxtjs.tomicloud.com/_.../f17a22e19f8ece7f59c 610(Отчет моего инспектора по размеру размерной страницы Chrome.)
Vue и React - это действительно хороший выбор для современного веб -разработчика: они основаны на современной концепции реактивного/виртуального DOM, они легкие и чрезвычайно популярны среди больших экосистем. Разработчик не всегда может выбрать между этими двумя, но если можно, в конце концов, это может быть вопрос вкуса, который разработчик считает лучше. Вкусовое решение обычно сводится к философии того, нравится вам JSX или шаблоны.
Если я смогу выбрать свое оружие для фронтального проекта, я бы выбрал Vue. Основная причина для меня - читаемость кода и личная производительность. Я могу читать и писать HTML -шаблоны с JavaScript более легко, чем JSX. Длинные пробежки JSX могут быть головокружительными и несколько шумными. Шаблон, украшенный лишь несколькими директивами, кажется мне более читабельным. Мне нравится сначала видеть строительные блоки HTML в линии, а не jsx map ()-функции, тройные операторы или короткие замыкания. Я полагаю, что шаблоны чувствуют себя более естественными для меня из -за моей истории работы с 3 элементарными строительными блоками Интернета, HTML, JS и CSS задолго до того, как повелитель JavaScript захватил мир.
Я очень ценю разделение 3 проблем, которые практикуются в однофабриковах Vue. Я предполагаю, что я представляю старую школу мышление, которое говорит о том, что представление, логика и стиль должны иметь некоторое разделение между ними и не следует смешивать все вместе. У них есть связь между ними, это естественно, и они должны располагаться рядом друг с другом, предпочтительно в одном и том же исходном файле, но не смешанном. Слишком плотная связь может оказаться в спагетти.
Тем не менее, я также понимаю противоположные взгляды, которые утверждают, что реагирует, лучше, чем Vue, и которые утверждают, что другой шаблон DSL является более слабым подходом. Если вы пришли из фона JavaScript, React может чувствовать себя более естественным для вас. Я могу работать с обоими вариантами (я даже сделал эти 2 стартовых комплекта!), Но, возможно, у Vue есть небольшое преимущество для меня.
Если вы хотите прочитать об одном из недавних дебатов Vue vs React, проверьте этот поток Reddit.
Идите дальше и возьмите этот Vue Starter и, возможно, мой сервер RESTPIE3 Python REST API также и создайте свой отличный сервис.
Вы также можете связаться со мной, чтобы спросить, доступен ли я для фрилансеров.
Если вы предпочитаете реагировать на VUE, я также закодировал этот же стартер с React NextJS.
MIT Лицензия
