Vue, App与我（二）

最新推荐文章于 2024-05-01 06:25:51 发布

前端Baymax

最新推荐文章于 2024-05-01 06:25:51 发布

阅读量1.9k

点赞数 2

分类专栏：趣味前端文章标签： app 移动 vue-js webpack

本文链接：https://blog.csdn.net/XXJ19950917/article/details/75004770

版权

趣味前端专栏收录该内容

61 篇文章 2 订阅

订阅专栏

Vue, App与我（二）

前言:

进过上一章的讲解，Big-man已经理解了项目的搭建，接下来就是项目的具体代码了。
还有就是Webpack的配置说明Big-man在上面仅仅是简单的引用，所以Big-man会在接下来继续进行分析和总结。

`Vue-index.html`移动端的`h5`:

index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>test</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="/dist/build.js"></script>
  </body>
</html>

这是搭建环境的默认文件，但是Big-man需要做得是与App的缠绕，所以需要进行改写。

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="description" content=" "> 
    <meta name="keywords" content="">
    <meta name="format-detection" content="telephone=no">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Expires" content="0">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

下面两个link标签不用考虑，引入的是外来的css样式，需要参看的是上面的meta标签部分，这部分标签是书写app的所需要的配置文件。有了这部分的meta文件才好进行app端的开发。

`<meta>`解释:

前言:

<meta>元素可提供有关页面的元信息(meta-information)，比如针对搜索引擎和更新频度的描述和关键词。
<meta>标签位于文档的头部，不包含任何内容。<meta>标签的属性定义了与文档相关联的名称/值对。

`<meta http-equiv="X-UA-Compatible" content="IE=edge" />`:

X-UA-Compatible是针对IE8新增加的一个属性，对于IE8之外的浏览器是不识别的，这个区别与content="IE=edge"在无论页面是否在包含<!DOCTYPE>指令，都像是使用了 Window Internet Explorer Edge的标准模式。而content="IE=Edge"模式遵循<!DOCTYPE>指令。对于多数网站来说，它是首选的兼容性模式。
X-UA-Compatible是针对IE8版本的一个特殊文件头标记，用于为IE8指定不同的页面渲染模式，但是如今的IE浏览都是更新到Edge了，所以这个<meta>属性的作用并没有那么大的效果。
也就是说，上面代码的作用是Edge 模式通知 Windows Internet Explorer 以最高级别的可用模式显示内容，这实际上破坏了”锁定”模式。以下是针对于其他的兼容模式(IE8之前就不在追溯了):
<meta http-equiv="X-UA-Compatible" content="IE=8" />:
- 开启 IE8 的标准渲染模式，但由于本身 X-UA-Compatible 文件头仅支持 IE8 以上版本，因此等同于冗余代码。
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />:
- EmulateIE7 模式通知 Windows Internet Explorer 使用 <!DOCTYPE> 指令确定如何呈现内容。标准模式指令以Windows Internet Explorer 7 标准模式显示，而 Quirks 模式指令以 IE5 模式显示。与 IE7 模式不同，EmulateIE7 模式遵循指令。对于多数网站来说，它是首选的兼容性模式。但是这也已经是几年前的事情，LOL这款游戏都不支持IE9以下的版本了。
这也就是说这一类的配置基本可以不进行配置，Big-man提出来写就是说明一下它的作用与发源。

http-equiv属性:

http-equiv属性为名称/值对提供了名称。并指示服务器在发送实际的文档之前先在要传送给浏览器的MIME文档头部包含名称/值对。
当服务器向浏览器发送文档时，会先发送许多名称/值对。虽然有些服务器会发送许多这种名称/值对，但是所有服务器都至少要发送一个: content-type:text/html。这将告诉浏览器准备接受一个HTML文档。
使用带有http-equiv属性的<meta>标签时，服务器将把名称/值对添加到发送给浏览器的内容头部。比如如下所示:

