Как создать Vue js SPA?

Давай начнем с того что у vue есть достаточно исчерпывающая документация тут. На счет npm (npm как и yarn) это менеджер пакетов как composer для php, через него ты можешь установить нужные тебе плагины и тд. Я так понимаю что ты хочешь использовать Vue + Laravel, если так то начиная с версии Laravel 6, работа с vue идет из коробки. Если я не прав то можно спокойно запустить бэк на субдомене (api.test.com), а фронт как test.com (с Laravel такой вариант тоже работает). С помощью axios стучаться по апи для получения или отправки данных. Что бы с помощью Vue Cli создать проект хватит простой команды vue init webpack-simple <имя проекта>. Тут описано более подробно. После выполнения простых шагов по типу указания имени проекта, автора и тд, (выбирается в консоли после ввода команды "vue init webpack-simple <имя проекта>"), вам нужно перейти в директорию с проектом выполнить npm install && npm run dev и все можете начинать работать с фронтом.

Зачем и когда нужен npm ?

Это - пакетный менеджер: установка / удаление пакетов. Также с помощью него часто запускают процесс сборки проекта, для этого в package.json есть секция scripts.

Нужен практически всегда для современных JS-приложений. Работает на NodeJS и ставится с ним (по крайней мере так в Ubuntu, Debian и CentOS).

Будет ли он работать на сервер или он не должен вообще работать на сервере ?

На шаред-хостинге - скорее всего нет, если явно не заявили об этом, или это не спец хостинг. Большинство хостингов построены на LAMP, а значит там PHP.

Можно сделать так: поставить NodeJS + npm на свою машину, вести на ней разработку (vue serve), а затем собрать проект (vue build) и выложить готовый JS на сервер. Серверу лишь нужно будет отдавать готовый JS для браузера. А на беке как вы сами сообщили, будет работать PHP.

Какие шаги необходимо проделать чтобы создать одностраничное приложение используя Vue js на frontend и PHP на backend?

1. Ознакомиться с документацией Vue, пройти уроки

2. Сделать пробное приложение без работы с серверной частью

3. Добавить взаимодействие с сервером

Допустим есть сайт. Серверная часть на PHP. Нужно сделать SPA используя Vue CLI.

Vue CLI - это надстройка над npm, по сути - пакет npm на глобальном уровне. Можно сделать VueJS приложение без Vue CLI, используя только npm. Для этого нужно ознакомиться с работой npm, и желательно, webpack - это такой "сборщик".

Вот я скопировал и подсократил пример из Laravel (для других фреймворков все полностью аналогично):

{
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js ...",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js ..."
    },
    "devDependencies": {
        "axios": "^0.19",
        "sass": "^1.15.2",
    }
}

Разберем как это работает.

Если выполнить npm run dev, то запустится npm run development. А в нем указана переменная окружения для разработки NODE_ENV=development и запуск вебпака node_modules/webpack/bin/webpack.js. Веб-пак работает для новичка сложно, и я рекомендую использовать уже настроенное окружение, от того же Laravel.

В этом режиме произойдет сборка проекта для разработки, например можно отлаживать через Vue.js devtools.

При запуске npm run watch будет аналогичная сборка, но npm еще и будет висеть и наблюдать за изменениями в файлах проекта, делая пересборку проекта на лету. Крайне рекомендую этот режим.

Перед выкладкой на сервер, сделайте npm run prod, на выходе получите JS (+CSS) файлы, которые готовы к размещению на сервере.

Можно ли использовать npm? Если да то КАК это сделать и будет ли оно работать на сайте ? Хостинг не поддерживает Node.js

Ответил выше