Vue起步 - helloWorld

背景

开发工具：Visual Studio Code 1.36.1

Vue版本：2.x

HelloWorld

是不是没有代码提示呀～是不是不知道怎么在浏览器上运行写的html代码呀～当你遇到各种问题以为是IDE不好使的时候，那你应该上网搜一下是不是有插件可以辅助，【vscode常用插件推荐 ：https://www.cnblogs.com/karthuslorin/p/8577224.html】

假如没有工作区文件夹，那么请按下面操作进行，如果已经有了工作区，那么直接从7开始

1.找一个地方新建一个文件夹

2.打开vscode -> 选择刚刚新建的文件夹，如下图所示

3.command+shift+p(win Ctrl+shift+p)，选择Tasks:Configure Task

4.选择tasks.json

5.选择others

6.原本空文件夹里面就多了json类型的配置文件，这才是一个完整的项目文件夹

7.新建文件index.html->在英文状态下 输入“！”然后敲回车，这是生成html的快捷键，需要注意右下角，要显示html，不然无法快速生成html模板

8.引入vue

 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

9.在 body里输入以下内容，按正常来讲 html、css、javascript应该在不同的文件里，为了省事我就放一起了

<div id="app">{{message}}</div> 
  
  <script>
    //创建vue实例
    var app = new Vue({
      /* el是元素（element）的缩写，用来指明挂载的目标 ；
         通过应用的id来嵌入到我们的根源元中
      */
      el: '#app',
      data: {
        //给message赋值
        message: 'Hello World!'
      }
    })
  </script>

10.启动：右击文件名，看是否如下图所示，可选择按照默认浏览器打开或者 其他浏览器打开

11.如果没有的话，按下图操作，然后重复10的步骤