文章目录
安装VSCode插件
- Chinese:适用于 VS Code 的中文(简体)语言包
- Express:Web服务器
启动第一个Vue文件
- 打开一个文件夹:VueLearning
- 点击"新建文件",输入文件名【XX.html】放在 VueLearning目录下
- 将vue.js包放在 VueLearning \ lib目录下
- 输入【!】+【tab】,自动补全html模板
- 代码中导入vue.js包
- 输入测试代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="./lib/vue.js"></script> <!--网络路径、相对路径-->
<title>Document</title>
</head>
<body>
<div id='div1'>
{{msg}}
</div>
<script>
var vm=new Vue({
el:'#div1',
data:{
msg:'Hello Vue.js !'
}
})
</script>
</body>
</html>
- 【ctrl+shift+P】输入Express,选择"Host Current Workspace and Open in Browser" 启动Express服务器
- 在浏览器中补全html文件路径: