vuecli-public中的index.html中的操作

SPA（单页面web应用）

单页Web应用（single page web application，SPA），就是只有一张Web页面的应用，是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。

特点：

    速度：更好的用户体验，让用户在web app感受native app的速度和流畅，

    MVVM：经典MVVM开发模式，前后端各负其责。

    ajax：重前端，业务逻辑全部在本地操作，数据都需要通过AJAX同步、提交。

    路由：在URL中采用#号来作为当前视图的地址,改变#号后的参数，页面并不会重载。

优点：

1) 有良好的交互体验
能提升页面切换体验，用户在访问应用页面是不会频繁的去切换浏览页面，从而避免了页面的重新加载；
2) 前后端分离开发

前后端分离，比如vue项目

单页Web应用可以和 RESTful 规约一起使用，通过 REST API 提供接口数据，并使用 Ajax 异步获取，这样有助于分离客户端和服务器端工作。更进一步，可以在客户端也可以分解为静态页面和页面交互两个部分；
3) 减轻服务器压力
服务器只用出数据就可以，不用管展示逻辑和页面合成，吞吐能力会提高几倍；
4) 共用一套后端程序代码

不用修改后端程序代码就可以同时用于 Web 界面、手机、平板等多种客户端；

缺点：

1) SEO难度较高
由于所有的内容都在一个页面中动态替换显示，所以在SEO上其有着天然的弱势，所以如果你的站点对SEO很看重，且要用单页应用，那么就做些静态页面给搜索引擎用吧；
2) 前进、后退管理
由于单页Web应用在一个页面中显示所有的内容，所以不能使用浏览器的前进后退功能，所有的页面切换需要自己建立堆栈管理，当然此问题也有解决方案，比如利用URI中的散列+iframe实现；
3) 初次加载耗时多

为实现单页Web应用功能及显示效果，需要在加载页面的时候将JavaScript、CSS统一加载，部分页面可以在需要的时候加载。所以必须对JavaScript及CSS代码进行合并压缩处理；

单页面应用，最后它只会生成1个html

vuecli-public中的index.html中的操作

页面预览后，单击右键查看页面源码：

把 noscript删掉，它不会在页面上显示

    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>

再次打开页面预览，单击右键，查看源码：

noscript部分代码 就不会 再显示出来了！！！

注意：单页面应用的css

list.vue里写的样式，会作用到app.vue上。

因为vue它是 单页面应用！！！

（因为vue最后 只会生成1个html应用）虽然h3的样式是写在list里面，vue编译的时候，会把它拿到index.html的head头部区域。这个样式，对整个页面里的h2标签都会有影响。

如果，list.vue单个组件里的样式，让他只作用在当前组件上，只需要在当前组件身上，style标签上，添加scoped 即可。当前style只对本组件有效！！！

<style scoped>
h2{
    color: red;
}
</style>

所有的标签在将来渲染的时候，都会加上一个特殊属性~~就是一个随机属性（data-v-后面跟随机字母+数字的字符串），当前style只对本组件有效！！所以你在设计的时候，需要在style上添加scoped，表示当前样式的唯一性！！！