Как подготовить Vue-компонентный проект с маршрутизацией на основе существующих ресурсов? - PullRequest
Новая
       15

Как подготовить Vue-компонентный проект с маршрутизацией на основе существующих ресурсов?

0 голосов
/ 11 ноября 2019

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

Я работаю над веб-приложением Java в архитектуре микросервисов и решил подготовить часть интерфейса для всехмои услуги в Vue. Мой внешний вид должен выглядеть очень схожим, потому что это будет приложение типа CRM. Я уже подготовил свой скелет HTML, стили CSS и JS, используя Pingendo.

Что важно, мне нужно, чтобы мои разделы верхнего и нижнего колонтитула все время оставались одинаковыми в указанном микросервисе. Лучшим вариантом для этого является использование маршрутизации в Vue и маршрутизация только содержимого между компонентами Header и Footer. В целом довольно очевидная идея.

Проблема в том, как создать новый проект Vue с использованием уже подготовленных файлов HTML, CSS и JS?

Я использовал Vue CLI для создания своего проектаи просто запустите команду vue create project-name с конфигурацией по умолчанию.

Pingendo использует библиотеки Bootstrap, JQuery и Popper, которые я должен импортировать в мой проект Vue, используя npm install bootstrap jquery popper.js, чтобы установить его, и у меня нет предупреждений и ошибок, вызванных отсутствием зависимостей от этих библиотек.

Я также следовал этой инструкции и установил базовую конфигурацию веб-пакета, используя npm install -D vue-loader vue-template-compiler, но после npm run serve у меня ошибка: 

 ERROR  Failed to compile with 1 errors                                                                                                         10:10:28 PM

 error  in ./src/components/test

Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#
loaders
> <template>
|     <h2>this is TEST Component content</h2>
| </template>

 @ ./src/router/index.js 4:0-37 14:15-19
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://192.168.1.7:8080/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

Мой компонент Test.vueочень просто: 

<template>
    <h2>this is TEST Component content</h2>
</template>

<script>
    export default {
        name: 'test'
    }
</script>

<style>

</style>

Я не знаю, что я делаю неправильно. У всего есть конфиг по умолчанию с необходимыми дополнениями. Какие шаги я должен сделать, чтобы такой проект заработал?

Репозиторий: https://bitbucket.org/jacekmucha91/storycrm-manager-vue/src/master/

1 Ответ

0 голосов
/ 11 ноября 2019

Это сомнительно, используя jQuery с Vue. Вы можете делать то, что вам нужно, в Vue без jQuery, поэтому я бы сначала проверил, правильно ли вы выбираете нужные инструменты. Что именно вам нужно для jQuery, чтобы Vue не мог его обработать?

Кроме того, существует множество плагинов для Vue, которые корректно обрабатывают нюансы, поэтому для Bootstrap вам также следует установить Bootstrap-Vue. Убедитесь, что не существует специфических для Vue версий библиотек, которые вы хотите использовать. Это позволит вам избежать этих проблем.

Для справки: https://vuejsdevelopers.com/2017/05/20/vue-js-safely-jquery-plugin/

...