2、SPA应用

SPA single page web application(单页面应用)，比如开发一个非常复杂的后台管理系统，但是当这个后台管理系统打包运行之后，它只有一个html页面，剩下的都是css,js等等。
安装node.js
要使用SPA首先要安装一个软件，node.js，可以直接去官网下载，下载好后就是这样一个文件，直接双击后一直点击下一步就可以安装成功

安装成功后在cmd输入node -v就可以看到安装的node.js的版本号，输入npm -v也可以看到npm的版本号，npm不需要额外装，装了node之后npm就连带安装了。node是一个专门的js的服务端，npm是一个包管理工具（有点类似Java中的maven）安装后确保node和npm没有问题，接下来就可以创建一个工程了。
工程创建
Vue项目创建：
npm install -g vue -cli(只需要第一次安装时执行)它是一个vue的命令行工具，执行一次后就不需要再管了然后就可以创建项目了。

vue init webpack my-project # 使用webpack模板创建一个vue项目
cd my-project #进入到项目目录中
npm install # 下载依赖（如果在项目创建的最后一步选择了自动执行npm install，则该步骤可以省略）
npm run dev # 启动项目

首先定位到要创建项目的目录中：
可以在cmd中定位到该目录下，也可以在该目录下按住shift键右击选择在此处打开PowerShell窗口
1、vue init初始化一个工程，webpack工程模板，vue02工程名
2、项目名是否就叫vue02，如果要改的话就输入新的工程名，否则就回车
3、项目的描述
4、项目的作者
5、项目的构建方式（本项目选择第一个运行加编译）
6、页面路由（SPA应用只有一个html页面，但是展示出来是一个很复杂的东西，它里面有很多页面跳转，它如何进行跳转？就是根据路由来实现的）选择Yes
7、要不要使用ESLint工具（前端代码不像Java代码要求这么严格，比如说一行代码写完之后，后面可以加分号，也可以不加分号）ESLint就是为了规范js代码，如果加了ESLint，比如说一行代码结束没有加分号就会报错等。这个这里选择不装no.
8、9、这两个都是单元测试，这里选择no
10、当项目创建成功后要不要自动运行npm install命令一般选择yes,use NPM,但是这里就先选择no,i will handle that myself,看一下我们自己如何去运行。
vue02项目创建成功
在package.json文件中定义了dependencies这个就是它的依赖，以后如果要添加其他依赖，就在这里面通过名字加版本号，就会直接帮你下载下来
现在只是模板创建出来了而已，里面的依赖并没有下载，下载方法是进入vue02中运行命令npm install

这就是刚刚创建项目的时候第10步，问我们要不要帮忙执行，如果选择了yes,那么这个命令就不需要我们手动去做了，当执行这个命令的时候，就会去检查package.json里面的如下图片中的两个地方的依赖，上面是发布时候的依赖，下面是开发时的依赖，检查这两个地方的依赖并且去下载所需要的依赖

当这个命令执行完之后，就多了一个文件夹，这里是去国外的网站下载，如果太慢也可以像maven一样配置镜像地址，参考https://blog.csdn.net/quuqu/article/details/64121812
执行完成后再执行npm run dev，这个项目就算创建成功了，该项目已经再8080端口启动了
这就是刚刚创建出来的vue项目
使用WebStorm打开这个项目，点编辑配置
点加号下的npm

以后就可以直接点击这里来启动项目

接下来介绍一下项目的目录
1、build目录里面放的是一些构建脚本，现在整个项目肯定是超过110M了，而且这只是前端的，所以当用户打开前端页面时，不可能去下载一个100多兆的东西，所以这只是开发的时候这样开发，开发完成后会对它进行编译打包，编译打包后会生成一个编译后的文件，那个文件就会很小，编译打包的脚本就放在这个文件夹下。
2、config目录系统的一些全局配置，开发环境和生产环境的一些配置，比如说这个项目一启动就占用了8080端口，后端的tomcat就不能在使用8080端口了，可是这样前端要是发送一个请求过去，那就跨域了，但是这种跨域又不是真正的跨域，因为这种问题只在开发环境中存在，以后生产环境中，会把前端编译打包生成的html,css,js等都拷贝到后台去，那么部署后又不存在跨域问题了。那么就可以在config中配置一个请求转发，让node.js自动的把8080的请求转发另外一个端口上面去。
3、node_modules目录下就是下载的依赖
4、src目录，以后所写的所有的源码，都在这个目录下
5、static目录放静态资源的，比如一些图片等可以放在这个目录
6、.babelrc语法转换脚本
7、.editorconfig编辑器的配置
8、.gitignore 如一个Java项目要提交到服务器上面去，但是target目录不用提交，target目录是编译生成的东西。这个也是类似target目录的作用，在该文件夹下配置的文件及文件类型都不会上传到服务器。
9、index.html是该项目中唯一的html文件
10、package.json要下载的依赖

可以看到index.html页面中什么也没有，只有一个div,在div中写数据也不会显示，那么如下图的index.html页面是怎么来的？
这个需要在src中看，以后开发的所有的东西都在src下找，该目录下的main.js，这是一个入口js,js执行的时候是从main.js开始执行的，其他的先不管，el：中要渲染的是#app，就是index.html中div的app。最后一个template：表示要渲染的模板，就是要把’'的内容替换index.html中的div
比如把template：中的内容替换成如下
那么说明template:中的东西会覆盖index.html中的div，那么template:中的数据又是从哪来呢？import App from ‘./App’，导入当前目录下的App,并且给这个文件取了一个名字为App，然后把这个文件在components:中注册成了一个App组件
组件定义出来直接在template中写内容外，还可以定义一个.vue文件，这个文件分为三个部分，第一部分是template中是要展示的页面，html元素等。第二部分script脚本，就是元素里面变量的名字、事件、其他业务逻辑等。第三部分是style，就是去美化第一部分的页面，设置格式等。定义好之后在main.js中引入该文件并给它取个名字，然后再注册到组件中。
注册的时候是key-value的形式注册的，如果key-value都叫App,那么key可以省略
所以路由注册完整的写法应该如下

现在再回到App.vue中，template标签中需要注意，只能有一个元素，一般在里面放div,其他的都往div中放。我们可以看到div下只有一张图片和一个reuter-view

这就说明下面的内容全部都定义在中，它是一个占位符，暂时把图片下面的位置都占住，那么这里要显示什么东西呢？这个时候就要看地址栏是什么，实际上它显示的是components下的HelloWorld.vue下的内容
那么为什么会在占位符中显示HelloWorld.vue这个页面呢，在router文件夹叫路由表，这里面定义了所有的跳转关系。什么样的地址栏对应什么样的页面，都在里面定义好了。该文件夹下的index.js页面，首先导入了 ‘@/components/HelloWorld’，导入后在下面定义routes,routes就是路由表，path:‘/’就是当地址栏为‘/’的时候就显示HelloWorld组件
zai在components下创建一个Hello.vue文件，把该文件引入到router文件下的index.jsp
当地址栏的地址为/hello的时候，就会显示Hello.vue文件中的内容