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