本文介绍了如何在VSCode中快速生成HTML代码和设置div，以及利用插件OpeninBrowser和Live Server进行预览。还讨论了在F12调试Vue应用时遇到的问题，可能是由于变量名冲突导致的显示问题，并提供了源代码示例。
1. 快速生成基本html代码 !
2.快速建立div 并指定id div#id名，比如div#a1 回车
3.浏览器强制刷新 shift+刷新图标
二：需要安装的插件
注意:要在vs code中安装
Open in Browser：装完右键多个选项以浏览器打开
Live server 这样可以右键选择open in live server ,就可以以http://http://127.0.0.1:5500/形式打开网页
插件的配置找到manifest.json，把"persistent": 改为true,
"background": {
"persistent": true,
·1）C:\Users\admin\AppData\Local\Google\Chrome\User Data\Default\Extensions
admin换成你的用户名即可
三：遇到的问题
1）F12 Vue dev使用时一直不显示app1，l另外
查看源代码
<!DOCTYPE html>
<html lang="en">
<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">
<title>初识vue</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="demo">
<h1>Hello {{name}}</h1>
<h1>Hello {{score}}</h1>
</div>
<script type="text/javascript">
Vue.config.productionTip = false;
Vue.config.devtools = true;
var app1= new Vue(
{
el:'#demo',
data: {
name:'cn',
score:20
}
}
)
</script>
</body>
</html>
也看不出什么问题，怀疑是因为name这个单词导致的，把它换成别的就显示APP1了
扫一扫
2318
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
