Практика: фронтенд для начинающих

Это простое руководство для тех кто хочет развернуть локально проект и начать уже писать код.

Начнем с того, что у вас уже есть на чем разрабатывать, в кратце описал здесь рекомендации по выбору ПК. Скачать исходники описанные в статье.

Среда

1. Устаналиваем vscode, большинство фронтенд разработчиков используют именно это IDE. Во вкладке extensions, устанавливаем расширение eslint и prettier.

2. Устанавливаете браузер, например chrome или firefox, если нет. Устанавливаем расширение vue-devtools для браузера.

3. Скачиваем и устанавливаем nodejs, используется во фронтенд как среда выполнения, чтобы мы могли локально разрабатывать код, поднимать локальный сервер, выполнять команды операционной системы ввода и вывода и т.д.

4. Устанавливаем git (опционально), удобный инструмент для совместной разработки и фиксации кода.

Когда среда уже у вас готова, приступим к созданию проекта.

Время поработать ручками

План такой: создаем и настраиваем проект, подключаем vuejs, primevue.

1. Создаем проект с использованием сборщика vitejs, он прост в использовании и требует меньше ресурсов, чем wepack.

   Переходим на сайт, дальше в раздел Getting Started, выбираем vue-ts шаблон.

   В терминале вводим команды на установку этого шаблона.

   Шаблон vue-ts создает проект в котором уже есть предустановлен typescript и vuejs.

   vuejs выбран был, так как порог входа в нем попроще, чем у react и angular. typescript — привыкаем сразу к типизированному коду.

