跑通一篇博客代码假装自己会Vue

本文是《跑通一篇博客代码假装自己会Java》的母亲篇，Vue是目前比较流行的前端框架。博主本人在两个月前对Java一窍不通，发配帝都出差一个月后，对Java，包括前端和后端都稍有熟悉。这篇博文主要介绍Vue的快速入门。

前端说得更准确是web前端，一般包括HTML、CSS、Javascript三个部分。其中，HTML负责网页内容的搭建；CSS负责调整HTML中的元素属性，让他们更好看；Javascript负责业务逻辑。严格来说，Javascript算是一种计算机语言，HTML和CSS只能算是一种格式。Vue最简单、最主要的用法就是连接HTML和Javascript，通过Javascript，动态调整HTML。

首先本文目标是入门Vue，做一个最简单的系统Demo。功能是通过选择左侧不同的菜单项，实现不同页面的切换。

1.首先，安装webstorm：WebStorm: The Smartest JavaScript IDE, by JetBrains

2.然后，安装Node.js：下载 | Node.js (nodejs.org)，本文安装路径 D:\Program Files\nodejs（Node.js强制管理员模式安装，所以后面的所有操作都在管理员模式下操作）

3.安装Node.js后，验证npm能不能用，这玩意和python的pip差不多，用来管理包的。找不到npm命令就把 D:\Program Files\nodejs加到环境变量。

4.给npm设置个墙外代理：npm config set registry https://registry.npm.taobao.org

5.下载Vue的框架：npm install -g vue-cli

6.新建一个vue工程：vue init webpack vue_test

- Project name：vue_test（这是文件名）

- Project desc...：（随便）

- Auther：（随便）

- Vue build：Runtime + Compiler

- Install vue-rooter：No

- Use ESLint：No

- set up unit tests: No

- setup e2e tests...：No

- Should we run...：Yes，use NPM

生成的vue项目如图所示：

7.用webstorm打开这个项目，给项目添加配置环境：

先  ，然后 ，选择npm，然后如下图配置，路径改成自己的Node.js安装路径。

8.运行，webstorm给出网址，点击网址，出现vue的官方Demo。

9.分析一波这个Demo工程。

工程的入口是index.html，index.html里面只有一个div，id叫app，对应main.js的vue实例。

vue实例绑定了这个template，对应App.vue中的template，也就是说，最终显示的是App.vue的内容。

App.vue的