Vue跨页面方法调用与项目常见问题解析

vue3多侧操作和包装

1最近，该公司已锚定了Zoomwebsdk。
由于某些特殊原因，有必要分开缩放。
相关页面为拥有HTML页面，这是由浏览器版本升级引起的问题。
因此，这是Vue项目的几页的包装和安排，以促进您自己的便利和需要的儿童鞋子。

2当服务命令不携带---模式时，标准术环境是当前环境的开发，也可以将其放入环境配置文件中，请添加包装的名称文件夹（有更多环境时，更方便）。

3。
在项目目录中打开EHOME。
VUE3和VUE2项目链接到包装并分发到VUE2项目，您只需要在项目目录中打开EHOME即可。
VUE是一个渐进的JavaScript框架，用于构建用户界面。

4自动配置和软件包后，通常只有一个HTML页面。
如果我们想打包两页该怎么办。
您只需要更改WebPack的配置即可。
下面是我项目的屏幕截图，以供vue.config.js参考，其中条目是文件参考路径，模板是包装文件的名称和位置。

跨世代的价值传输方法如下：当您单击第1页的“发送”按钮时，VUEX存储方法被调用以将文本存储在VUEX中。
然后，使用第2页观察挂钩功能监视Vuex中的更改。
如果更改，则执行相应的函数。

vue正式启动了一组API：给/注入以代代相传的传输值。

上面的两种方法用于在下属组件2的兄弟姐妹组件（组件1和组件2）之间传输值2。
，否则不会分析普通写作方法。
齿轮和注入发送的值类似于道具。
前者可以将值发送给后裔组件，而道具只能将其发送到组件下方。

2以Vue押金命名。
对话结束后，一切都将指向Vue机构的未绑定，所有活动听众将被删除，所有下属存款都将被销毁。

3。
当然，有些页面不需要嗡嗡作响，需要进行一些治疗。
我不想在这里详细介绍，因为我认为每个人都知道这一点（我不知道百度 ）。
EventBus（事件总线）事件总线用于在组件之间实现数据通信，并且非常易于使用。

4组件的生命周期是指从创建到驾驶（渲染）到破坏组件的整个过程，重点是一段时间。
VUE框架具有内置的生命周期功能不同时间的组件。
当组件运行时，生命周期功能会自动称为。

5。
VUE的生命周期是什么？ 从创造到破坏事件的过程是生命周期。
也就是说，从一开始到创建的许多过程，数据的初始化，模板的汇编，国内的安装，更新，卸载等等。
我们称之为这个VUE生命周期。

多-FAN页面必须在应用程序系统中使用，该页面与新页面打开后具有与浏览器相同的效果。
如果关闭标签并通过菜单打开。

window.vue.use（vuerouter）} 1234567891111121213141515161718可以看不见，这是vue.js插头的经典写作，并添加了安装方法以安装插件的特定逻辑。
同时，插头-in被自动使用

这也是登录登录页面路由以返回的通常方法之一，并且会跳到顶部。
上一篇文章不存在。

在vue.js中创建一个按钮组件，并使用V-ON指令将单击事件绑定到方法。
在此方法中，使用window.location.href属性将用户重定向到其他应用程序。

用vue框架做项目遇到的问题(vue项目常见问题)

了解了root、alias、try_files的基本用法后，开始尝试Vue项目部署。

（在上一篇文章中学习过如何使用）

之前听说很多朋友在使用vue-router-history模式时遇到各种问题。
如果静态资源丢失，刷新页面并得到 404 等

不用担心。
一旦查明原因，问题就可以轻松解决。

项目部署环境一般可以分为三种类型：生产环境、测试环境和开发环境。

开发环境：开发环境是配置相对随意的服务器，通常会打开所有错误报告和测试工具，以方便开发和调试。
这是最基本的环境。

生产环境：生产环境是正式对外提供服务的环境。
通常，错误报告是关闭的，错误记录是打开的。
部署分支通常是主分支。

测试环境：通常，如果程序在测试环境中无法正常运行，则不应克隆生产环境配置的副本并将其发布到生产服务器。
从开发环境到生产环境的过渡环境。

如果测试环境中的某个分支存在bug，该bug通常对用户和其他人来说是不可见的，并且测试环境尽可能与生产环境相似。

