一、背景
公司里人最近都很忙，领导推的一个需求需要别的团队支持，但是别的团队没有人力，于是这部分活就落到了某的头上，这其中就包括前端页面。
话说某是真正的JAVA研发工程师，想着拿已有的页面改吧改吧，也没啥难的。但是看到代码的一刹那，蒙住了。这目录结构咋看着跟手头的JAVA项目差不多？原来，这就是Vue。
闲话不说了，开始学吧！
二、开始学习
Vue.js是啥？是一个前端开发库，常用于构建大型应用。
百度了一番Vue入门，搜到了“https://www.runoob.com/vue2/vue-tutorial.html”这个，于是趁着不紧急，草草的撸了一遍，感觉还能理解。回头看了一下公司项目，还是有点云里雾里。
公司那群人应该自己封装了一套，启动的时候都不知道环境是怎么选的，先不管了。看了这几天，感觉最绕的还是component，父子传递、挂载的，有点晕，所以周末再回顾一下。
三、关于安装方式
https://www.runoob.com/vue2/vue-install.html，看教程的这一页。有三种安装方式，归一下类，其实是两个：一个是纯页面的方式，一个是NPM方式。
1、纯页面的方式
请直接看代码，HelloWorld走起
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> </head> <body> <div id="app"> <p>{{ message }}</p> </div> <script> new Vue({ el: '#app', data: { message: 'Hello Vue.js!' } }) </script> </body> </html>
（注：代码来源见代码中的网址）
2、NPM是啥？
说到NPM，就得回头看看Node.js。JS本来属于前端语言，只能在浏览器上干一些事，后来谷歌的Chrome V8（JS）引擎出世，大大提升了JS的执行效率，这使得通过JS来写后端代码（Node.js）成为可能。
NPM全称是Node Package Manager，直白点说，就是Node的包管理器。感觉类似于Java的Maven，pom.xml对应这里的Package.json。
管理的是啥包呢，有jQuery、BootStrap等。
具体参考：https://blog.csdn.net/qq_38261174/article/details/90290318、https://www.runoob.com/nodejs/nodejs-npm.html
3、Vue.js和Node.js什么关系？
Node.js是js的运行环境，类似于JVM之于Java。
Vue.js是库，使用了基于HTML的模板语法，允许开发者采用简洁的模板语法来声明式的将数据渲染进DOM的系统。是数据驱动。
总结：Node.js是用js开发服务端应用，Vue.js是为了让前端人员开发页面更容易。
四、学习中
1、Vue.js的项目目录结构
| 目录/文件 | 说明 |
|---|---|
| build | 项目构建(webpack)相关代码 |
| config | 配置目录，包括端口号等。我们初学可以使用默认的。 |
| node_modules | npm 加载的项目依赖模块 |
| src |
这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：
|
| static | 静态资源目录，如图片、字体等。 |
| test | 初始测试目录，可删除 |
| .xxxx文件 | 这些是一些配置文件，包括语法配置，git配置等。 |
| index.html | 首页入口文件，你可以添加一些 meta 信息或统计代码啥的。 |
| package.json | 项目配置文件。 |
| README.md | 项目的说明文档，markdown 格式 |
（注：来自https://www.runoob.com/vue2/vue-directory-structure.html）