APP常见加载方式

这里是修真院前端小课堂，每篇分享文从

背景介绍知识剖析常见问题解决方案编码实战扩展思考更多讨论参考文献

八个方面深度解析前端知识/技能，本篇分享的是：

什么是VueCLI3

Vue CLI 是一个基于 Vuejs 进行快速开发的完整系统，提供：

通过 @vue/cli 搭建交互式的项目脚手架。 

通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发。 

一个运行时依赖 (@vue/cli-service)，该依赖： 

可升级；

基于 webpack 构建，并带有合理的默认配置；

可以通过项目内的配置文件进行配置；

可以通过插件进行扩展。

一个丰富的官方插件集合，集成了前端生态中最好的工具。

一套完全图形化的创建和管理 Vuejs 项目的用户界面。 

Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必花好几天去纠结配置的问题。与此同时，它也为每个工具提供了调整配置的灵活性，无需 eject。

Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli (1x 或 2x)，你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。

Node 版本要求Vue CLI 需要 Nodejs 89 或更高版本 (推荐 8110+)。你可以使用 nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本。

npm install -g @vue/cli

# OR

yarn global add @vue/cli

1

2

3

使用 vue ui 命令打开UI界面，快速创建Vue-CLI30项目

点击创建项目会进来这么一个界面： 

填写项目名 

选择包管理器 

选择初始化git仓库 

我们选择手动，此时会让我们选择需要使用的库和插件，比如bebel、vuex、vue-router 等常用的库 

后面根据自己的需要配置就好了。 非常的简洁！

常见问题

使用vue-cli初始化后，到底还要不要装vuex,vue-router

解决方案

不需要，vueCLI30 在初始化后自动安装了vuex 和 vue-router

编码实战

略

扩展思考

如何在VueCLI30中使用VueCLI2x的模板

Vue CLI 3 和旧版使用了相同的 vue 命令，所以 Vue CLI 2 (vue-cli) 被覆盖了。如果你仍然需要使用旧版本的 vue init 功能，你可以全局安装一个桥接

npm install -g @vue/cli-init

# `vue init` 的运行效果将会跟 `vue-cli@2x` 相同

vue init webpack my-project

1

2

3

更多讨论

Q1：  build哪里去了？config哪里去了？配置都消失了？

A1:

vue-cli30默认项目目录与20的相比，更精简: 

1移除的配置文件根目录下的，build和config等目录， 

2移除了static文件夹，新增了public文件夹，并且indexhtml移动到public中。 

3在src文件夹中新增了views文件夹，用于分类 试图组件 和 公共组件 。 

4大部分配置 都集成到 vueconfigjs这里,在项目根目录下

在vueconfigjs里大概配置 

常用的路径名、根目录、预处理、devServer配置、pwa、dll、第三方插件 

vueconfigjs

Q2 webpackconfigjs 去哪了

A2:

webpack的相关配置可以写入vueconfigjs 内的 configureWebpack的选项下，但是如果是vueconfigjs中已有的配置， 不要写入configureWebpack内。

Q3 npm run dev改了？

A3:

在根目录的packagejson里有如下命令

“serve”: “vue-cli-service serve”,

“build”: “vue-cli-service build”,

“lint”: “vue-cli-service lint”

所以以前那些用npm run dev的，约莫是只能npm run serve/npm run build了

当然本身是“打包了一个express之类的serve工具啥的” 

具体是packagejson里面“scripts”有写键值

我最近用的是npm run serve

更多内容，可以加入IT交流群565734203与大家一起讨论交流

这里是技能树·IT修真院：>

大家好，我是IT修真院的学员，一位正直纯洁善良的web前端程序员，给大家分享一下什么是外边距重叠？重叠的结果是什么？

1背景介绍

外边距是盒子模型中的一个属性。在使用外边距时，有可能会发生外边距重叠。

2知识剖析

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。 合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

外边距的合并的几种情况

当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。

当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。

外边距甚至可以与自身发生合并。 假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并。

如果这个外边距遇到另一个元素的外边距，它还会发生合并

这就是一系列的段落元素占用空间非常小的原因，因为它们的所有外边距都合并到一起，形成了一个小的外边距。

外边距合并的意义：以由几个段落组成的典型文本页面为例。第一个段落上面的空间等于段落的上外边距。如果没有外边距合并，后续所有段落之间的外边距都将是相邻上外边距和下外边距的和。这意味着段落之间的空间是页面顶部的两倍。如果发生外边距合并，段落之间的上外边距和下外边距就合并在一起，这样各处的距离就一致了。

注意：只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。

3常见问题

有时候，我们有可能不需要外边距重叠。

4解决方案

1浮动元素、inline-block 元素、绝对定位元素的 margin 不会和垂直方向上其他元素的 margin 折叠（注意这里指的是上下相邻的元素）

2外层元素padding代替

3内层元素透明边框 border:1px solid transparent;

4用同一方向的margin，都设置为top或者bottom。

5编码实战

6扩展思考

7参考文献

1w3school教程 CSS 外边距合并

2如何解决外边距margin叠加的问题探讨