如何区分我的生产环境和开发环境？

process.env.NODE_ENV是节点的全局变量process的一个属性，它指定了当前的环境，可以参考。
它可以区分生产环境和开发环境。
：理解webpack process.env.NODE_ENV

事实上，典型的Vue单页应用项目会因为路径不匹配或者以下属性而遇到资源引用错误。
如果您想仔细阅读官方网站上的文档，请参阅此处。

现在让我们讨论如何使用以下属性：

我们会按照官网的说明发布使用图。

使用基于 HTML5history.pushState 的路由时，“相对 publicPath”受到限制。
也就是说，如果使用历史模式，publicPath必须设置为绝对路径。
然后在你的 vue.config.js 文件中你需要配置：

在 nginx 配置文件中，您需要设置以下：

假设我的项目是： 将其命名为 History 并将其放置在 /usr/local/webserver/nginx/myProject 目录中，例如 tre。
电子照片

发布示例：Chedoli 的服务器（点击跳转到使用路由）

您的配置有空白页、404 访问错误或资源引用有问题（。
你可以用F12检查），你应该检查publicPath，assetsDir，甚至nginx是否配置正确。

原因是页面刷新时，服务器找不到静态资源，返回404我认为是为了举报。
在这种情况下，解决方案很简单。
您需要将候选资源添加到您的服务器以涵盖所有情况。
：如果 URL 不匹配任何静态资源，它应该返回您的应用所依赖的相同的 index.html 页面。
即使用try_files查找index.html。

您可以查看该项目的nginx配置。

但是，这样配置后，服务器将不再返回404错误页面，因为返回了index.html文件。
在每条道路上。
为了避免这种情况，您需要在显示 404 页面之前涵盖 Vue 应用程序中的所有路由情况。

参见官网示例：

另一方面，也有可能是Vue-Router配置不正确。
初始化的时候需要注意base参数。
Router：

这样项目部署就完成了。

感谢Bo指出上一篇文章中的错误。
固定的。

Webpack 提供了两种配置文件，一种用于生产环境，一种用于在线环境。
正常开发时，通过接口将项目上线。
会自动切换到另一个界面。
这是上面的图。
首先，在 vue-cli 项目的 config 文件夹中找到 dev.env.js。
默认为：

接下来，您需要添加您的开发环境中使用的接口的域名。
请求背景数据如下所示。

您可以自行配置和自定义url_api。
以下路径是自己开发环境的接口。

接下来，找到 prod.env.js。
默认如下。

将在线请求接口配置也添加到该文件中。

最后自己封装一下在axios中调用这个接口：

自定义变量= process.env.url_api（这个只是在两个配置文件中自定义的），将URL加入到封装的axios中。
最后，当npmrundev用于生产时，会自动调用dev.env.js中定义的接口。
使用npmrunbuild打包时，会自动调用prod.env.js中配置的接口。

另外：跨域问题

? 有些朋友可能在Vue中设置了跨域代理，导致连接到Proxy的URL无法跨域连接。
-领域仍然发生。
我个人解决这个问题的想法是只用空字符串替换 dev.env.js 中的本地接口，而不更改代理配置。
开发环境不存在跨域问题。
如果不明白，请问我是否有更好的解决方案。
谢谢。

链接：

vue初学者问题记录

问题一、使用vue-router时出现的问题登录页面为空白问题

之前，我使用 vue-cli 创建了一个 vue 项目，但默认情况下它使用的是 vue-rout。
嗯，目录结构带有一个包含index.js 的路由器目录。

但是当我创建另一个项目时，默认不使用vue-router。
然后我使用 npminstallvue-router 安装该插件。
-在。
路由器目录不会在您的项目中自动创建。
根据搜索信息，这种方法并没有创建router目录，所以我将之前创建的项目的router目录以及里面的文件复制过来使用。

在使用过程中，我为新创建的项目创建了另一个Login.vue。
使用此登录页面作为主页并使用 vue-router 对其进行配置。
修复了路由器目录中的index.js。
如下：

在main.js中引入router.js。
如下。

