Имея опыт создания веб-приложений, сначала используя только 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