content-type: text/html
charset: utf-8
expires: 16 Dec 2017

这部分的配置在html书写的格式是:

<meta http-equiv="charset" content="utf-8" />
<meta http-equiv="expires" content="16 Dec 2017">

当然，标准的变化h5的引入外加只有浏览器允许这些附加的头部字段，并能以适当的方式去使用它们时，这些的字段才会存在意义。

`<meta name="keywords" content="">`:

name属性:
- name属性提供了名称/值对中的名称。HTML和XHTML标签都没有指定任何预先定义的<meta>名称。通常情况下，可以自由使用对自己和源文档的读者来说富有意义的名称。
- "keywords"是一个经常被用到的名称。它为文档定义了一组关键字。某些搜索引擎在遇到这些关键字时，会用这些关键字对文档进行分类。
- 类似于这样的meta标签可能对于进入搜索引擎的索引有帮助:
- <meta name="keywords" content="HTML, CSS, JS">
如果没有提供name属性，那么名称/值对就会采取http-equiv中的名称/值对。

`<meta name="format-detection" content="telephone=no" />`:

`content`属性:

content属性提供了名称/值对中的值。该值可以是任何有效的字符串。
content属性始终要和name属性或者http-equiv属性一起使用。比如上面的Big-man写的代码中，<meta>标签中没有看见过单独的content属性。

`format-detection`属性:

在iPhone手机上默认值是(电话号码显示为拨号的超链接):
- <meta name="format-detection" content="telephone=yes" />
可将telephone=no，则手机号码不被显示为拨号链接。
- <meta name="format-detection" content="telephone=no" />

iOS的私有属性:

<meta content="yes" name="apple-mobile-web-app-capable">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">

<meta content="yes" name="apple-mobile-web-app-capable">:
- 网站开启对web app程序的支持。
<meta name="viewport" content=" width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />:
- width <–> viewport的宽度;
- height <–> viewport的高度;
- initial-scale <–> 初始的缩放比例;
- minimum-scale <–> 允许用户缩放到的最小比例;
- maximum-scale <–> 允许用户缩放到的最大比例;
- user-scalable <–> 用户是否可以手动缩放;
在iPhone的浏览器中页面将以原始大小显示，不允许缩放。

`<meta>`设置缓存:

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">

`<meta http-equiv="Pragma" content="no-cache">`:

pragma和no-cache用于定义页面缓存，不缓存页面(为了提高速度一些浏览器会缓存用户浏览过的页面，通过下面的定义，浏览器一般不会缓存页面，而且浏览器无法脱机浏览)。

`<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">`:

content中常见的值有private、no-cache、max-age、must-revalidate等，默认为private，其作用根据不同的重新浏览方式分为以下几种情况:
- 1、打开新窗口, 值为private、no-cache、must-revalidate，那么打开新窗口访问时都会重新访问服务器。而如果指定了max-age值，那么在此值内的时间里就不会重新访问服务器。例如: Cache-control: max-age=5(表示当访问此网页后的5秒内再次访问不会去服务器) 。
- 2、在地址栏回车，值为private或者为must-revaliable则只有第一次访问时会访问服务器，以后就不再访问。值为no-cache，那么每次都会访问。值为max-age，则在过期之前不会重复访问。
- 3、按后退按钮，值为private、must-revaliable、max-age，则不会重复访问，值为no-cache，则每次都重复访问。
- 4、按刷新按钮，无论为何值，都会重复访问， Cache-content值为"no-cache"时，访问此页面不会在Internet临时文件夹留下页面备份。

`<meta http-equiv="Expires" content="0">`:

指定Expires值为一个早已过去的时间，那么访问此网页时若重复在地址栏按回车，那么每次都会重复访问: Expires: Fri, 31 Dec 1999 16:00:00 GMT 比如：禁止页面在IE中缓存 http响应消息头部设置： CacheControl = no-cache Pragma=no-cache Expires = -1 Expires是个方便的设计，如果服务器上的网页经常变化，就把它设置为0，表示立即过期。

