如何将html和css写进脚手架中？
报错如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>学生板块个人试题</title>
<link rel="stylesheet" type="text/css" href="coursedesign.css" />
</head>
<body>
<template id="left-tem">
<div class="left">
<div class="leftHead">
{{ message1 }}
</div>
<div class="leftLink">
</div>
<div class="leftCenter">
<div class="lc1">
{{ message2 }}
</div>
<div class="lc2">
{{ message3 }}
</div>
<div class="lc3">
{{ message4 }}
</div>
</div>
<div class="leftBottom">
<img src="image\21.png" width="325px" height="330px">
</div>
</div>
</template>
<template id="center-tem">
<div class="center">
<div class="centerHead">
{{ message5 }}
</div>
<div class="centerBody">
<div class="centerBodyLabel1">
<div class="labelTitle">
{{ message6 }}
</div>
<select class="sc1">
<option value="计算机学院/软件工程">{{ message7 }}</option>
<option value="计算机学院/数据科学与大数据技术">{{ message8 }}</option>
<option value="计算机学院/网络安全">{{ message9 }}</option>
</select>
<button class="bt1" v-on:click="text">
<img src="image\放大镜.png" width="17px" height="15px">
{{ message10 }}
</button>
</div>
<div class="centerBodyLabel2">
<img src="image\感叹号.png" width="17px" height="17px">
<span class="word1">
{{ message11 }}
</span>
<span class="number">{{ message12 }}</span>
节
<span class="word2">
{{ message13 }}
</span>
</div>
</div>
<div class="centerBottom">
<div class="centerBottomLabel1">
<div class="colorBlock">
</div>
<span class="word3">{{ message14 }}</span>
<span class="word4">{{ message15 }}</span>
<span class="word5">{{ message16 }}</span>
</div>
<div class="centerBottomLabel2">
<span class="word6">
{{ message17 }}
</span>
<span class="word7">
{{ message18 }}
</span>
<span class="word8">
{{ message19 }}
</span>
</div>
<div class="centerBottomLabel3">
<span class="word9">
{{ message20 }}
</span>
</div>
<div class="centerBottomLabel4">
<span class="word10">
{{ message21 }}
</span>
</div>
<div class="centerBottomLabel5">
<span class="word11">
{{ message22 }}
</span>
</div>
<div class="centerBottomLabel5">
</div>
</div>
<button class="bt2">
{{ message23 }}
</button>
</div>
</template>
<template id="right-tem">
<div class="right">
<div class="rightHead">
{{ message24 }}
</div>
<div class="rightBody">
<div class="title">
{{ message25 }}
</div>
<div class="choose">
<button type="button" class="bt3" v-on:click="dolt1">{{ message26 }}</button><button
type="button" class="bt4" v-on:click="dolt2">{{ message27 }}</button><button type="button"
class="bt5" v-on:click="dolt3">{{ message28 }}</button><button type="button" class="bt6"
v-on:click="dolt4">{{ message29 }}</button>
</div>
</div>
<div class="rightBottom">
<div class="rightBottomLabel1">
<div class="label1Title">
{{ message30 }}
</div>
<div class="label1Annotation">
{{ message31 }}
</div>
<div class="draw1">
{{ message32 }} <input type="number" class="input1" min="0" value="20"> {{ message33 }}
</div>
</div>
<div class="rightBottomLabel2">
<div class="label2Title">
{{ message34 }}
</div>
<div class="label2Annotation">
{{ message36 }}
</div>
<div class="draw2">
{{ message32 }} <input type="number" class="input2" min="0" value="10"> {{ message33 }}
</div>
</div>
<div class="rightBottomLabel3">
<div class="label3Title">
{{ message37 }}
</div>
<div class="label3Annotation">
{{ message35 }}
</div>
<div class="draw3">
{{ message32 }}<input type="number" class="input3" min="0" value="5"> {{ message33 }}
</div>
</div>
</div>
</div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
var container = new Vue({
el: '.container',
methods: {
dolt1: function() {
alert("当前难度为综合");
},
dolt2: function() {
alert("当前难度为简单");
},
dolt3: function() {
alert("当前难度为中等");
},
dolt4: function() {
alert("当前难度为困难");
},
},
components: {
left: {
template: "#left-tem",
data: function() {
return {
message1: '学生在线练习系统',
message2: '个人主页',
message3: '在线练习',
message4: '排行榜'
}
}
},
center: {
template: "#center-tem",
data: function() {
return {
message5: '1、选择科目章节',
message6: '科目：',
message7: '计算机学院/软件工程',
message8: '计算机学院/数据科学与大数据技术',
message9: '计算机学院/网络安全',
message10: '查找章节',
message11: '已选择',
message12: '2',
message13: '题库题量：439',
message14: '题目序号',
message15: '名称',
message16: '题量',
message17: '1.1',
message18: '软件工程概述',
message19: '98',
message20: '1.2',
message21: '1.3',
message22: '1.4',
message23: '生成试题'
}
}
},
right: {
template: "#right-tem",
data: function() {
return {
message24: '2、选择抽题信息',
message25: '请选择难易度',
message26: '综合',
message27: '简单',
message28: '中等',
message29: '困难',
message30: '选择题',
message31: '(243道试题) ：',
message32: '抽选',
message33: '道题目',
message34: '填空题',
message35: '(54道试题) ：',
message36: '(187道试题) ：',
message37: '简答题'
}
},
methods: {
dolt1: function() {
alert("当前难度为综合");
},
dolt2: function() {
alert("当前难度为简单");
},
dolt3: function() {
alert("当前难度为中等");
},
dolt4: function() {
alert("当前难度为困难");
},
}
}
}
})
</script>
</body>
</html>
直接写就行，里面写html，里面写CSS，如果有帮助请采纳！