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>
 
 
 
 
 
 

使用VSCode创建第一个VUE项目的更多相关文章

  1. VsCode创建第一个vue项目

    使用vue-cli快速构建项目  vue-cli 是vue.js的脚手架,用于自动生成vue.js模板工程的. 安装vue-cli之前,需要先安装了vue和webpack · node -v      ...

  2. Node.js npm基础安装配置&创建第一个VUE项目

    使用之前,我们先来明白这几个东西是用来干什么的. node.js: 一种javascript的运行环境,能够使得javascript脱离浏览器运行.Node.js的出现,使得前后端使用同一种语言,统一 ...

  3. 一步步创建第一个Vue项目

    写在了GitHub https://github.com/TaoPanfeng/vue-cms 1 初始化 创建一个文件夹 vue-cms 在vue-cms目录下创建文件 package.json 在 ...

  4. 在mac上使用vscode创建第一个C++项目

    https://blog.csdn.net/bujidexinq/article/details/106539523 准备工作:安装好vscode安装插件『C/C++』正式开始:首先是创建一个空的文件 ...

  5. 创建一个vue项目的过程

    创建一个vue项目: 1.首先从UI手上拿到PSD设计图,然后看设计搞的内容,需要做个大概的页面布局 2.做vue之前不许安装node,因为做vue项目要和node结合使用 3.然后安装vue脚手架: ...

  6. 开始创建一个 Vue 项目

    开始创建一个 Vue 项目 安装 nodejs 略 安装 npm 默认安装时自带了 npm 安装 cnpm 为了更快的下载组件,使用cnpm,cnpm 是淘宝前端的镜像. 使用 npm 安装 cnpm ...

  7. VSCode配置简单的vue项目

    VSCode配置简单的vue项目 https://www.cnblogs.com/wnxyz8023/p/9989447.html 由于最近要使用的项目框架为前后端分离的,采用的是vue.js+web ...

  8. 使用VSCode配置简单的vue项目

    由于最近要使用的项目框架为前后端分离的,采用的是vue.js+webAPI的形式进行开发的.因为之前我没有接触过vue.js,也只是通过视频文档做了一些简单的练习.今天技术主管说让大家熟悉下VSCod ...

  9. 三、使用VSCode配置简单的vue项目

    由于最近要使用的项目框架为前后端分离的,采用的是vue.js+webAPI的形式进行开发的.因为之前我没有接触过vue.js,也只是通过视频文档做了一些简单的练习.今天技术主管说让大家熟悉下VSCod ...

随机推荐

  1. Java程序设计当堂测试 9.20

    /*Java当堂测试 ATM机模拟系统由于学习的知识有限,不能完成所有课上项目,文件的应用没有完成,汇款转账功能也没有写,一些要求该退出的地方也没有写,基本功能还算完善*/ 1 package acc ...

  2. 痞子衡嵌入式:了解i.MXRTxxx系列ROM中灵活的串行NOR Flash启动硬复位引脚选择

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是i.MXRTxxx系列ROM中灵活的串行NOR Flash启动硬复位引脚选择. 关于 i.MXRT 系列 BootROM 中串行 NOR ...

  3. lucene 类介绍

    lucene中重要的类: IndexWriter:lucene中最重要的类之一,主要用于索引的创建 Analyzer(抽象类):分析器,主要用于分析文本,常用的有StandardAnalyzer分析器 ...

  4. aria2+uget+chrome

    1.安装aira2 sudo apt install aria2 2.安装及配置uget sudo apt install uget 编辑 -> 设置: 分类 -> 属性: 3.chrom ...

  5. CF833B-线段树优化DP

    CF833B-线段树优化DP 题意 将一个长为\(n\)的序列分成\(k\)段,每段贡献为其中不同数字的个数,求最大贡献和. 思路 此处感谢@gxy001 聚铑的精彩讲解 先考虑暴力DP,可以想到一个 ...

  6. POJ3179 Corral the Cows题解

    我就是个垃圾--一道水题能写这么长时间-- 首先看到题就想到了二维前缀和+二分边长,但地图边长10000,得离散化. 于是这个离散化就把我搞疯了,淦. 这反映出现在基础知识还是不牢固,相当不牢固. 复 ...

  7. 犀牛Rhino 7.0中文版安装破解教程

    犀牛Rhino 7.0中文版是一款专业的.功能强大的三维建模软件,利用它可以创建.编辑.分析.提供.渲染.动画与转换NURBS线条.曲面.实体与多边形网格:它能轻易整合3DS MAX 与Softima ...

  8. 前端知识点--CSS overflow 属性

    问题:如何加滚动条? 给div 设置css 样式overflow:scroll div { width:150px; height:150px; overflow:scroll; } -------- ...

  9. 我眼中的java线程池实现原理

    最近在看java线程池实现方面的源码,在此做个小结,因为网上关于线程池源码分析的博客挺多的,我也不打算重复造轮子啦,仅仅用纯语言描述的方式做做总结啦! 个人认为要想理解清楚java线程池实现原理,明白 ...

  10. webRTC的标准与发展

    Web实时通信(WebRTC)是标准,协议和JavaScript API的集合,两者的组合可实现浏览器(对等)之间的对等音频,视频和数据共享.WebRTC无需依赖第三方插件或专有软件,而是将实时通信转 ...