`<meta name="robots" content="noindex, follow" />`

这个元标记控制搜索引擎如何抓取和索引页。”robots”元标记指定大的规则适用于所有搜索引擎，”googlebot”元标记指定的规则只适用于Google。Google可以理解以下值(当然，需要多个值时，Big-man会用逗号进行分开):
- noindex: 防止网页被索引;
- nofollow: 不要通过当前页面得到链接来寻找并抓取新的网页;
- nosnippet: 在搜索结果中显示当前页时，不要显示页面摘要;
- noodp: 在为本页产生标题或者页面摘要时，不要使用开放式目录项目(又名dmoz.org)中的文本;
- noarchive: 在显示网页于搜索结果中时，不要显示一个”网页快照”链接;
- unavailable_after:[日期]: 在指定的日期和时间后从搜索结果中删除这个网页;
当Big-man完全省略此标记或者当Big-man指定content="all"时，默认规则是"index, follow"。作为一个说明，Big-man现在也可以在Big-man自己的页面首部通过"X-Robots-标签"HTTP头指令来指定这一信息。这特别有用，尤其是当你想微调抓取和索引诸如PDF, 图片或者其他类型的非HTML文件时。
name="robots" content=""取值:
- none: 搜索引擎将忽略此网页，等价于noindex, nofollow;
- noindex: 搜索引擎不索引此网页;
- nofollow: 搜索引擎不继续通过此网页的链接索引搜索其它的网页;
- all: 搜索引擎将索引此网页与继续通过此网页的链接索引，等价于index, follow;
- index: 搜索引擎索引此网页;
- follow: 搜索引擎继续通过此网页的链接索引搜索其他的网页;
- noodp noydir: 不使用DOMZ、Yahoo!目录中描述作为网页摘要;
  - noodp(No Open Directory Project): 在搜索结果中不适用Open Directory Project中描述信息作为其摘要信息;
  - noydir(No Yahoo Directory): 在搜索结果中不使用Yahoo Directory中的描述信息作为其摘要信息。
搜索引擎机器人(Specific SearchRobots)列表:
- 搜索引擎 – Robots（机器人）
- Google – googlebot
- MSNSearch – msnbot
- Yahoo – yahoo-slurp
- Baidu – baiduspider
- Ask/Teoma – teoma
- Cuil – twiceler
- GigaBlast – gigabot
- Scrub The Web – scrubby
- DMOZ Checker – robozilla
- Nutch – nutch
- Alexa/Wayback – ia_archiver
- Naver – naverbot, yeti
- AltaVista – scooter
- AllTheWeb – FAST-WebCrawler
- Inktomi – Slurp
特殊用途搜索引擎机器人（Specific Special Bots）列表
- 搜索引擎 Robots（机器人）
- Google Image – googlebot-image
- Google Mobile – googlebot-mobile
- YahooMM – yahoo-mmcrawler
- MSN PicSearch – psbot
- SingingFish – asterias
- YahooBlogs – yahoo-blogs/v3.9

Vue引入打包文件:

<div id="app"></div>
将把app.vue中的页面展示和渲染在这部分内容里面进行展示代码所在。
<script src="/dist/build.js"></script>
这是打包之后的js代码，也就是npm run build之后生成的代码。这部分代码是进行压缩处理过的。

`Webpack`的核心概念:

高度可配置的属性在上一篇文章Vue, App与我(一)中进行了讲解，接下来讲解Webpack的四个核心概念。

入口(`entry`):

入口起点(entry point)指示webpack应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack会找出有哪些模块和库是入口起点(直接和间接)依赖的。
每个依赖项随即被处理，最后输出到称之为bundles的文件中。

入口起点(Entry Points):

在webpack配置中有很多种方式定义entry属性。除了解释为什么它可能非常有用，Big-man当然还会在这里展示如何去配置entry属性。

