【MAC 上学习 Vue】Day 1. 创建 Hello Wor
2019-08-04 本文已影响3人
RaRasa
下载 Vue.js
Vue.js 开发版本下载地址为：
https://vuejs.org/js/vue.js
安装 VS Code
VS Code 下载地址为：
https://code.visualstudio.com/download
创建第一个实例---Hello World
- 打开
Visual Studio Code，新建一个文件，命名为：test1.html - 输入半角符号
!，并单击键盘上的tab按钮，软件会补全html的基础代码，即：
<!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">
<title>Document</title>
</head>
<body>
</body>
</html>
- 将
Vue.js文件复制到test1.html同级目录下，并在test1.html的<body>标签中，添加如下代码：
<body>
<div id='app'>
<p>{{ msg }}</p>
</div>
<script src='vue.js'></script>
<script>
var app=new Vue({
el:'#app',
data:{
msg:'Hello, World!'
}
});
</script>
</body>
- 双击运行
test1.html，可见如下结果：
1.png
