Как запустить любой скачанный из GIT HUB проект VUE?
Я пока изучаю Vue по учебнику и скачал пример кода из книги, но как его запустить для редактирования? из того что нашлось на просторах:
Кроме этого, вы можете запустить пустой проект vuejs, добавить компоненты в ваш проект и импортировать их: import AndOr from './components/AndOr.vue' import Rule from './components/Rule.vue' А потом Vue.use('AndOr'); Vue.use('Rule'); До запуска приложения Vue перенес package.json далее запустил npm install далее npm run serve . и ошибок куча не запустился локал хост
Отслеживать
48.6k 17 17 золотых знаков 56 56 серебряных знаков 100 100 бронзовых знаков
задан 4 мая 2021 в 13:14
63 9 9 бронзовых знаков
Руководство. Vue.js для начинающих
Если вы только начинаете свое знакомство с Vue.js, это руководство поможет вам приступить к работе.
- Ознакомление с песочницей Vue.js для HelloWorld
- Использование Node.js в Visual Studio Code
Необходимые компоненты
- Сначала необходимо установить Vue.js в Windows или в подсистеме Windows для Linux (WSL). Не знаете, какую ОС использовать? Для новичков мы рекомендуем выполнить установку в Windows в целях обучения, а для опытных разработчиков — в WSL. См. статью Выбор между установкой Node.js в Windows или подсистеме Windows для Linux.
Использование Node.js в Visual Studio Code
Установите VS Code, если еще не сделали этого. Мы рекомендуем установить VS Code в Windows, независимо от того, что вы планируете использовать: Vue в Windows или WSL.
- Откройте командную строку и создайте новый каталог с помощью команды mkdir HelloVue , а затем введите каталог: cd HelloVue .
- Установите Vue CLI: npm install -g @vue/cli .
- Создайте приложение Vue: vue create hello-vue-app . Необходимо выбрать какое представление вы хотите использовать представление Vue 2 или Vue 3 Preview, или выбрать необходимый функции вручную.
- Откройте каталог нового приложения hello-vue-app: cd hello-vue-app .
- Попробуйте запустить новое приложение Vue в веб-браузере: npm run serve . В веб-браузере на сайте http://localhost:8080 должно появиться сообщение «Welcome to your Vue.js App» (Добро пожаловать в приложение Vue.js). Чтобы остановить работу сервера vue-cli-service, нажмите клавиши Ctrl+C .
Примечание. При использовании WSL (с Ubuntu или предпочтительным дистрибутивом Linux) для работы с этим руководством убедитесь, что установлено расширение Remote — WSL, которое обеспечит оптимальную работу и редактирование кода с помощью удаленного сервера VS.
Дополнительные ресурсы
- Использование Vue в Visual Studio Code. Узнайте больше об использовании Vue с VS Code, в том числе о расширении Vetur, которое обеспечивает выделение синтаксиса Vue, IntelliSense, поддержку отладки и многое другое.
- Документация по Vue.js
- Сравнение Vue с другими платформами, такими как React или Angular
- Общие сведения о Vue.js
- Выполните первые шаги с помощью схемы обучения Vue.js
# Начало работы
Для создания приложения с отрисовкой на стороне сервера потребуется сначала установить пакет @vue/server-renderer :
npm install @vue/server-renderer ## ИЛИ yarn add @vue/server-renderer # Примечания
- Рекомендуется использовать Node.js версии 12+.
- Версии @vue/server-renderer и vue должны совпадать.
- @vue/server-renderer полагается на некоторые встроенные модули Node.js и поэтому может использоваться только с Node.js. В будущем возможно появится более простая сборка, которая сможет быть запущена и в других средах выполнения JavaScript.
# Отрисовка приложения Vue
В отличие от клиентского приложения Vue, которое создаётся с помощью createApp , приложение с SSR нужно создавать с использованием createSSRApp :
const createSSRApp > = require('vue') const app = createSSRApp( data() return user: 'Василий Пупкин' > >, template: `div>Текущий пользователь: < user >>div>` >) 1
2
3
4
5
6
7
8
9
10
Теперь, можно использовать функцию renderToString для отрисовки экземпляра приложения в строку. Она возвращает Promise, который разрешается отрисованным HTML.
const createSSRApp > = require('vue') const renderToString > = require('@vue/server-renderer') const app = createSSRApp( data() return user: 'Василий Пупкин' > >, template: `Текущий пользователь: >` >) const appContent = await renderToString(app) 1
2
3
4
5
6
7
8
9
10
11
12
13
# Интеграция с сервером
В этом руководстве для запуска приложения будет использоваться Express
npm install express ## ИЛИ yarn add express // server.js const createSSRApp > = require('vue') const renderToString > = require('@vue/server-renderer') const server = require('express')() server.get('*', async (req, res) => const app = createSSRApp( data() return user: 'Василий Пупкин' > >, template: `div>Текущий пользователь: < user >>div>` >) const appContent = await renderToString(app) const html = ` Мой первый заголовок
$appContent> ` res.end(html) >) server.listen(8080) 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
При запуске этого скрипта Node.js теперь сможем получить статичную HTML-страницу по адресу localhost:8080 . Но этот код ещё не гидратирован: Vue ещё не взял на себя управление статическим HTML, отправленным сервером, чтобы превратить его в динамический DOM, который может реагировать на изменения данных на стороне клиента. Это будет рассмотрено далее, в разделе гидратация клиентской части.
(opens new window)
Последнее обновление страницы: около 2 лет назад
Как открыть готовый проект на vue js?
У меня есть готовый проект на vue js. Мне нужно его открыть у себя на компьютере. Я попробовала его открыть через vui ui, однако мне вышла ошибка, что в проекте нет папки nоde_mоduls.
Буду очень благодарна именно за наводку куда смотреть и как гуглить, через что попробовать открыть, как попробовать запустить, система сборки может нужна какая-то. Потому что все объяснения при гуглении касаются того, как создать новый проект.
Код конечно же я вижу в vusual studiо, интересует именно запуск приложения.
- Вопрос задан более двух лет назад
- 1289 просмотров
5 комментариев
Простой 5 комментариев