02,定义一个vue 文件作为一个组件

刚开始接触vue 看网上的开源项目还有点吃力，研究了下自定义组件并记录

1，用NPM 命令方式建一个vue element 项目：

  

安装webpack:    npm install webpack -g
安装vue cli :  npm install vue-cli -g
新建一个项目 并依据提示填写项目信息 ： vue init webpack  test-ui
按提示输入相关信息， ESLint 选N，避免不规范报警
进入项目根目录 安装element ui 模块： npm i element-ui -S
6 进入项目目录 安装vue router :  npm install vue-router --save

2，在src/components 下面新建TestPyC目录 ,在TestPyC目录下面新建一个index.vue 文件 ，内容如下：

   

<template>
  <div>
    <el-button type="primary"> {{message}} </el-button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        message: '测试 好玩'
      }
    }
  }
</script>

<style>
</style>

 

3，在components\HelloWorld.vue 文件中删除自动生成的一些超链接 ，修改如下

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <test-py></test-py>
  </div>
</template>

<script>
  import TestPy from './TestPyC'
  export default {
    components: {
      TestPy
    },
    name: 'HelloWorld',
    data() {
      return {
        msg: 'Welcome to Your Vue.js App'
      }
    }
  }
</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>

主要是 import TestPy from './TestPyC'    引用vue文件的目录，如果未指定文件，会自动读取index.vue 内容

然后 components: {TestPy},  将TestPy 模块定义为一个组件 ，驼峰命名自定转换为 <test-py> ,   也可以如下使用：

components: {
'test-name': TestPy
},

就可以使用 <test-name> 标签