一、准备的东西
电脑需要安装编辑软件（什么编辑软件都可以，此处使用vscode），电脑需要安装node
二、目的：简单了解一下vue
三、目录结构
介绍目录：
1.package.json文件
vscode-打开要处理的文件->快捷键ctrl+`(tab键上边的键)->在编辑界面出现【终端】->在终端中输入npm install（npm可以使用，需要安装node，node安装在上一篇文章中有解释）。
2.index.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>
<h1>这是的第一个vue文件</h1> //标题
<hr> //横向标签
<a href="/example/01vue入门.html">进入vue文件</a> //一个a链接，根据a标签的href跳转到指定的界面
</body>
</html>
3.01vue入门.html---为跳转到的页面，点击a链接根据a链接的地址跳转到该页面，代码如下
<!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>html入门文件</title>
</head>
<body>
<h2>这是一个vue页面</h2>
<hr>
<div id="app">
{{message}} //采用差值表达式的方式，使用vm实例中data中的数据message
</div>
<!-- 引入vue文件 -->
<script src="/example/js/vue.js"></script> //vue文件，在vue的官网可以下载
<script>
//实例化一个Vue的对象--vm
var vm = new Vue({
el:"#app", //vue实例对象所管理的区域---对应上边的类名叫app的标签，意思是vue里的东西只在这个标签内起作用
data:{ //data为整个vue管理区域所需要的数据
message:"这是data数据",
}
});
</script>
</body>
</html>
总结：此次只是简单的介绍一下vue项目，实例化 vue，还有使用vue的data中的数据
问题：
问题一：关于使用vscode的一些快捷键
从上边俩个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>
此段代码快速生成的快捷键就是：！（英文格式下的）+Tab键，就可以一次生成这些代码
问题二、此文件运行（以vscode为例）
1.首先就是确定自己的vscode上装有一个插件--Live Server插件
2.在入口文件上右击->点击Open with Live Server(快捷键：Alt+L/O);
3.就可以在本地网页上打开你所编辑的页面了
