Vue.js，路由器导入模板vue文件

Question

大家好，我得到了一个简单的Vue.js项目，我正在尝试导入一个vue模板文件到我的index.html文件中，而不使用像webpack或browserify这样的cli工具。

据我所知，我需要使用一种叫做路由器的东西才能做到这一点，并在我的项目中导入一些额外的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 }
    ]
});

我希望能够只在index.html文件中使用<navigation></navigation>标记来获取Navigation.vue文件中的任何代码。

在这里，我的项目有一个codepen：https://codepen.io/fennefoss/project/editor/ZerEod#

Answer 1

出于许多原因，使用模块捆绑器总是更好，其中之一是可维护性。但如果不能，请尝试在脚本文件中注册该组件，如下所示：

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文件放在某个位置，这就是使用模块捆绑器的好处--启用single file components。

Answer 2

这里不需要vue-router，只需像下面这样导入Navigation组件：import navigation from "./Navigation.vue"，并在HTML代码中将其用作<navigation/>。

Vue-router用于不同的路由管理。

Answer 3

我认为你需要导出Navigation.vue，btw你的样式标签和脚本标签放在模板之外，就像这样

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>