Имея опыт создания веб-приложений, сначала используя только HTML, CSS и немного JavaScript, а затем работая с Wordpress, а затем со средой React.js, в последнее время я также стал больше интересоваться Vue.js. Теперь я надеюсь сделать это интересным и информативным для вас, чтобы следовать за мной в моем путешествии по изучению Vue.

Что такое Vue? Это JavaScript Framework для создания внешнего интерфейса веб-приложений. Другие подобные или хорошо известные фреймворки включают React и Angular.

Почему я описываю свой путь создания веб-приложения на Vue.js? Несмотря на то, что существует множество руководств, письменных и видеоматериалов, а также множество хорошо отвеченных вопросов о Stack Overflow, я все же нахожу себя в некоторых моментах, где я застреваю и не могу найти ответ на свою проблему. Часто кажется, что в учебниках не учитываются все простые вещи, потому что для автора они кажутся неявными, но, начиная работать над новым проектом в новой среде, я уверен, что многие люди, как и я, застревают в какая-то — возможно, незначительная — проблема. И я надеюсь, что, находя ответы для себя, я смогу дать эти ответы и другим. Для меня имеет смысл записать это как своего рода документацию о моем прогрессе с самого начала, до того, как я стану лучше использовать фреймворк или привыкну к некоторому синтаксису или структуре, которые предоставляет фреймворк. Пожалуйста, не стесняйтесь оставлять мне конструктивные отзывы о том, какая информация неверна и что я пропустил.

Прежде чем начать работу с Vue. Моя базовая настройка включает в себя установку npm в качестве менеджера пакетов (получите npm и node.js здесь), и я работаю с терминалом bash в системе macOS. (Примечание: в тот момент моя версия node.js все еще была на 9.x, но после обновления до 10.x проект все еще работает.)

Настройка нового проекта в Vue.js. Просматривая страницы Начало работы с Vue.js, а также документацию и учебные пособия на главной странице Vue.js, я вскоре узнал о Vue CLI. Vue CLI очень похож на Создать приложение React для React.js. Он устанавливает готовую к запуску среду проекта, которую можно изменять и расширять в соответствии с потребностями. Итак, в основном я выполнил команду

$ npm install -g @vue/cli

установить Vue CLI,

$ vue --version
3.8.2

чтобы проверить мою установку и версию, которая на данный момент 3.8.2, а затем

$ vue create test-project

для создания моего проекта Vue. Это создает папку с необходимыми модулями узлов, настройками веб-пакета по умолчанию, инициализированным проектом git, файлом README.md и другими файлами, такими как aindex.html, основной компонент App.vue и папка с компонентом HelloWorld.vue, а также еще несколько файлов, которые кажутся не слишком важными. , если я еще не хочу их менять. Я перечислил общую структуру ниже.

- node_modules/
- public/
  |- favicon.ico
  |- index.html
- src/
  |- assets/
  |- components/
     |- HelloWorld.vue
  |- App.vue
  |- main.js
- .gitignore 
- babel.config.js
- package-lock.json
- package.json
- README.md

Чтобы сделать это с первой попытки, я последовал руководству и запустил следующую команду в папке моего проекта, чтобы запустить приложение.

$ npm run serve

В командной строке должно появиться что-то похожее на это.

Compiled successfully in 3664ms 16:38:55
App running at:
- Local: http://localhost:8080/
- Network: http://192.168.0.14:8080/
Note that the development build is not optimized.
To create a production build, run npm run build.

Теперь к приложению можно получить доступ через браузер на http://localhost:8080/. На этом мое путешествие на сегодня заканчивается.

Вы можете посетить мой проект на моем Github (https://github.com/revialim/vue-project) или вернуться почитать через несколько дней.

Продолжайте читать здесь: Изучаем Vue.js — часть 2