[Назад](./web_01.md) | [К содержанию](../readme.md#практика-1-введение-в-web-разработку) | [Дальше](./web_03.md) # Vue.js: концепции ## Зачем нужен Vue.js? * [Оригинальное видео на YouTube](https://www.youtube.com/watch?v=4xyb_tA-uw0&list=PLvTBThJr861yMBhpKafII3HZLAYujuNWw&index=2) * [Копия на РуТубе](https://rutube.ru/video/5813a6f4551d7579b32dae1527769256/) ## Структура проекта ![](../img/web_006.png) Рассмотрим структуру вновь созданного проекта (чтобы понимать что откуда растет) * `package.json` - главный файл в проекте на **node.js**. В нем хранятся основные параметры проекта и зависимости: ```json { "name": "vue-project", "version": "0.0.0", "private": true, "type": "module", "scripts": { "dev": "vite", "build": "vite build", "preview": "vite preview" }, "dependencies": { "vue": "^3.5.12" }, "devDependencies": { "@vitejs/plugin-vue": "^5.1.4", "vite": "^5.4.8" } } ``` В объекте **scripts** хранится набор команд, которые можно выполнить с помошью команды `npm run`. Например команда `npm run dev` запустит локальный веб сервер. В объектах **dependencies** и **devDependencies** хранятся зависимости (названия и версии внешних библиотек). Отличия в том, что в **dependencies** хранятся только те пакеты, которые нужны для сборки "прода", а в **devDependencies** и те, которые нужны при разработке. * `index.html` - "рыба" для загрузки сайта. Мы в него ничего писать скорее всего не будем, но в реальных проектах может понадобиться добавить какой то код в заголовок для аналитики или загрузить js-скрипт ```html Vite App
``` * Каталог `public` - место для статического контента (картинки и т.п.) * Каталог `src` - исходный код приложения * `main.js` - стартовый скрипт, который создаёт приложение **VUE** при запуске в браузере ```js import './assets/main.css' import { createApp } from 'vue' import App from './App.vue' createApp(App).mount('#app') ``` где: * `import { createApp } from 'vue'` - импортирует функцию _createApp_ из фреймворка * `createApp(App)` - собственно создает приложение (в параметрах основной vue-файл приложения) * `.mount('#app')` - указывает место в **html** файле, в которое будет внедрён сгенерированный контент (DOM) * `App.vue` - Точка входа в приложение. **VUE** использует HTML-подобный синтаксис для описания компонента. Синтаксически Vue SFC совместим с HTML. >[Тут подробнее](https://ru.vuejs.org/api/sfc-spec.html) Каждый файл *.vue состоит из трёх типов языковых секций верхнего уровня: `