3CSS 外边距(margin)重叠及防止方法

8更多讨论

问题一

外边距有哪些属性？

答：margin-top  上外边距               margin-right  右外边距

    margin-bottom  下外边距             margin-left   左外边距

margin 属性接受任何长度单位，可以是像素、英寸、毫米或 em。

问题二

什么是外边距？

答：

围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。

问题三

margin如何简写？

答：

四条外边距按照上、右、下、左的顺序。

CSS 定义了一些规则，允许为外边距指定少于 4 个值。规则如下：

如果缺少左外边距的值，则使用右外边距的值。

如果缺少下外边距的值，则使用上外边距的值。

PPT

视频

本文仅供个人学习，转自IT修真院。

一、加载

      用户在客户端发出一个指令后，直到客户端出现反馈结果时，这段时间内计算机完成的一系列执行动作，可能包括有客户端发出请求，服务器做出响应，客户端拿到数据后计算，渲染等。

二、加载方式

1、启动页加载

      这个主要是APP启动时的一个页面，由于APP启动需要时间，因此可以加入一个启动页来自然过渡，而且很多启动页是广告，这样也可以带来一些收益，这个页面一般可以点击跳过。

2、界面跳转加载

      这个加载模式又可分为当前页加载和跳转下个页面加载。当前页加载一般是帐号登录的时候使用的，跳转页面加载一般用于新闻类APP，点击新闻标题后跳转至内容页面。

3、白屏加载

      这个加载方式其实很多地方都用到了，只是平常没有刻意关注它，在使用QQ或者微信时，如果别人发了一个链接过来，然后去点击链接，当时周围的网络信号又不太好的话，就会看到这种加载模式的完整过程。一般顶部会有进度条，出结果就是整个页面加载出来，加载失败的话则页面为空。

4、分步加载

      顾名思义，就是分步骤的加载网页，优先加载占网络资源较小的元素。如先文字和默认图标后，加载完成前使用占位符显示；当加载的页面内容有固定的框架时，可以先加载框架，再加载框架内的内容。这个方式可以减少用户等待内容时间，即使网络不太好，也可以先把文字等数据量较小的先显示出来，可以让用户提前看到一些内容。

      类似的还有懒加载与预先加载，都可以算作是分步加载。

      懒加载主要是针对前端页面比较大而设计出来的一种方式，假如一个网页很大，又含有很多、视频内容，那么想一次性加载就会等待很久，懒加载就是只有在屏幕显示范围内的资源，被用户看到的内容才会真正去加载。

       预加载就是提前加载，比如启动APP时，当显示启动画面时，就可以预先把首页内容加载出来，这样可以减少用户加载内容时的等待时间，还有一个很典型的使用场景就是浏览视频网站或者购物网站，当我们快要滑到页面底部时，下面已经几乎加载完成了，这就是预加载的好处，在使用上感觉更加流畅。

5、智能加载

      这个加载模式我经常使用到，假如是在WIFI情况下，使用QQ浏览器去看视频，那么它会自动加载视频播放，而使用4G的流量去访问视频页面的话，会有一个d窗来确认是否要播放，以免耗费大量流量造成用户扣费。智能加载模式就是根据用户使用场景来改变加载形式的。

6、缓存加载

      就是用户在没有网络的情况下，依靠缓存数据来加载内容，可以在断网的情况下显示数据，不会因为断网APP就啥也不显示了。而且由于有缓存数据，还可以提高正常模式下的加载速度，缺点就是会占用用户本地存储空间，设计时需要考虑好限制条件。

7、全页面加载

      将整个页面一起加载。这一过程用户不需要了解，不需要等待，在正常情况下体验是非常棒的。

8、占位色块加载

      在页面即将出现的位置加载占位色块，等到数据加载完成后将数据陆续填进色块（给用户加载很快的感觉，体验会比全页面加载流畅）。让等待时间变得更加有趣，保持用户感受的连续性。

9、进度条加载

      可以清楚的看到当前进度，反馈十分明确。反馈明确，清晰易懂缺点：页面无内容，美观度较低。

10、混合加载模式

      为了能让产品有一个流畅的体验，很多app会根据产品的各种不同场景来组合使用不同加载方式。根据不同场景来设计，体验升级缺点：需要对各场景制定对应的加载规范，保证交互一致性。

11、后台加载

       用户在 *** 作后，客户端立刻反馈 *** 作成功，然后把请求放到后台与服务器交互。这一过程用户不需要了解，不需要等待，在正常情况下体验是非常棒的。

12、渐进加载

      在 PC 端用浏览器看的时候，经常是先看到一张模糊图，然后再渐渐的变得清晰，这种效果就叫做渐进式加载。

三、加载遇到的问题

      有些加载过程的时间可能会比较长，甚至用户不知道此时应用是卡死了还是在执行命令，这样就会导致用户体验降低，用户会对应用失去耐心。

原文链接：>

以上就是关于什么是VueCLI3全部的内容，包括:什么是VueCLI3、IT行业中什么专业最吃香、什么是外边距重叠重叠的结果是什么等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！