javascript - 请教一个vue的问题，一两句话还真说不清。。。

Question

现已有一个成形的vue框架的工程，我一开始准备重新写一个首次加载的login页面，可是所有的文件都会从app.vue里调用根组件，可我并不想用。
我现在想做的，比如说，原工程从8088端口进入，我想先写一个单独的页面，从8080进入，登录成功时才进入这个工程，再从8088进入，大概如下图所示，

问题是

就像上图这样，原本经由这个顺序最后用户看到的就是我们平时看到的效果，现在我这个文件（暂且叫做New_index）是应该在工程外单独写一个，还是应该替换原本的index？如果New_index和根目录那些诸如App.vue这样的文件写在一起，最终New_index肯定还是会调用App.vue里面的样式，这是我不希望发生的，可我又不太理解如何在工程外写一个New_index还能在打开工程的时候先加载New_index，请大神指教

Answer 1

建议通过nginx服务器来进行跳转，开发一个新的首页index_new.html，放到web服务器里面，保证可以直接访问到，其实跟Vue里面的app.vue没什么关系的，通过nginx讲index.html指向index_new.html，再通过改变url来让它回到index.html

Answer 2

简单的说，既然都用两个独立的端口号了，就把它们当做两个不同的项目看好了。 登录的项目登录成功后跳转到指定URL。 咦，不对，这样登录数据就没法用COOKIE了。

Answer 3

我的理解是，你在app.vue中写了许多全局样式，现在需要增加一个login页，但这个login页要防止被app.vue的样式污染？
我猜你是需要这个功能？

CSS 的组件作用域

除非你把组件分布在多个文件上(例如 CSS Modules)，要不在 React 中作用域内的 CSS 就会产生警告。非常简单的 CSS 还可以工作，但是稍微复杂点的，比如悬停状态、媒体查询、伪类选择符等要么通过沉重的依赖来重做要么就直接不能用。

而 Vue 可以让你在每个单文件组件中完全访问 CSS。

<style scoped>
    @media (min-width: 250px) {
        .list-container:hover {
            background: orange;
        }
    }
</style>

这个可选 scoped 属性会自动添加一个唯一的属性（比如 data-v-21e5b78）为组件内 CSS 指定作用域，编译的时候 .list-container:hover 会被编译成类似 .list-container[data-v-21e5b78]:hover。

如果你已经熟悉 CSS Modules，Vue 单文件组件也有 first-class 支持它。

最后，就像 HTML 一样，你可以选择自己偏爱的 CSS 预处理器（或后处理器）编写 CSS，这些生态系统允许您利用现有的库。这可以让你围绕设计为中心展开工作，,比如您的构建过程中颜色操作，而不是引入专门的库来增加你应用的体积和复杂度。