Vue.js, Маршрутизатор, импортирующий файл шаблона vue

Question

Привет, ребята. У меня простой проект Vue.js, и я пытаюсь импортировать файл шаблона vue в мой файл index.html без использования таких инструментов cli, как webpack или browserify.

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

<script src="https://unpkg.com/http-vue-loader"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

В моем теге сценария index.html я создаю новый объект, который ссылается намой компонент навигации, который я хочу включить.

var Settings =  httpVueLoader('Navigation.vue') ,
router = new VueRouter({
    routes:[
        { path:'/navigation', component: Navigation }
    ]
});

Я хочу иметь возможность просто использовать тег <navigation></navigation> в моем файле index.html, чтобы получить любой код внутри файла Navigation.vue.

Я получил кодекс с моим проектом здесь: https://codepen.io/fennefoss/project/editor/ZerEod#

Answer 1

я думаю, что вам нужно экспортировать Navigation.vue, кстати ваш тег стиля и тег сценария. Поместите внешний шаблон, например,

Navigation.vue:

    <template id="navigation">
        <p>Click on the Menu Icon to transform it to "X":</p>
        <div class="container" onclick="myFunction(this)">
            <div class="bar1"></div>
            <div class="bar2"></div>
            <div class="bar3"></div>
        </div>

    </template>

    <style>
        .container {
            display: inline-block;
            cursor: pointer;
        }

        .bar1, .bar2, .bar3 {
            width: 35px;
            height: 5px;
            background-color: #333;
            margin: 6px 0;
            transition: 0.4s;
        }

        .change .bar1 {
            -webkit-transform: rotate(-45deg) translate(-9px, 6px);
            transform: rotate(-45deg) translate(-9px, 6px);
        }

        .change .bar2 {
            opacity: 0;
        }

        .change .bar3 {
            -webkit-transform: rotate(45deg) translate(-8px, -8px);
            transform: rotate(45deg) translate(-8px, -8px);
        }
    </style>

    <script>
        module.exports = {
            data: function () {
                return {};
            },
            mounted: function () {
                function myFunction(x) {
                    x.classList.toggle("change");
                }
            }
        };

    </script>

Answer 2

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

Vue.component('navigation', {
  template: `
      <p>Click on the Menu Icon to transform it to "X":</p>
      <div v-bind:class="[ 'container', { 'change': active } ]" @click="myFunction">
        <div class="bar1"></div>
        <div class="bar2"></div>
        <div class="bar3"></div>
      </div>
    `, 
  data() {
    return {
      active: false
    }
  }
  methods: {
    myFunction(x) {
      this.active = !this.active;

      // do your other logic here if need be
    }
  }
})

const app = new Vue({
  el: '#app',
  data() {
    return {
      products: [],
      showMobileMenu: false,
      productHeadline: 'Product Flow Tool'
    }
  },
  computed: {
    totalProducts() {
      return this.products.reduce((sum, product) => {
        return sum + product.quantity
      }, 0)
    }
  },
  created() {
    fetch('https://www.fennefoss.dk/sample.json')
    //fetch('./sample.json')
    .then(response => response.json())
    .then(json => {
      this.products = json.products
    })
  }
})

index.html

<div id="app">
  <navigation></navigation>
</div>

Вам все равно нужно поместить файлы CSS где-нибудь, хотяИ это хорошая часть использования модуля связывания - для включения отдельных файловых компонентов .

Answer 3

Вам не нужно vue-router здесь, просто импортируйте компонент Navigation следующим образом: import navigation from "./Navigation.vue" И используйте его как <navigation/> в HTML-коде.

Vue-router используется дляуправление различными маршрутами.