一、创建HTML文件
<!DOCTYPE html>
<html lang="en">
<head>
<!-- <meta> 标签通常位于 <head> 区域内。
<meta> 标签提供了 HTML 文档的元数据。元数据不会显示在客户端，但是会被浏览器解析。 -->
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>学生信息管理系统</title>
<!-- 使用CDN引入Vue模块-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<!-- 引入外部的样式文件，来自于css -->
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<!-- 创建了一个名字为app的容器 -->
<div id="app">
{
{ msg }}
<!-- 将下面实例化的对象的msg信息显示在页面 -->
</div>
</body>
</html>
二、创建 XSS文件
/* 在indx.css里面定义容器app的样式 */
#app{
width:800px;
height:400px;
background-color: lightblue;/*背景颜色*/
margin:100px auto;/*离顶的高度*/
font-size:40px;/*字体高度*/
line-height: 200px;
text-align: center;/*字体居中*/
border-radius: 10px;/*四边角的弧度*/
color: red;/*字体颜色*/
}
三、创建js文件
const app= new Vue({
el:'#app',// 应用在了id为app的容器上
data:{
msg:'Hello,Vue',
}
})