一、实现效果

【Vue】Vue-cli(脚手架)实现单文件Vue组件的调用(图文和代码)_html

 二、实现步骤

1、单文件Vue组件School.Vue(在components)

<template>
<!-- 组件一 -->
<div class="demo">
<h2>---------【School.vue】---------</h2>
<h2>学校名称:{{ schoolName }}</h2>
<h2>学校地址:{{ address }}</h2>
<button @click="showName">点我提示学校</button>
</div>
</template>

<script>
// 把组件暴露出去,方便引入 Vue.extend可以省略
export default {
name:"School",
date() {
return {
schoolName: "清华大学",
address: "北京",
};
},
methods: {
showName() {
alert(this.schoolName);
},
},
};
</script>

<style>
.demo {
background-color: antiquewhite;
border: 1px red solid;
}
</style>

2、单文件Vue组件Student.Vue(在components)

<template>
<!-- 组件一 -->
<div class="demo">
<h2>---------【Student.vue】---------</h2>
<h2>入取该校第1名学生:{{ name1 }}</h2>
<h2>入取该校第2名学生:{{ name2 }}</h2>
<h2>入取该校第3名学生:{{ name3 }}</h2>
<button @click="showName">点我提示第一名学生</button>
</div>
</template>

<script>
// 把组件暴露出去,方便引入 Vue.extend可以省略
export default {
name:"Student",
date() {
return {
name1: "孔明",
name2: "司马懿",
name3:"曹操"
};
},
methods: {
showName() {
alert(this.name1);
},
},
};
</script>

<style>
.demo {
background-color: rgb(231, 231, 231);
border: 1px rgb(172, 172, 172) solid;
}
</style>

3、单文件Vue组件App.Vue

<template>
<div>
<img src="./assets/logo.png" style="width:130px;height:130px">
<School></School>
<Student></Student>


</div>
</template>

<script>
// 引入组件
import School from './components/School.vue'
import Student from './components/Student.vue'
// 注册组件
export default {
name: "App",
components: {
School,
Student
},
};
</script>

<style>
.app {
background-color: rgb(0, 0, 0);
border: 1px rgb(255, 255, 255) solid;
height: 300px;
width: 500px;
}
</style>

4、注意:以上三个文件放在脚手架的位置

【Vue】Vue-cli(脚手架)实现单文件Vue组件的调用(图文和代码)_ico_02

  5、main.js

// 引入Vue
import Vue from 'vue'
// 引入app组件,它是所有组件的父组件
import App from './App.vue'
// 关闭vue生产提示
Vue.config.productionTip = false

// 创建vue实例对象 -- vm

new Vue({
el:"#app",
// 完成了这个功能:将APP组件放入窗口中
render: h => h(App),
})

6.index.html (http://localhost:8080的启动页)

【Vue】Vue-cli(脚手架)实现单文件Vue组件的调用(图文和代码)_ico_03

注意:

1.调用public文件夹下的文件,使用:<%= BASE_URL %>

2.<%= htmlWebpackPlugin.options.title %>中的内容,是从【package.json】中获取的

【Vue】Vue-cli(脚手架)实现单文件Vue组件的调用(图文和代码)_ico_04

<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<div id="app"></div>
</body>
</html>