将 24-Vue组件化编程-单文件组件 放到使用Vue脚手架创建的vue_test项目中
脚手架文件结构
├── node_modules
├── public
│ ├── favicon.ico: 页签图标
│ └── index.html: 主页面
├── src
│ ├── assets: 存放静态资源
│ │ └── logo.png
│ │── component: 存放组件
│ │ └── HelloWorld.vue
│ │── App.vue: 汇总所有组件
│ │── main.js: 入口文件
├── .gitignore: git版本管制忽略的配置
├── babel.config.js: babel的配置文件
├── package.json: 应用包配置文件
├── README.md: 应用描述文件
├── package-lock.json：包版本控制文件
src/components/School.vue
<template>
<!--组件的结构-->
<div class="demo" style="background-color:orange;">
<h2>学校名称：{{schoolName}}</h2>
<h2>学校地址：{{address}}</h2>
<button @click="showName">点击提示学校信息</button>
</div>
</template>
<script>
// 组件交互相关的代码（数据、方法）
export default {
// eslint-disable-next-line vue/multi-word-component-names
name:"School",
data(){
return{
schoolName:"东华理工大学",
address:"江西南昌"
}
},
methods:{
showName(){
alert(this.schoolName)
}
}
}
</script>
<style>
//组件的样式
.demo {
//background-color: orange;
}
</style>
src/components/Student.vue
<template>
<!--组件的结构-->
<div>
<h2>学生姓名：{{name}}</h2>
<h2>学生年龄：{{age}}</h2>
</div>
</template>
<script>
// 组件交互相关的代码（数据、方法）
export default {
// eslint-disable-next-line vue/multi-word-component-names
name:"Student",
data(){
return{
name:"马铃薯",
age:26
}
}
}
</script>
<style>
</style>
src/App.vue
<template>
<div>
<img src="./assets/logo.png">
<!--使用组件标签-->
<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:School,
Student:Student
}
}
</script>
<style>
</style>
src/main.js
// 该文件是整个项目的入口文件
// 引入Vue（残缺版）
import Vue from 'vue'
// 引入Vue（完整版）
// import Vue from 'vue/dist/vue'
// 引入App组件，它是所有组件的父组件
import App from './App.vue'
// 阻止 vue 在启动时生成生产提示
Vue.config.productionTip = false
// 创建Vue实例对象 vm
// new Vue({
// render: h => h(App),
// }).$mount('#app')
new Vue({
el:"#app",
// 下面这行代码一会解释，完成了这个功能：将App组件放入容器中
render: h => h(App),
// 引入Vue（残缺版）写法
// render(createElement){
// console.log(666)
// return createElement("h1","你好啊")
// }
// 引入Vue（完整版）写法
// template:"<h1>你好啊</h1>",
// components:{App:App}
})
public/index.html
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<!-- 针对IE浏览器的一个特殊配置，含义是仍IE浏览器以最高的渲染级别渲染页面 -->
<!-- Vue不支持IE8及以下的版本，因为Vue使用了IE8无法模拟的ECMAScript 5特性。但它支持所有兼容ECMAScript 5的浏览器 -->
<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>
<!--当浏览器不支持js时，noscript中的元素就会被渲染-->
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
标签：26,Vue,App,School,vue,Student,组件,脚手架 From： https://www.cnblogs.com/REN-Murphy/p/17772840.html