Vue 入门指南

环境安装

1. 安装NodeJS
   下载链接：NodeJS官方网站
2. 安装Vue-CLI
   CLI-Command Line Interface，老司机想了半天，发现这个就是DOS命令窗口，不知道是不是微软改名部的杰作。
   输入命令：
   npm -install -g vue-cli

模板安装

到这儿 VueJS 官方模板 查看有哪些现成的模板可以使用。
由于某个官方指南页面的误导，我安装了Webpack模板，所以下面我们只谈Webpack，其他的有空再说。

1. 安装Vue webpack template
   $ vue init webpack myapp
   将出现如下界面，会有一些提问，如实回答即可，不知道问啥的话就回答Y好了，全部回答N电脑可能会中病毒。
   
   
2. 检查你当前的文件夹，比如我的是D:\Web\Vue，多了个MyAPP文件夹，里面多了一堆文件和文件夹。

开始工作

1. 让代码跑一会儿
   

   
    $ npm install
    $ npm run dev

   如果我解释这两句命令的话，今天就不用做别的事情了。NPM Install官方文档 。
   npm run dev 执行后，将开启NodeJS服务器，并自动开启浏览页面
   
   
   
   点击查看源代码
   

2. 不懂装懂，黑盒试错修改大法
   2.1 第一步，修改Index.html
   Sublime打开MyApp文件夹，如下图
   
   
   我们注意到Index.html和上面的源代码只差一行
   
   作为一个学习过好几年COPY/PASTE修改网页代码的程序员，我们试着修改
   为
   
   Webpack和NodeJS搭档的好处是，你在Sublime按下保存，网页即时进行刷新，按Alt+Tab回到Chrome浏览器，看看效果。
   2.2 开始Vue相关代码的修改
   网页Body里面只有一句
   
   
   为什么我们看到的却是有图片有文字的，这些内容在哪儿？
   刚刚我们在Sublime左侧的文件树打了一个绿色的框，这里面的代码就是具体的项目代码。
   App.vue

Hello.vue， 在components文件夹

 代码太长了....我就不复制粘贴了。
 如果你学过html的话，应该知道，我们在浏览器看到的
 大部分文字，Hello.vue文件里面都能找得到。
 当然，没学过HTML，也能找到。
 

你可以试着修改，并保存看看。

你想学Vue语法？ 官方文档