vue入门学习2-在模板例程里添加一个组件

vue入门学习2-在模板例程里添加一个组件

vue入门学习2-在模板例程里添加一个组件

1.初始基本项目文件结构说明

在上一篇使用vue init webpack {项目名} 利用vue脚手架工具、webpack模板构建了基本项目后，项目文件结构大体如下：

下面就几个主要文件作一个说明：
main.js–程序入口文件

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

在这个程序文件里面：
（1）新建了主vue实例
new Vue（）
（2）挂载了主组件：App
el:’#app’
components:{App}

2.添加新组件

(1)编写新增的组件文件

在 src/components目录下编写 EmployeeTable.vue 组件文件。我直接从参考网站拷贝 ^_:
src/components/EmployeeTable.vue：

<template>
  <div id="employee-table">
    <table>
      <thead>
        <tr>
          <th>Employee name</th>
          <th>Employee email</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Richard Hendricks</td>
          <td>richard@piedpiper.com</td>
        </tr>
        <tr>
          <td>Bertram Gilfoyle</td>
          <td>gilfoyle@piedpiper.com</td>
        </tr>
        <tr>
          <td>Dinesh Chugtai</td>
          <td>dinesh@piedpiper.com</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
  export default {
    name: 'employee-table',
  }
</script>

<style scoped></style>

(2)注册新增组件

在要调用新增组件的主组件（以下简称主组件）文件的脚本部分注册新增组件
在本例中主组件就是App组件，在App.vue文件里面的部分增加注册"employee-table"组件的内容：

(3)使用新增组件

在主组件文件的模板部分使用新增组件

3.运行测试

(1) 关闭eslint

先关闭eslint,否则因为编译执行严格的检查，会报各种不必要的错误。
编辑config/index.js把 useEslint: true 改为： useEslint: false

(2) 运行

npm run dev

上一篇 Vue入门学习1