这是我找到的配置登录页面的信息。
另外，我没有更改 App.vue，因为我不使用 router-link。
我以为已经设置好了，直接启动项目，却发现页面一片空白。
后来发现App.vue并没有使用router-view/router-view。
在 App.vue 中添加 router-view/router-view ，启动时即可正常显示登录页面。

总结：使用vue-router。

1.路由必须维护在router目录下的index.js中。

2.安装路由器。
添加到main.js文件

3.在App.vue iew中使用router-v

最后发现访问时favicon不显示的问题完毕。

访问的图标时显示。

经测试，原来是浏览器缓存问题。
如果清除浏览器缓存，它将正常显示。

问题2.使用vue-router时，子路由器没有显示任何问题。

问题描述，我的项目是登录页面，项目显示登录页面。
默认登录成功后显示。
登录成功后的默认页面由公共导航组件和组件组成。
但是，某些组件无法正确显示。
将显示。
经过分析数据，我们发现父路由我发现这是由于组件没有使用路由器视图造成的。
我的标头组件由两个组件组成。
只需将路由器视图添加到标头组件中，成功登录后它将显示默认页面。

要解决子路由不可见的问题，请在 HeadLayout.vue 中添加 router-view。

总结：要使用路由，需要使用router-view和父组件。

问题3.子根跳转问题

问题描述：最初我在MainMenu.vue中添加了切换路由的点击方法，但是切换后总是失败。
，第二页的会闪烁，然后显示第一页的。
写法如下：

第二个子路由页面的闪烁。

最后显示第一个子路由页面的。

要导致此链接点击问题，您需要删除href内的或将值更改为href="javascript:;"。

分析参考：

如果自己改成路由器链路，实现路由切换，就能正确切换。
另外，要使用 router-link 的 click 方法而不使用 to 属性来切换路由，您必须使用 native 修饰符。
@clike.native

但是还有另一个问题。
我想向路由器链接添加样式，并激活具有背景颜色的链接。
这是我用来写两者的风格。

.router-link-active{

background:#848484;

}

效果为：

所以我放弃了再次点击，直接使用to属性没有任何问题。

1 从浏览器了解这个应用的渲染结果，大致了解整个应用的大功能模块，比如欢迎页、用户等。
管理、业务数据查询等。

2 了解Vue项目的默认目录结构和加载流程（index.html、package.json、main.js、目录/等）。
构建、/config、/src 等

参考链接：

设计优雅的Vue项目目录结构

VUE启动流程

涉及状态对象的使用大部分要求你先部署vuex。
vuex 对象的定义和处理文件默认存储在项目的 /src/store 目录中。
其他文件所依赖的变量数据可以在该文件内的相应文件中找到。
目录。

参考链接：

什么是Vuex？

import语法是很多其他语言中都存在的关键字，很容易理解，但是什么是export。
导出的变量如何在其他文件中使用？

参考链接：

exportdefault和export的区别

v-auth指令在项目中经常见到，字面意思可以理解为权限验证。
我在互联网上找不到这个命令的含义或用法，但我了解到这个命令是这个应用程序的自定义命令，并且有一个专门为此命令定义的函数。

有用链接：

自定义说明

当您第一次了解 Vue 组件的概念时，您可能会认为每个元素标签都是一个 Vue 自定义组件。
然后开始在项目中查找组件的定义。
其实官方有很多el-popover、el-table、el-table-column等组件。
关于标签的定义和使用，请访问相应的官网。

参考链接：

ElementUI教程

1 Vue项目默认使用IntelliJidea作为开发IDE。
要在此 IDE 中启动 Vue 项目： 您需要安装nodejs并在IDE中配置RunConfigurations。
查看详细配置。
参考链接；

2 设置执行参数后，启动过程中报错：Error:listenEACCES:permissiondenied0.0.0.0:80 该错误原因是本地80端口。
关闭80后，通过更改占用端口的进程或配置文件中的端口号即可成功启动。

参考链接：

Idea运行Vue项目

如果你想使用idea本地调试，只需运行npmrundev即可，但是，如果你想将分支部署到服务器端，需要在本地运行npmrunbuild进行编译，并将编译后的文件上传到git。
这样，在与自动化集成工具集成时，就可以从git中检索解析后的文件，并用Web服务读取它（这个操作与Java不同）。
（一个只将源代码存储在git中的项目）。