Блог

Главная - Вопросы по программированию - Как добавить vue-cli в существующий проект?

Как добавить vue-cli в существующий проект?

#vue.js #webpack #vue-cli

#vue.js #webpack #vue-cli

Вопрос:

У меня есть проект на Vue.js использование Webpack. И я хочу добавить к нему функции vue-cli, чтобы я мог работать с ним, как с проектом генерации vue-cli. Но я не знаю, как интегрировать vue-cli с существующим проектом.

С новым проектом я могу это сделать vue create <project-name , но я не смог найти инструкцию по его интеграции с существующими проектами. Есть ли официальный способ сделать это? (Я полагаю, я могу просто создать новый проект и переместить туда все исходные файлы, но, возможно, есть лучший способ сделать это)

Комментарии:

1. Вы пробовали эту команду ‘npm install -g @vue / cli’?

2. Официального способа сделать это нет. В документах уточняется, что Vue CLI использует все приложение Vue и ничего не говорит об интеграции в существующие проекты.

3. @ParthJasani да, речь идет не об установке vue-cli, а о добавлении его в существующий проект

4. @NinoFiliu Я подумал то же самое, спасибо за разъяснение 😉 Я попытаюсь перенести свой репозиторий в новый проект vue-cli, как я описал тогда, и опубликую его в качестве ответа, если он будет успешным

5. Вы можете создать проект на основе существующего и выбрать опцию слияния. конечно, часть ваших файлов будет перезаписана:-(используйте git для возврата и извлечения из вашего репозитория. Это то, что я делаю

Ответ №1:

Внутри папки проекта в терминале введите vue create .

Ответ №2:

Используя терминал, выполните следующую команду внутри папки вашего проекта:

 npx @vue/cli create .

Ответ №3:

Я сделал это «болезненным» способом — создав новый проект и сравнив его с моим существующим. Я говорю болезненно, потому что я использовал Bootstrap непосредственно на индексной странице, а также настройки PWA. Пакет использовался в качестве упаковщика, И все мои папки были в корне (активы, компоненты и т. Д.).

Однако это было не так уж плохо. Что я сделал, чтобы упростить переход:

  • скорректировал иерархию папок и имена в соответствии с новым проектом
  • добавлены недостающие плагины в package.json
  • удалены все настройки PWA из index.html . Они вводятся автоматически.
  • добавлены недостающие файлы и папки из нового проекта, а именно
    • /public с содержимым
    • все отдельные файлы конфигурации в корне
  • добавлен .eslintignore, игнорирующий node_modules/**
  • переименовано index.js чтобы main.js (хотя, вероятно, в этом нет необходимости)
  • добавлен bootstrap css через импорт в main.js
  • скорректированные пути к изображениям (значок и другие). Пути и имена значков, вероятно, можно настроить
  • обновлен сценарий «serve» до «vue-cli-service serve —host 127.0.0.1 —port 8080» для запуска сервера разработки

Ответ №4:

После создания vue-project внутри вашего старого проекта vue create . вы можете добавить приложение, как это делает vue, с помощью следующего кода:

 <!DOCTYPE html>
<html lang=en>
<head>
    <meta charset=utf-8>
    <meta http-equiv=X-UA-Compatible content="IE=edge">
    <meta name=viewport content="width=device-width,initial-scale=1">
    <link rel=icon href=/favicon.ico>
    <title>planer-demo</title>
    <!-- STYLES AND SCRIPTS NEEDED FOR THE APP -->
    <link href=/css/app.e1774689.css rel=preload as=style>
    <link href=/js/app.ccdcf352.js rel=preload as=script>
    <link href=/js/chunk-vendors.d84bf368.js rel=preload as=script>
    <link href=/css/app.e1774689.css rel=stylesheet>
</head>
<body>
    <noscript>
        <strong>We're sorry but planer-demo doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <!-- WHERE WE'LL LOAD THE APP -->
    <div id=app></div> 
    <!-- SCRIPTS NEEDED FOR THE APP -->
    <script src=/js/chunk-vendors.d84bf368.js></script>
    <script src=/js/app.ccdcf352.js></script>
</body>
</html>

Ответ №5:

В диспетчере проектов Vue, к которому вы можете получить доступ через $ vue ui, выберите опцию импорта и импортируйте папку, с которой вы хотите работать, и добавьте в нее функции vue-cli.

Ответ №6:

Итак, я нашел более простое решение, которое сработало для меня. Я использую ОС Windows и WebStorm.

Сначала, используя мой Windows File Explorer, я переместил все свои файлы в нужный мне каталог / папку и назвал его именем приложения, которое я предпочитал, простым Cut / Copy amp; Paste.

Затем я открыл свою IDE (WebStorm) и решил открыть проект и выбрал новый каталог / папку. В моей папке верхнего уровня я открыл терминал и ввел: npx @vue/cli create —merge <Имя вашего каталога / папки, также известное как имя приложения>, а затем ВВЕДИТЕ.

Если имя каталога уже существует, оно объединило CLI с этим. Если нет, то создается новый каталог с новым именем приложения.

Наконец, следуйте оставшимся инструкциям по установке, чтобы выбрать свою версию.

Чтобы запустить сервер разработки, выберите свой подкаталог или папку (в вашем недавно объединенном приложении), откройте терминал, перейдите по пути к папке (если необходимо), введите команду: npm run serve и ENTER. Это должно запуститься и скомпилироваться на сервере разработки и предоставить локальные и сетевые адреса для вашего приложения.

Моя файловая структура выглядела так:

  • Основной корень: приложения Vue CLI — В этой корневой папке я запустил команду npx @vue/cli create —merge <Имя вашего каталога / папки, также известное как имя приложения>.
  • 1.1. Имя приложения папки
  • 1.1.1 .идея (WebStorm)
  • 1.1.1.1 Имя набора проекта
  • 1.1.1.1.1 проект 1 — Заголовок — В этой подпапке я запустил команду npm run serve.

Надеюсь, это избавит вас от головной боли.

Ответ №7:

 sudo vue create .

убедитесь, что вы находитесь в каталоге проекта

Комментарии:

1. Если у вас нет нестандартной конфигурации, использование sudo нехорошо — означает, что вы устанавливаете вещи как root вместо своего собственного пользователя, что, вероятно, не то, что вы хотите.