Использование компонента из GitHub в моем проекте Vue.(Я полный новичок) - PullRequest
Новая
       17

Использование компонента из GitHub в моем проекте Vue.(Я полный новичок)

0 голосов
/ 14 ноября 2018

В этом семестре я начал изучать Vue. Наше первое «задание» для этапа Vue заключалось в том, чтобы следовать и завершить инструкцию, предоставленную видео YouTube от Traversy Media . Это видео было отличным, чтобы следить, очевидно, что я смог выполнить его задачу без особых трудностей. Тем не менее, я не чувствую, что полностью понимаю актуальность каждого файла в проекте Vue, например index.js, index.html, * .vue.

Я нашел несколько видео, которые создают компонент, а затем используют этот компонент. Тем не менее, я чувствую себя совершенно потерянным при загрузке компонента, а именно: 'Vue-Accordion' с github для использования в качестве моей навигации в сочетании с vue-router. Инструкции vue-accordion просто устанавливают, чтобы добавить определенный код, но не говорят, к какому файлу я должен добавить этот код.

Я взломал его, угадав / предположив файл, который, как мне показалось, имел отношение к задаче, такой как app.vue, index.js и index.html ... безрезультатно. Конечно, я думаю, что лучшее понимание файловой структуры / иерархии Vue Project могло бы помочь мне лучше понять, какие именно файлы имеют отношение к любой имеющейся у меня задаче.

1 Ответ

0 голосов
/ 14 ноября 2018

Хорошо, так что школы на сессии (извините, если я иногда объясняю слишком простые вещи, просто пытаюсь быть тщательными).

Вот базовая структура для проекта Vue, использующего vue init webpack-simple my-project:

  • src /
    • assets /
      • logo.png
    • App.vue
    • main.js
  • .babelrc
  • .gitignore
  • index.html
  • package.json
  • README.md
  • webpack.config.js

Папка src содержит все исходные файлы вашего проекта.

Папка src/assets содержит все ваши ресурсы, в первую очередь изображения.

App.vue - это первое «представление» вашего приложения.

main.js - это основной скрипт вашего проекта, в котором вы конфигурируете и запускаете Vue.Именно здесь вы загружаете все, что должно существовать в глобальной области видимости вашего приложения.

.babelrc определяет, как инструмент babel должен синтаксически проверять ваш код.

.gitignore говорит Git игнорироватьопределенные файлы от коммитов.

index.html - это страница, которая отправляется в браузер клиентов.Здесь мы загружаем файл main.js и помещаем все необходимые метаданные (если вы не используете, например, vue-meta, чтобы обрабатывать их там).Обратите внимание, что <div id="app"> html tag - это место, куда монтируются все ваши файлы Vue.

package.json - это наш файл конфигурации npm.Когда вы запускаете, например, npm install --save component-from-npm-name, он сохраняется здесь, так что вы можете просто запустить npm install позже, чтобы получить все зависимости вашего проекта.

README.md - это файл документации вязыковой формат Markdown.Он отображается как главная страница вашего проекта, например, на Github или Gitlab.

webpack.config.js - это файл Node.js, который отвечает за запуск Webpack в вашем проекте.Vue можно использовать без Webpack, но я не рекомендую его.Вы можете запустить node webpack.config.js напрямую, чтобы построить свой проект.Этот файл является вашим скриптом сборки, вы настроили его для обработки процесса сборки вашего проекта.

Итак, вооружившись этой информацией, давайте перейдем к вашему вопросу.

Как загрузить компонентв Vue.js?

  1. Запустите npm install --save vue-accordion (обратите внимание, что пока исходный код размещен на Github, пакет загружается отсюда: https://www.npmjs.com/package/vue-accordion)
  2. В вашем index.js файл, который отвечает за загрузку вещей в ваше приложение Vue в глобальном контексте, вы делаете, как сообщает страница Github, сначала import {vueAccordion} from 'vue-accordion', затем запускаете Vue.component('vue-accordion', vueAccordion), чтобы зарегистрировать его в глобальном контексте.

Это все, что нужно. index.js - это ваша точка входа для вашего приложения Vue, а webpack.config.js - ваш скрипт сборки.

Однако существует альтернативное решение для загрузки компонентов.В предыдущем варианте мы загрузили его в index.js, чтобы загрузить его в глобальном контексте, то есть вы можете использовать компонент сейчас в любом месте вашего приложения, но что делать, если вы хотите загружать его только по мере необходимости (вам нужнохочу сделать это для перформансаПричины)?

Что ж, в вашем файле App.vue есть тег <script>, в котором вы можете настроить вещи только в этом компоненте Vue (все файлы .vue являются компонентами Vue, даже если вы называете их маршрутами, страниц, просмотров или что-либо, чтобы указать их цель).Чтобы загрузить компонент не в глобальном контексте, а в контексте компонента, вы должны сделать следующее в App.vue: 

<script>
import Accordion from 'vue-accordion';
export default {
    components: {
        'vue-accordion': Accordion
    }
</script>

Tips ...

  1. Это всего лишь одна настройка для проекта Vue.Проект Vue может быть таким простым, как простая загрузка Vue в виде скрипта в ваш статический файл index.html, тогда вы можете иметь гораздо более раздражающую установку с обычными файлами javascript, но это глупо и неэффективно.Итак, у правильного проекта есть файл Node.js для запуска Webpack.В зависимости от того, как вы конфигурируете Webpack, ваш проект может действовать совершенно иначе, чем любой другой проект Webpack.
  2. Узнайте больше о том, как работает Webpack, чтобы вы могли иметь структуру проекта, которая имеет смысл для вас.
  3. Взгляните на Nuxt, это по сути набор других проектов (в первую очередь Vue и Webpack), которые упрощают создание мощного проекта Vue.Вы можете сидеть и настроить свой собственный проект Vue и все инструменты самостоятельно и получить тот же результат, но Nuxt упростит вам задачу.
...