单个入口(简写)语法:

用法: entry: string|Array<string>
webpack.config.js:

const config = {
    entry: './path/to/my/entry/file.js'
};

module.exports = config;

entry属性的单个入口语法，是下面的简写:

const config = {
    entry: {
        main: './path/to/my/entry/file.js'
    }
};

当你向entry传入一个数组时会发生什么？向entry属性传入[文件路径(file path)数组]将创建“多个主入口(multi-main entry)”。在你想要多个依赖文件一起注入，并且将它们的依赖导向(graph)到一个“chunk”时，传入数组的方式就很有用。
当Big-man正在寻找为[只有一个入口起点的应用程序或者工具(即library)] 快速配置webpack配置的时候，这会是个很不错的选择。然而，使用此语法在扩展配置时有失灵活性。

对象语法:

用法: entry: {[entryChunkName: string]: string|Array<string>}
webpack.config.js:

const config = {
    entry: {
        app: './src/app.js',
        vendors: './src/vendors.js'
    }
};

对象语法会比较繁琐。然而，这是应用程序中定义入口的最可扩展的方式。
“可扩展的webpack配置”是指可重用并且可以与其他配置组合使用。这是一种流行的技术，用于将关注点(concern)从环境(environment)、构建目标(build target)、运行时(runtime)中分离。然后使用专门的工具(如webpack-page)将它们合并。

常见场景:

以下列出一些入口配置和它们的实际用例:

分离应用程序`[app]`和第三方库`[vendor]`入口

webpack.config.js:

const config = {
    entry: {
        app: './src/app.js',
        vendors: './src/vendors.js'
    }
};

这是什么？
- 从表面上看，这告诉Big-manwebpack从app.js和vendors.js开始创建依赖图(dependency graph)。这些依赖图是彼此完全分离、互相独立的(每个bundle中都有一个webpack引导(bootstrap))。这种方式比较常见于，只有一个入口起点(不包括vendor)的单页应用程序*(single page application)*中。
为什么 ?
- 此设置允许Big-man使用CommonsChunkPlugin从[应用程序 bundle]中提取vendor引用(vendor reference)到vendor bundle, 并把引用vendor的部分替换为_webpack_require_()调用。如果应用程序bundle中没有vendor代码，那么Big-man可以在webpack中实现被称为长效缓存的通用模式。

注意: 为了支持提供更佳 vendor 分离能力的 DllPlugin，考虑移除该场景。

多页面应用程序

webpack.config.js:

const config = {
    entry: {
        pageOne: './src/pageOne/index.js',
        pageTwo: './src/pageTwo/index.js',
        pageThree: './src/pageThree/index.js'
    }
};

这是什么 ?
- 这是Big-man告诉webpack需要3个独立分离的依赖图(如上面的示例)。
为什么 ?
- 在多页应用中，(译注: 每当页面跳转时)服务器将为Big-man获取一个新的HTML文档。页面重新加载新文档，并且资源被重新下载。然而，这给了Big-man特殊的机会去做很多事情:
  - 使用CommonsChunkPlugin为每个页面间的应用程序共享代码创建bundle。由于入口起点增多，多页应用能够复用入口起点之间的大量代码/模块，从而可以极大地从这些技术中收益。

根据前辈们的经验: 每个HTML文档只使用一个入口起点。

以上是入口以及入口起点的论述，Big-man可以通过Webpack配置中配置entry属性，来指定一个入口起点(或者多个入口起点)。

JackDan9 Thinking

前端Baymax

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue, App与我（二）

Vue, App与我（二）前言:进过上一章的讲解，Big-man已经理解了项目的搭建，接下来就是项目的具体代码了。还有就是Webpack的配置说明Big-man在上面仅仅是简单的引用，所以Big-man会在接下来继续进行分析和总结。Vue-index.html移动端的h5:index.html:<!DOCTYPE html><html lang="en"> <head> <m
复制链接

扫一扫