Установка VueJs
![Морфиус предлагает две пилюли. В правой руке зеленая vueJS в левой руке красная nodeJS](/uploads/article/images/2024/6671f648061bc.webp)
Прелюдия
Конечно, изначально я думал, что просто поставлю какой-то там npm, какую-то версию в репах убунты, мне много не надо.
sudo apt install npm
npm install -g @vue/cli
Почему, я всегда думаю типа: ща побыстрому поставлю, потыкаю и спать, и всегда в итоге полночи кавыряюсь?
В общем сыпануло ошибок...
Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules'
Нормальный кодер бы от sudo выполнил и спать пошел, но я в Сибири вырос и мог что-то отморозить... Повозился с правами, и получил какие-то другие ошибки на джаваскриптном. Еще сказали, что у меня там все устарело, и попросили обновить, и я обновил, и ошибок стало больше.
Вода
Ты может быть уже давно в JS и в теме, что и как ту разворачивается, но я завязал еще во времена споров, что курче Jquery или MooTools. Кто победил в той войне, сейчас уже понятно, но как ты понимаешь ни какого nodeJs еще и в зародыше не было.
У меня были проблемы с версиями npm, кто-то достал проект из комода, там чуть ли ни бэта vuejs была, и пришлось на машине два npm поднимать. Да, я тут немного соврал, что прямо совсем не тыкал.
Установка npm
Вспомнил, что эта штука называлась nmv (node veriosn manager). Она изолирует установку разных версий ноды, значит мы не будем парится с правами и версиями. Свежие ссылки на гитхабе.
Кстати, если вы тот счастливчик который гамает и кодит в одном месте, т.е. под виндой, то вам сюда, там установка nvm под Windows.
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
command -v nvm
Последняя команда, для проверки установки nvm. У меня промолчала, ну либо не хочет расстраивать, либо всё хорошо.
nvm install node
Теперь, мы установили последнюю версию npm и nodeJs. Хотя, это я так устанавливаю, а люди с образованием, устанавливают NodeJS, а Node Package Manager (npm) идет прицепом, ведь это просто отпрыск от NodeJS. Но, мне это не интересно, мне нужно поставить npm, чтобы оттуда достать VueJs.
Я такой радостный, запустил команду на установку последней версии ноды:
Command 'nvm' not found, did you mean:
Я тут не did не mean, зато краем глаза в доке на гите видел траблшутинг (вот америкосы, шутингов им не хватает). Ну и раз команда не найдена, значит изменения которые внес nvm своим баш скриптом мне не подтянулись. Подтянем.
source ~/.bashrc
nvm install node
Всё, установилося. Ага, установи лося... Дока у vue прекрасная и является преимуществом перед тем же реактом. Там я нашел рекомендацию использовать cli, типа с ним потом проще жить и его не зря придумали, так и сделаем.
Обратите внимание, есть ли у вас сообщение в терминале.
Your user’s .npmrc file (${HOME}/.npmrc)
has a `globalconfig` and/or a `prefix` setting, which are incompatible with nvm.
Run `nvm use --delete-prefix v22.3.0` to unset it.
Вероятно, это из-за прошлых попыток установить npm. Выполните: nvm use --delete-prefix v22.3.0
Установка VueJS
npm install -g @vue/cli
Меня часто спрашивают, почему компания которая сделала Ведьмака называется CD PROJECT RED, это не просто, что они старые игры реанимирровали, типа на дисках, это еще и переход в папку с проектом, я надеюсь, это верное предположение и красивая отсылка разработчиков к рутине.
cd /project/red
Теперь создадим проект VueJs. Переходим (или создаем) в директорию, где не пылятся наши 100500 проектов и создаем новый пет-проджект (cd project pet).
cd /projects
vue create my-project
Во время установки я выбрал "Default ([Vue 3] babel, eslint)". Я всегда ставлю всё самое свежее, потом парюсь с тем, что в свежем свежие проблемы, которые еще не гуглятся, но ничего с собой поделать не могу.
Открываем в своем любимом редакторе наш проект, стартуем сервер и наслаждаемся.
Так, стоп. Как стартовать-то? Идем в package.json и смотрим что там в секции scripts.
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
- serve - запускаем сервер (то, что нужно)
- build - для создания продакшн билда
- lint - прогнать линт, чекнет что ваш код хорош.
В файле README.md, это все замечательно описано и можно ни куда не ходить.
npm run serve
А я буду решать вновь возникшие ошибки.
Траблшутинг
После установленного npm и создании проекта vuejs получаем ошибку.
Command 'npm' not found, but can be installed with
Проверяем какую версию сейчас содержит nvm.
nvm current
> none
Ага, ни какую, а какие вообще есть?
nvm list
> v22.3.0
Хорошо, используем и понимаем в чем проблема.
nvm use v22.3.0
Run `nvm use --delete-prefix v22.3.0` to unset it.
Я добавил в статью описание этой проблемы. Нужно просто выполнить, что оно просит.
Всё! Удачи, счастья, любви и хорошего коддинга )