Vue.js 组件变成 Webpack 中的组件

Question

I have taken the following code from a tutorial and I want to modify it so as to compile in Webpack.. that is in form template script and css.我从教程中获取了以下代码，我想修改它以便在 Webpack 中编译.. 在表单模板脚本和 css 中。

<html>
       <head>
          <title>VueJs Instance</title>
          <script type = "text/javascript" src = "js/vue.js"></script>
       </head>
       <body>
          <div id = "databinding">
             <div id = "counter-event-example">
                <p style = "font-size:25px;">Language displayed : <b>{{ languageclicked }}</b></p>
                <button-counter
                v-for = "(item, index) in languages"
                v-bind:item = "item"
                v-bind:index = "index"
                v-on:showlanguage = "languagedisp"></button-counter>
             </div>
          </div>
          <script type = "text/javascript">
             Vue.component('button-counter', {
                template: '<button v-on:click = "displayLanguage(item)"><span style = "font-size:25px;">{{ item }}</span></button>',
                data: function () {
                   return {
                      counter: 0
                   }
                },
                props:['item'],
                methods: {
                   displayLanguage: function (lng) {
                      console.log(lng);
                      this.$emit('showlanguage', lng);
                   }
                },
             });
             var vm = new Vue({
                el: '#databinding',
                data: {
                   languageclicked: "",
                   languages : ["Java", "PHP", "C++", "C", "Javascript", "C#", "Python", "HTML"]
                },
                methods: {
                   languagedisp: function (a) {
                      this.languageclicked = a;
                   }
                }
             })
          </script>
       </body>
    </html>

My problem is that I have a "sub-component" named 'button-counter'..我的问题是我有一个名为“按钮计数器”的“子组件”..

Answer 1

Use Single File Components and define your button-counter and other components there.使用单个文件组件并在那里定义您的按钮计数器和其他组件。

In general, if you are already using Webpack , life will be easier if you use SFC for everything.一般来说，如果你已经在使用Webpack ，如果你对所有事情都使用 SFC，生活会更轻松。

https://v2.vuejs.org/v2/guide/single-file-components.html https://v2.vuejs.org/v2/guide/single-file-components.html

Vue.js 组件变成 Webpack 中的组件

问题描述

1 个解决方案

解决方案1
1 已采纳 2019-02-26 16:58:14

Vue.js 组件变成 Webpack 中的组件

问题描述

1 个解决方案

解决方案1 1 已采纳 2019-02-26 16:58:14

解决方案1
1 已采纳 2019-02-26 16:58:14