一、项目结构:
初始化一个vue-cli之后,我们可以在目录中看到以下结构。
app.vue
src下的app.vue是项目的根组件,可以包含其他的子组件。在项目运行时进入的首页即为app.vue。子组件写在src文件夹下的components内。根组件和子组件组成组件树。
main.js
mian.js是vue应用的入口文件,可以创建一个新的vue实例并挂载再根节点下。Vue插件也从这里引入。
二、添加引入新模块
1.在components文件夹下新建一个vue文件
模块内基本组件:
- template,在里面添加模块可视内容
- script,使用export default将模块导出
- style,控制组件样式,建议在后面加一个scoped避免样式影响到其他组件
例子:创建student.vue
<template>
<div id="student">
<h3>student list</h3>
<ul>
<li v-for="(item, index) in students" :key="index">
{{ item }}
</li>
</ul>
</div>
</template>
<script>
export default {
name: "student",
//定义子组件的name
data() {
return {
students: [
{
id: 1,
name: "lisi",
age: 12,
},
{
id: 2,
name: "xiaohong",
age: 11,
},
{
id: 1,
name: "zhangsan",
age: 13,
},
],
};
},
methods: {},
};
</script>
<style scoped>
</style>
2.载入模块
回到根组件app.vue内使用import导入创建的子组件
import student from './components/student.vue'
在export default的components中添加子组件名称
- npm run serve启动项目,可以看到我们自己添加的子组件以及在页面上