本文目录导航：
web前端如何查问以后vue的版本?
查问以后 Vue 的版本，可驳回以下方法：方法一：在 Vue 运行的入口文件中，经过 require 或 import 检查 Vue 的版本号。
详细步骤如下：关上名目根目录下的 或许是 文件，经常使用以下代码查问();方法二：经过 npm 或 yarn 的包治理器查问已装置 Vue 的版本。
关上终端，口头以下命令：关于 npm：npm list vue --depth=0关于 yarn：yarn list vue --depth=0方法三：在阅读器中间接检查 Vue 版本。
关上阅读器开发者工具，进入“Sources”或“Module”面板，找到 文件。
理论 会作为 CDN 链接引入或间接在名目中经常使用。
在该文件的头部，应能看到相似于以下内容的注释：经过上述形式，即可轻松查问到以后 Vue 的版本号。
经常使用环节中需留意辨别 Vue 运行与 Vue CLI 创立名目标版本消息，以确保兼容性和正确性。
vue环境性能(vue环境性能教程)
Mac系统性能Vue开发环境首先装置nodejs
终端输入：brewinstallnodejs?或许间接官方手动装置。node-v检查nodejs版本
注：网上说经常使用终端装置会要求nodejs模块装置目录的权限，运转：sudochmod-R777/usr/local/lib/node_modules/
3、装置npm（淘宝镜像）
终端输入：npminstall-gcnpm--registry=
4、装置webpack
cnpminstallwebpack-g
5、装置vue脚手架（智能搭建vue名目框架的工具）
sudonpminstall-gvue-cli。
静待。
输入vue或许vuelist，可vue能否装置成功。
vue2/vue3环境搭建审核能否装置成功
Vuebuild==打包形式，回车即可；
Installvue-router==能否要装置vue-router，名目中必要求经常使用到所以Y回车；
UseESLinttolintyourcode==能否要求js语法检测目前咱们不要求所以n回车；
Setupunittests==能否装置单元测试工具目前咱们不要求所以n回车；
Setupe2etestswithNightwatch==能否要求端到端测试工具目前咱们不要求所以n回车；
1、build：构建脚本目录
1）==消费环境构建脚本；
2）==审核npm，版本；
3）==构建关系工具方法；
4）==性能了css加载器以及编译css之后智能参与前缀；
5）==webpack基本色能；
6）==webpack开发环境性能；
7）==webpack消费环境性能；
2、config：名目性能
1）==开发环境变量；
2）==名目性能文件；
3）==消费环境变量；
3、node_modules：npm加载的名目依赖模块
4、src：这里是咱们要开发的目录，基本上要做的事件都在这个目录里。外面蕴含了几个目录及文件：
1）assets：资源目录，搁置一些图片或许公共js、公共css。这里的资源会被webpack构建；
2）components：组件目录，咱们写的组件就放在这个目录外面；
3）router：前端路由，咱们要求性能的路由门路写在外面；
4）：根组件；
5）：入口js文件；
5、static：静态资源目录，如图片、字体等。不会被webpack构建
6、：首页入口文件，可以参与一些meta消息等
7、：npm包性能文件，定义了名目标npm脚本，依赖包等消息
8、：名目标说明文档，markdown格局
9、文件：这些是一些性能文件，包括语法性能，git性能等
1.处置vue不能智能关上阅读器的疑问：当咱们输入npmrundev，运转名目，命令行揭示咱们运转成功，然而阅读器也没有智能关上，只能自己手动输入。
改完之后重启一下即可。
2.为了防止端口抵触，也可以修正port，关上目录同上
更改成功：
1.假设你曾经全局装置了旧版本的vue-cli(1或2)，你要求先经过
npmuninstallvue-cli-g或yarnglobalremovevue-cli卸载它(卸载脚手架)
2.全局装置npminstall-g@vue/cli或yarnglobaladd@vue/cli
3.全局装置了vue-cli3然而还想用vue-cli2,参与一个桥接工具命令：npminstall-g@vue/cli-init
4.可以启动创立名目了
vue-cli2:命令：vueinitwebpackmy_project
vue-cli3命令：vuecreatemy-project
3.版本不同装置形式也不同
vue-cli2:命令npminstall-gvue-cli
vue-cli3:命令npminstall-g@vue/cli
3.版本不同的创立名目形式不同
vue-cli2:命令：vueinitwebpackmy_project
vue-cli3命令：vuecreatemy-project
-cli2和vue-cli3装置完后的名目目录不一样
5.装置指定版本的vue
npminstall-g@vue/cli@3.12.1
vue-cli3.0名目目录结构
vue-cli2.0名目目录结构
vue-cli4.5.15的vue2名目目录
VUE性能proxy代理、开发环境、测试环境、消费环境
前端开发环节中，咱们经常会碰到跨域的疑问，上方咱们来性能下，不同的环境下，一致的跨域疑问处置。
2、开发环境
测试环境
消费环境
3、性能
4、axios性能baseURL
5、性能打包、启动（json无法以再备注，我是为了繁难了解）
vuecli4.0性能环境变量------------------注释开局------------------
开发名目时，经常会要求在不同环境中切换。那么咱们如何性能不同的环境变量呢？
为了愈加繁难消化本文章，倡导先看下官方文档：
环境变量和形式
看完官方的文档假设还没有明确，可以参考本文。
在vue-cli构建的名目中，自动有3种形式，如下图：
我团体的了解就是：
你口头npmrunserve时，对应的环境就是开发环境；
你口头npmrunbuild时，对应的环境就是消费环境。
假设你开发的名目中，不止该3种，该咋整呢？像在我开发的名目中，就有本地环境(local)、开发环境(development)、测试环境(devtest)、预颁布环境(beta)、消费环境(production)。
请记住我括号外面的英文。
来，左边跟我一同画个龙，在你左边儿画一道彩虹画完了，开局进入主题了
------------------进入主题------------------
如官方文档所说，经过为文件参与后缀来设置某个形式下特有的环境变量。
我这里有5个环境，所以性能了5个文件。
如下图：
基本格局如下：
preNODE_ENV=环境称号
VUE_APP_URL=对应的环境地址/pre
如我本地环境的性能就如下图所示：
我本地是用的easy-mock模拟的数据，所以性能的地址是mock接口地址。
如官方文档所说，可以经过传递--mode来性能不同的形式。我自己的名目性能如下图：
请留意我性能文件中的serve与build。
文件已创立好，性能语句也已写好。怎样用它呢？
首页你要求哪个环境，就口头哪个环境的命令语句。
比如我如今要求local环境，就口头npmrunlocal-serve。如下图所示：
而后经过_ENV失掉环境名；经过_APP_URL失掉环境对应的url。
比如咱们在axios恳求中，就可以把它的baseURL设置为_APP_URL，如下图所示：
前面的/web是依据我自己接口来的，你别也写个/web。
假设你不确定你自己如今是在哪个环境变量下，可以(以后环境变量：+_ENV)和(以后环境门路：+_APP_URL)看下。
像我的名目中就是上方这2个东东：
输入的内容就是文件外面性能的环境变量。
为了更好的了解，咱们再口头一条语句，npmrunserve,看看此时的环境变量是哪个？
为什么呢？
由于npmrunserve自动指向，我在外面性能的环境就是上方输入的内容。的性能如下图：
总而言之就是，你要求哪个环境变量，就【npmrun对应的环境变量】就完事了！
keep-alive缓存篇(进阶篇)
完整名目地址： vue3-element-plus
体验地址：
系列文章入口：
当咱们在某些特定场景中要求缓存某个页面，此时就要求用到咱们所要求讲的keep-alive，本篇重要解说架构中keep-alive的原理和经常使用
keep-alive体验地址
src/layout/components/
src/router/
在meta里设置 cachePage 或许 leaveRmCachePage ，选择能否要求缓存和移除缓存 各种组合状况
有时咱们会有这种业务场景
从A页面跳到B页面在到C页面，此时要求A,B,C页面都要求缓存。
保留A,B,C页面的形态，如A页面的列表搜查条件等。
然而假设跳出A,B,C页面时要求同时清空A,B,C页面的缓存，如：
src/views/example/keep-alive/
架构为什么要这样设置呢？
1.缓存和tab没无关联，更利于缓存的灵敏性能。
如：当咱们在中设置 showTagsView 为false时，依然可以经常使用路由性能的 cachePage 或许 leaveRmCachePage 启动设置缓存， TagsView 的显示和暗藏对缓存没有影响。
2.和路由性能无关联，更利于咱们对缓存的经常使用。
如，咱们可以依据路由性能的 cachePage 或许 leaveRmCachePage ，成功启动页面能否缓存，和退出页面页面能否移除缓存的 组合式选用 。
在想成功此性能页面的路由上设置
