一、Vue多页面应用的环境搭建
每一次页面跳转的时候，后台服务器都会给返回一个新的html文档，这种类型的网站也就是多页网站，也叫做多页应用。
环境的搭建如下，在页面中引入如下框架
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
二、Vue单页面应用(SPA)
第一次进入页面的时候会请求一个html文件，刷新清除一下。切换到其他组件，此时路径也相应变化，但是并没有新的html文件请求，页面内容也变化了。
环境搭建===》用vue-cli可以搭建基础的SPA架构模板。
vue多页应用与单页应用的区别
这里详解 ---> 单页应用的搭建（这里使用vue2.X）
1.用vue-cli构建并初始化项目
npm install -g vue-cli
vue init webpack my-project 初始化一个完整的webpack的项目
注意：所有从gitHub上下载下来的项目，都必须用 npm install 下载这个项目的所有依赖，才能正常运行下载下来的项目。
初始化过程
项目构建目录
├─build // webpack开发打包相关配置 │ ├─build.js // 项目开发完成，需要build.js打生产包---》构建环境下的配置:loading动画;删除创建目标文件夹;webpack编译;输出信息 │ ├─check-versions.js // node和npm的版本检查 │ ├─logo.png │ ├─utils.js // 配置静态资源路径；cssLoaders用于加载.vue文件中的样式；styleLoaders用于加载不在.vue文件中的单独存在的样式文件 │ ├─vue-loader.conf.js │ ├─webpack-base.conf.js // 基本的webpack配置.配置webpack编译入口/webpack输出路径和命名规则/模块resolve规则/不同类型模块的处理规则 │ ├─webpack-dev.conf.js // 开发环境配置,在base.conf基础进一步完善;合并基础webpack配置;将hot-reload相关的代码添加到entry chunks;使用styleLoaders;配置Source Maps / webpack插件; │ ├─webpack-prod.conf.js // 生产环境配置,在base.conf基础进一步完善;合并基础webpack配置;使用styleLoaders;配置webpack输出/webpack插件;gzip模式下的webpack插件配置;webpack-bundle分析 ├─config // 项目配置（端口号等） │ ├─dev.env.js │ ├─index.js // 用于定义开发环境和生产环境所需要的参数 │ ├─prod.env.js ├─dist // cnpm run build 项目打包后生成的文件夹 ├─node_modules // cnpm install 项目依赖模块 ├─src // 源码目录 │ ├─assets // 资源目录（放置一些图片等），这里的资源会被webpack构建,更倾向于放置组件的资源（css及img） │ ├─components │ ├─router // 路由 │ ├─App.vue // 根组件 │ ├─main.js // 入口js ├─static // 纯静态资源（不会变动的资源，如图片、字体），不会被webpack构建，直接被复制到打包目录dist/static ├─.babelrc // 放在根目录下，用来将es6转换为es5的转换器 ├─.editorconfig // 代码的规范文件（规定使用空格或tab缩进，缩进的长度等，使用的话需要在编辑器下载对应的插件），团队里，需要遵循一定的开发规范 ├─.gitignore // 指定 git 忽略的文件，所有 git 操作均不会对其生效； ├─.postcssrc.js // 指定使用的 css 预编译器，里面默认配置了 autoprefixer ，自动补全浏览器前缀 ├─index.html // 项目入口页面 ├─package-lock.json // 确定当前安装的包的依赖，以便后续重新安装的时候生成相同的依赖，而忽略项目开发过程中有些依赖已经发生的更新； ├─package.json // 项目配置文件 └─README.md // 项目说明