使用VSCode创建第一个VUE项目

vue init webpack vue_test回车，然后输入工程名称vue_test

vue:Missing space before value for key 'components'

原因是Vue对语法比较严格，而eslint是一个语法检查工具，对语法要求极其苛刻严格，于是就error了

解决办法是关闭eslint的语法规则，找到build/webpack.base.conf.js将eslint相关语法注释或删除即可

login 模块

<template>

    <div>

        <table>

            <tr>

                <input placeholder="name" v-model="name"/>

                </tr>

                   <tr>

                <input  placeholder="pwd" v-model="pwd"/>

                </tr>

                 <tr>

                <button @click="say">login in </button>

                </tr>

        </table>

    </div>

</template>

<script>

export default {

  name: 'login',

  data () {

    return {

      name:"hh",

      pwd:"",

    }

  },

  methods:

  {

      say:function()

      {

          this.$emit("on-msg",this.name,this.pwd);

      }

  }

}

</script>

 

使用组件login

----------------------------------------------------------------------------------

<template>

  <div class="hello">

    <h1>{{ msg }}</h1>

    <h2>Essential Links</h2>

    <loginCom @on-msg='translateText'></loginCom>

  </div>

</template>

<script>

import loginCom from "@/page/login"

export default {

  name: 'HelloWorld',

  data () {

    return {

      msg: 'Welcome to Your Vue.js App'

    }

  },

   methods:{

      translateText:function(text,pwd){

          alert(text+"----"+pwd);

      }

  },

  //components:{loginCom}

  components:{loginCom}

  

}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>

h1, h2 {

  font-weight: normal;

}

ul {

  list-style-type: none;

  padding: 0;

}

li {

  display: inline-block;

  margin: 0 10px;

}

a {

  color: #42b983;

}

</style>