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

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

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

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

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

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

Следуем подсказкам в терминале после запуска, переходим в сам проект, мне удобно сразу открыть проект в 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 и браузером.

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

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

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

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

git init

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

git add .

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

git commit -m "init project"

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

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

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

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

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

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

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

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

Установка 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

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

npm install --save-dev @types/node

Устанавливаем иконки 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 делаем таким:

/// 

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

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"
},