一、前端开发工具vscode
前端代码编写工具，使用vscode：vscode官网
安装好之后，可以先装如下几个插件，方便后续的开发。
在vscode里新建一个html文件，然后输入一个 英文感叹号!，点击就可以快速生成html基础代码了。
要使用vue，要先引入。要下载的自取：
链接：https://pan.baidu.com/s/1PaML9ugU7iKt6EM4TrSsPg 提取码：ikd4这里暂时将下载下来的vue.js放到文件的同级目录下，然后引入（vue.min.js或者vue.js）。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <!-- id标识vue作用的范围 --> <div> <!-- {{}} 插值表达式，绑定vue中的data数据 --> {{ message }} </div> <script src="http://www.likecs.com/vue.min.js"></script> <script> // 创建一个vue对象 new Vue({ el: '#app',//绑定vue作用的范围 data: {//定义页面中显示的模型数据 message: 'Hello Vue!' } }) </script> </body> </html> 3.vue结构关注一下vue部分的代码，Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统，不需要繁琐的DOM操作。
比如在jQuery中，需要先找到div节点，获取到DOM对象，然后进行一系列的节点操作。
这里就先创建了一个vue对象，此对象跟<div>这个div元素进行绑定。最后，在html里使用差值表达式，
来获取data里的字段数据。
{{ message }}，2个花括号，中间写上data里的字段即可。
... ... <div> <!-- {{}} 插值表达式，绑定vue中的data数据 --> {{ message }} </div> ... ... 5. vscode创建代码片段由于学习vue知识的过程中会创建多个html文件，导致编写很多重复代码，这里可以创建代码片段，以供直接创建。
点击文件——首选项——用户片段——创建新的代码片段/选择已创建的
这里的模板可以直接拿去使用，复制到你创建的代码片段即可。
{ "vue htm": { "scope": "html", "prefix": "vuehtml", "body": [ "<!DOCTYPE html>", "<html lang=http://www.likecs.com/\"en\">", "", "<head>", " <meta charset=http://www.likecs.com/\"UTF-8\">", " <meta name=http://www.likecs.com/\"viewport\" content=http://www.likecs.com/\"width=device-width, initial-scale=1.0\">", " <meta http-equiv=http://www.likecs.com/\"X-UA-Compatible\" content=http://www.likecs.com/\"ie=edge\">", " <title>Document</title>", "</head>", "", "<body>", " <div id=http://www.likecs.com/\"app\">", "", " </div>", " <script src=http://www.likecs.com/\"vue.min.js\"></script>", " <script>", " new Vue({", " el: '#app',", " data: {", " $1", " }", " })", " </script>", "</body>", "", "</html>", ], "description": "my vue template in html" } }使用的时候，可以直接输入 你的片段名称，比如上面的是"vue htm"，输入后选择即可。