Убедитесь, что установлены NodeJS (LTS версии) и npm (npm встроен в ноду по умолчанию). Для проверки можно выполнить в консоли следующие команды:
node --version
npm --version
Если соответствующие пакеты не установлены, нужно установить (https://nodejs.org/)
Для установки зависимостей выполните команду в консоли (в корневой папке):
npm install
В staging(production) окружении лучше использовать команду:
npm ci
Основное отличие в командах: npm ci
установит версии зависимостей, зафиксированные в package-lock.json
; npm install
установит зависимости и внесет изменения в package-lock.json
. Подробнее: https://docs.npmjs.com/cli/v8/commands/npm-ci.
Данный проект использует следующие зависимости:
Зависимость | Описание | Документация |
---|---|---|
Babel | Используется для сборки проекта | https://babeljs.io/docs/en/ |
SASS | Используется для стилизации компонентов | https://sass-lang.com/documentation/ |
Storybook | Используется для демонстрации компонентов | https://storybook.js.org/docs/react/get-started/introduction |
Vite | Используется в качестве локального сервера для storybook | https://vitejs.dev/guide/ |
Cypress | Используется для тестирования компонентов | https://docs.cypress.io/guides/component-testing/quickstart-vue |
Eslint | Используется для проверка качества JS/TS кода | https://eslint.org/docs/latest/ |
Stylelint | Используется для проверка качества SCSS кода | https://stylelint.io/ |
Prettier | Используется для форматирования кода | https://prettier.io/docs/en/index.html |
Код проекта должен соответствовать соглашению по коду: https://etalongroup.atlassian.net/l/cp/pJuYXkba
При разработке в качестве инструмента для демонстрации компонентов используется Storybook. Чтобы запустить демонстрацию, выполните следующую команду в корне проекта:
npm run storybook
После запуска, Storybook автоматически откроет браузер на нужной странице (по умолчанию: http://localhost:6006/).
В сборке проекта участвуют несколько команд, которые запускаются последовательно.
Для сборки выполнимте следующую команду в консоли:
npm run build
Данная команда последовательно выполнит следующие команды:
-
build:lib
- сборка JS кода -
build:styles
- сборка SCSS кода -
build:types
- сборка типов проекта
Все результирующие файлы будут помещены в папку lib
.
TBD
К прочтению:
Для запуска линтера и проверки чистоты кода необходимо запустить команду в консоли:
Lint with ESLint
npm run lint
Проект можно запустить в DEV режиме и тестировать Ui-KIT:
npm run dev
Режим тестирования еще не настроено !!!!!!!!!!
Run Unit Tests with Vitest
npm run test:unit
Run End-to-End Tests with Cypress
npm run build
npm run test:e2e # or `npm run test:e2e:ci` for headless testing
Режим тестирования еще не настроено !!!!!!!!!!
Дополнительная информация о проекте:
This template should help get you started developing with Vue 3 in Vite.
VSCode + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).
TypeScript cannot handle type information for .vue
imports by default, so we replace the tsc
CLI with vue-tsc
for type checking. In editors, we need TypeScript Vue Plugin (Volar) to make the TypeScript language service aware of .vue
types.
If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a Take Over Mode that is more performant. You can enable it by the following steps:
- Disable the built-in TypeScript Extension
- Run
Extensions: Show Built-in Extensions
from VSCode's command palette - Find
TypeScript and JavaScript Language Features
, right click and selectDisable (Workspace)
- Run
- Reload the VSCode window by running
Developer: Reload Window
from the command palette.