2. Следуем подсказкам в терминале после запуска, переходим в сам проект, мне удобно сразу открыть проект в vscode и уже в терминале из vscode запустить установку проекта.

   • npm create vite@latest — жетально выполнять команду там, где у вас будут хранится проекты для разработки, в запущенной директории создатся папка проекта.

   • Запускаем vscode, открываем созданный проект. При запуске vscode предложит установить расширение vue — official (он же volar), помимо его устанавливаем еще prettier и eslint. Старайтесь не ставить много расширений, по большому счету вам нужны только эти три.

   • В меню vscode находим вкладку терминал и запускаем терминал (можно его еще вызвать с помощью горячих клавиш, они указаны когда откроете вкладку терминал).

     • По умолчанию на макбуке ctrl + `, но в русской раскладке не открывает, это связано с тем что в русской и англоязычной раскладке другие символы. Поэтому чтобы побороть эту проблему нужно переназначить удобные для вас комбинации клавиш для открытия терминала.

     • Если у вас windows, то у вас скорее всего powershell по умолчанию, меняем его на bash.

       

     • npm run devНажимаем стрелочку вниз, «Выберите профиль по умолчанию» и выбираем bash (zsh). Если уже был открыт powershell терминал, закрываем его.

   • В терминале вводим след. команды:

   • npm install

   • npm run dev

     Теперь вы сможете писать код и видеть изменения в браузере, откройте только в браузере ссылку, которая появилась после ввода команды в терминале.

     По умолчанию настроена горячая перезагрузка, т.е. вам не нужно перезагружать страницу проекта в браузере, vite сделает это за вас.

     Возможно для кого-то удобно открыть среду разработки на одном экране, а браузер на другом, чтобы не переключаться между окнами. Но лично мне хватает 16 дюймового экране ноутбука. На крайний случай временно делю экран между vscode и браузером.

3. Работа с системой контроля версий git

   Если у вас в терминале запущен проект, прерываем его через горячие клавиши (у меня это ctrl + C)

   Для чего нужен git и как его использовать лучше изучите отдельно на ютубе например. А мы продолжим.

   Инициализируем репозиторий проект, в терминале:

   git init

   Затем добавляем файлы для отслеживания:

   git add .

   Дальше фиксируем изменения:

   git commit -m "init project"

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

   Добавлять файлы для отслеживания и фиксировать изменения можно также через IDE vscode, для тех кому интересно можете посмотреть уроки на ютубе как пользоваться IDE.

   Во время работы можете закрывать терминал, он скрывается, так что можете не боятся его закрывать, так больше рабочего места.

   Дальнейшие правки по проекту также добавляйте через систему контроля версия с осознанным комментарием.

   Сначала добавляем файлы для отслеживания через git add . , затем фиксируем git commit -m "некоторый комментарий"

   По сути для базовой фиксации кода вам этого достаточно.

4. Устанавливаем ui-библиотеку для vuejs в проект, переходим на сайт, get started -> vite -> в терминале вводим npm install primevue

   И дальше по инструкции устанавливаем тему по умолчанию и подключаем библиотеку в проект (инструкция на сайте). Проверьте, что у вас также работает пример как на сайте у вашего локального сервера (не забудьте запустить в терминале npm run dev). Для удобстве установка пакетов и запуска скриптов, можете открывать несколько терминалов. Делается это через иконку плюса в окне терминала.

   

5. Установка eslint и prettier и настройка

   В терминале выполняем:

   npm install --save-dev eslint @eslint/js @types/eslint__js typescript-eslint eslint-plugin-vue @typescript-eslint/parser @typescript-eslint/eslint-plugin prettier eslint-config-prettier eslint-plugin-prettier

   Создаем файл конфигурации.

   

   Первая иконка файла создает новый файл в проекте (соответственно вторая иконка создает папку в проекте), нажимаем ее и называем файл eslint.config.js

   При создии файлов важно учитывать, чтобы у вас не была выбрана папка внутри проекта, а то файл будет создаваться в этой папке, а нам нужен корень проекта. Убрать выделение с папки можно нажав клавишу esc.

   Вставляем туда след. код:

   import eslint from '@eslint/js'; import tseslint from 'typescript-eslint'; import pluginVue from 'eslint-plugin-vue'; import eslintConfigPrettier from 'eslint-config-prettier';  export default tseslint.config(   eslint.configs.recommended,   ...tseslint.configs.recommended,   ...pluginVue.configs['flat/recommended'],   {     files: ['**/*.{ts,tsx,js,jsx}'],     ignores: ['dist'],     rules: {       '@typescript-eslint/no-unused-vars': 'warn',     },   },   eslintConfigPrettier );

   По аналогии создаем файл .prettierrc, со след. содержимым

   {   "semi": true,   "singleQuote": true,   "printWidth": 80,   "tabWidth": 2,   "trailingComma": "es5" }

   В папке .vsvode создаем файл settings.json

   {   "editor.codeActionsOnSave": {     "source.fixAll.eslint": "explicit"   },   "editor.defaultFormatter": "esbenp.prettier-vscode",   "editor.formatOnPaste": false,   "editor.formatOnSave": true, }

   Не забыв убрать из игнорировать в файле .gitignore,

   после строки !.vscode/extensions.json

   добаляем новую строку !.vscode/settings.json

6. Донастройка проекта

   npm install --save-dev @types/node

   • позволяет дать знать typescript что мы запускаем проект на nodejs и у нас есть встроенные методы nodejs.

   Устанавливаем иконки npm install primeicons

   Для настройки красивых путей в импорте:

   В файле vite.config.ts вносим изменения:

   import { defineConfig } from 'vite'; import vue from '@vitejs/plugin-vue'; import { fileURLToPath, URL } from 'node:url';  // https://vitejs.dev/config/ export default defineConfig({   plugins: [vue()],   resolve: {     alias: {       '@': fileURLToPath(new URL('./src', import.meta.url)),     },   }, }); 

   В файл tsconfig.json

   {   "compilerOptions": {     "baseUrl": ".",     "paths": {       "@/*": ["src/*"]     }   },   "files": [],   "references": [     { "path": "./tsconfig.app.json" },     { "path": "./tsconfig.node.json" }   ] }   

   Содержимое файла vite-env.d.ts делаем таким:

   /// <reference types="vite/client" />  declare module '*.vue' {   import type { DefineComponent } from 'vue';   // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-empty-object-type   const component: DefineComponent<{}, {}, any>;   export default component; }

   App.vue

   <template>   <div class="flex justify-center">     <Button label="Check" icon="pi pi-check" />   </div> </template>  <script setup lang="ts"> import 'primeicons/primeicons.css'; import Button from 'primevue/button'; import './main'; </script>

   main.tsx

   import App from './App.vue';  import { createApp } from 'vue'; import PrimeVue from 'primevue/config'; import Aura from '@primevue/themes/aura';  const app = createApp(App);  app.use(PrimeVue, {   theme: {     preset: Aura,   }, });  app.mount('#app');

   Соответственно в папке src останется только 3 файла: main.tsx, vite-env.d.ts и App.vue. Остальные удаляем.

   В package.json раздел scripts делаем таким:

   "scripts": {   "dev": "vite",   "build": "vite build",   "preview": "vite preview",   "eslint": "eslint .",   "eslint:fix": "eslint --fix .",   "type-check": "vue-tsc -b" },

Выводы

Теперь у нас есть настроенный проект готовый к вашему творчеству.

Если в кратце, у нас теперь vscode настроен чтобы производить автоформатирование и исправление eslint ошибок при сохранениии файла в IDE. Есть команды eslint и type-check для проверки качества кода. Которые в дальнейшим можно внедрить в CI/CD, а также до локальной фиксации файлов, чтобы у нас не комитлся код, пока есть ошибки.

Настроенный алиас @, чтобы пути в проекте не были относительными.

Настроить проект этими базовыми инструментами не занимает много времени, но зато упрощает разработку в будущем.

Для более продвинутых пользователей, можно настроить отладку приложения в vscode.