Question

嗨，大家好，我有一个简单的Vue.js项目，我试图不使用诸如webpack或browserify之类的cli工具将一个vue模板文件导入到我的index.html文件中。

据我了解，我需要使用一种称为路由器的工具来做到这一点，并在我的项目中导入一些额外的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-router，只需像这样导入Navigation组件： import navigation from "./Navigation.vue" 并将其用作HTML代码中的<navigation/>。

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

Answer 2

我认为您需要导出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 3

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

C:\_Temp>python read.py
LPI=('reference_size_mm_width', '30 ;mm')
LPI=('reference_size_mm_height', '40 ;mm')
LPI=('print_pixel_pitch_mm', '0.03525 ; mm')
LPI=('eye_cascade', '"TBD\\haarcascade_eye.xml" #')

index.html

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
    })
  }
})

尽管如此，您仍然需要将CSS文件放在某个位置，这是使用模块捆绑程序的好部分-启用single file components。

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

3 个答案:

index.html