发表于： 2023-06-06 20:59:58
0 88
使用Vue CLI 创建一个基本项目
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),
})
//.$mount('#app')
App.vue
<template>
<div>
<img src="./assets/logo.png" alt="logo">
<School></School>
<student></student>
</div>
</template>
<script>
//引入组件
import School from './components/School'
import Student from './components/Student'
export default {
name:'App',
components:{School,Student}
}
</script>
内容：
<template>
<!--组件的结构-->
<div class="demo">
<h2>学校名称：{{name}}</h2>
<h2>学校地址：{{address}}</h2>
</div>
</template>
<script>
// 组件交互相关的代码（数据、方法等等）
// const school = Vue.extend({)} 优化简写
export default {
Name:'School',
data() {
return {
name: '修真院',
address: '成都'
}
}
}
// export default school
</script>
<style>
/*<!-- 组件的样式 -->*/
.demo{
background-color: orange;
}
</style>
<template>
<!--组件的结构-->
<div>
<h2>学生姓名：{{name}}</h2>
<h2>学生年龄：{{age}}</h2>
</div>
</template>
<script>
// 组件交互相关的代码（数据、方法等等）
export default {
Name:'Student',
data() {
return {
name: '张三',
age:18
}
}
}
</script>
index.html
<!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>
<!-- 当浏览器不支持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>
创建完成
返回列表
评论