Следите за тем, как я документирую свою работу, жизнь и проекты.
- Настройка Mac
- Запуск нового СПА-проекта
- Построение SPA-макета с помощью Tailwind
- Начало работы с контролем версий git
- Установить иконки Feather с открытым исходным кодом
- Как добавить Vuex и Axios в свой проект
- Давайте настроим TablePlus графический интерфейс базы данных
- Как добавить Laravel Auth в ваш проект Vuejs
- Как импортировать Marked Markdown в ваш проект Vuejs
Теперь, когда локальная среда настроена. Мы можем легко запустить новый проект, используя Laravel и Vuejs.
- Сначала давайте установим node и npm на ваш локальный компьютер, если у вас его еще нет, запустив brew install node
- Затем проверьте, установлены ли узел и npm, запустив npm -v и node -v.
- Откройте папку dev с помощью команды cd в приложении терминала. Я всегда использую код в качестве каталога и сохраняю его в избранное. Давайте запустим cd code
- Создайте новый проект composer create-project — Prefer-Dist laravel/блог laravel
- Откройте корень проекта cd blog
- Обычно я удаляю некоторые зависимости по умолчанию из файла package.json, включая bootstrap, jquery, popper.js.
- Затем я устанавливаю остальные зависимости, запустив npm install.
- Здорово! Давайте установим Vue Router, чтобы включить функции SPA — полные инструкции здесь https://router.vuejs.org/installation.html
- Также вы можете установить lint Vuejs для Atom, если у вас его нет — https://atom.io/packages/language-vuejs просто нажмите кнопку установки, и он добавит его в Atom.
- Наконец, вы можете скомпилировать с помощью команды npm run watch. Вы получите пару ошибок, которые подчеркнут, что вы все еще вызываете загрузку и т. д., поэтому вам просто нужно удалить их из файлов.
Теперь бонусные баллы за использование браузера Chrome с vuejs. Если да, то вам нужно установить расширение Chrome для Vuejs, которое вы можете найти здесь — https://chrome.google.com/webstore/search/vuejs.
Бонусные баллы для обмена. В последнее время у меня было несколько проблем с запуском npm run hot. Я искал решения, но без особого успеха. Однако недавно я читал последнюю документацию по laravel mix и подумал, что стоит попробовать BrowserSync. Я просто добавил mix.browserSync(‘blog.test’); в файл webpack.mix.js и повторно скомпилирован с помощью npm run watch и Eureka! Зависимость была добавлена автоматически, и, наконец, я снова могу двигаться со скоростью в реальной тестовой среде. Еще одна дополнительная функция, которую вы получаете с BrowserSync, — это возможность одновременного использования нескольких устройств для тестирования — это очень полезно, если вы создаете что-то адаптивное. Но мне не хватает простоты основных функций функции горячей перезагрузки, которую я использовал раньше. Но пока я не найду исправление для этого, похоже, что я придерживаюсь BrowserSync.
Это все на сегодня. Дайте мне знать, если у вас есть какие-либо советы или рекомендации, чтобы поделиться с другими.
До скорого!
Бен
