Правильный способ импортировать скрипт / модуль / компонент на страницу в Nuxt?

Question

Я новичок в js, vue & nuxt, поэтому совершенно не понимаю, какой правильный и лучший способ импортировать скрипт / модуль / компонент на страницу HTML и запустить его.

Например, я знаю, что это работает со слушателем событий в сценарии js:

<template>
<div>
<button id="importJS">Go!</button>
</div>
<template>

<script src="~/index.js"></script>

Но что-то вроде этого лучше?:

@import "~/index.js"

<template>
<div>
<button id="importJS">Go!</button>
</div>
<template>

И / или должна ли быть экспортирована только основная функция в виде модуля / компонента примерно так?:

module.exports = JSexport;

При таком импорте, как этот ?:

<JSexport />

Или вот так?:

<JSexport></JSexport>

Таким образом, мой вопрос в том, что такое канонический путь и почему это так?

Большое спасибо!

Answer 1

Это довольно просто. Если вы создаете страницу или компонент, то у вас есть такая структура:

Вы уже go следующие:

1. Template
2. Script
3. style


<template>
   <div class="some_div"> {{ page_name }} </div>
</template>

<script>
export default {
   data(){
      return {
         page_name: "test page"
      }
   }
}
</script>

<style>
.some_div {
   width: 100%;
   height: 100px;
   background: green;
}
</style>

Чтобы импортировать какой-либо другой компонент или скрипт, вам потребуется используйте import внутри тегов скрипта

<script>
import someScript from "from/some/path/script.js";
import someComponent from "@/components/someComponent.vue;
export default {
   data(){
      return {
         page_name: "test page"
      }
   },
   components: {
      someComponent // dont forget to register your component after you import it
   }
}
</script>

После этого вы можете использовать ваш компонент / скрипт внутри вашей страницы / компонента, что еще. После регистрации импортированного компонента его можно использовать в разметке HTML:

<template>
   <div class="some_div"> 
      {{ page_name }}
      <someComponent></someComponent>
   </div>
</template>

Answer 2

Я влюбился в vue за их документацию, официальная страница потрясающая.

Официальные ответы на ваши вопросы вы можете найти в Vue Руководстве по стилю . Здесь много примеров того, что хорошо или плохо делать: