From 9b1b27f5f220e12bcad7dbfb349fcc77479904ec Mon Sep 17 00:00:00 2001
From: kenken-xr <72636013+kenken-xr@users.noreply.github.com>
Date: Mon, 22 Nov 2021 10:35:23 +0800
Subject: [PATCH] Add files via upload
---
.../docs/2.2.2.1 前端基础及Vue实战.md | 1425 +++++++++++++++++
1 file changed, 1425 insertions(+)
create mode 100644 docs/第二章 推荐系统实战/2.2新闻推荐系统实战/docs/2.2.2.1 前端基础及Vue实战.md
diff --git a/docs/第二章 推荐系统实战/2.2新闻推荐系统实战/docs/2.2.2.1 前端基础及Vue实战.md b/docs/第二章 推荐系统实战/2.2新闻推荐系统实战/docs/2.2.2.1 前端基础及Vue实战.md
new file mode 100644
index 00000000..5f4ac5e3
--- /dev/null
+++ b/docs/第二章 推荐系统实战/2.2新闻推荐系统实战/docs/2.2.2.1 前端基础及Vue实战.md
@@ -0,0 +1,1425 @@
+# 1.Web前端
+
+ Web前端网页主要由文字、图像和超链接等元素构成。当然，除了这些元素，网页中还可以包含音频、视频以及Flash等。
+
+
+
+## 1.1 什么是Web
+
+ Web（World Wide Web）即全球广域网，也称为万维网，它是一种基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息系统。是建立在Internet上的一种网络服务，为浏览者在Internet上查找和浏览信息提供了图形化的、易于访问的直观界面，其中的文档及超级链接将Internet上的信息节点组织成一个互为关联的网状结构。
+
+ Web前端主要是通HTML,CSSJS,ajax,DOM等前端技术,实现网站在客服端的正确显示及交互功能。
+
+
+
+## 1.2 Web 标准构成
+
+主要包括结构（Structure）、表现（Presentation）和行为（Behavior）三个方面。
+
+- **结构标准**：结构用于对网页元素进行整理和分类，对于网页来说最重要的一部分 。通过对语义的分析，可以对其划分结构。具有了结构的内容，将更容易阅读.
+- **表现标准**：表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS 。为了让网页能展现出灵活多样的显示效果.
+
+- **行为标准**：行为是指网页模型的定义及交互的编写 。使用户对网页进行操作，网页可以做出响应性的变化。
+
+
+
+总的来说，
+
+- Web标准有三层结构，分别是结构（HTML）、表现（CSS）和行为（JS）
+- 结构类似人的身体， 表现类似人的着装， 行为类似人的行为动作
+
+- 理想状态下，他们三层都是独立的， 放到不同的文件里面
+
+
+
+### 1.2.1 HTML
+
+- HTML 指的是超文本标记语言 (**H**yper **T**ext **M**arkup **L**anguage)是用来描述网页的一种语言。
+- HTML 不是一种编程语言，而是一种标记语言 (markup language)
+- 标记语言是一套标记标签 (markup tag)
+
+
+
+#### 1.2.1.1 超文本的含义
+
+- **超越文本限制**：可以加入图片、声音、动画、多媒体等内容
+- **超级链接文本**：可以从一个文件跳转到另一个文件，与世界各地主机的文件连接。
+
+
+
+#### 1.2.1.2 语法骨架格式
+
+```html
+
+
+
+
+ 我的第一个页面
+
+
+ 一个一级标题
+ 一个段落。
+
+
+```
+
+- **** 声明为 HTML5 文档
+- **** 元素是 HTML 页面的根元素
+- **** 元素包含了文档的元（meta）数据
+ - **** 定义网页编码格式
+ - **** 元素描述了文档的标题
+- **<body>** 元素包含了可见的页面内容
+ - **<h1>** 元素定义一个标题
+ - **<p>** 元素定义一个段落
+
+
+
+参考链接：
+
+https://www.runoob.com/html/html-tutorial.html
+
+https://www.w3school.com.cn/html/index.asp
+
+
+
+### 1.2.2 CSS
+
+- CSS(**C**ascading **S**tyle **S**heets) ，通常称为CSS样式表或层叠样式表（级联样式表）
+- CSS主要用于设置 HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。
+- CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。
+
+
+
+#### 1.2.2.1 CSS 规则
+
+
+
+- **选择器**：需要改变样式的 HTML 元素。
+
+- **声明**：由一个属性和一个值组成。声明之间用分号结束。
+
+ - **属性**：希望设置的样式属性。每个属性有一个值。属性和值用冒号分开。
+
+
+
+#### 1.2.2.2 语法格式
+
+```html
+<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>
+```
+
+例如：
+
+```css
+<style>
+ /*选择器{属性:值；}*/
+ p {
+ color:#06C;
+ font-size:14px;
+ }
+ /*文字的颜色是 蓝色*/
+ h4 {
+ color:#900;
+ }
+ h1 {
+ color:#090;
+ font-size:16px;
+ }
+ body {
+ background:url(bg2.jpg);
+ }
+</style>
+```
+
+
+
+参考链接：
+
+https://www.runoob.com/css/css-tutorial.html
+
+https://www.w3school.com.cn/css/index.asp
+
+
+
+### 1.2.3 JS
+
+- JS (**J**ava**S**cript)是 Web 的编程语言，是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。同时也是一种广泛用于客户端Web开发的脚本语言，常常用来给HTML网页添加动态效果，从而实现人机交互的网页
+- 脚本语言不需要编译，在运行过程中由 js 解释器(js引擎)逐行来进行解释并执行
+
+
+
+#### 1.2.3.1 JS的组成
+
+<img src="https://gitee.com/theNeverLemon/news-img/raw/master/img/js1.png" alt="js1" style="zoom:60%;" />
+
+- **ECMAScript**： 是由ECMA 国际（ 原欧洲计算机制造商协会）进行标准化的一门编程语言，这种语言在万维网上应用广泛，它往往被称为 JavaScript或 JScript，但实际上后两者是 ECMAScript 语言的实现和扩展。
+- **DOM**：文档对象模型（DocumentObject Model，简称DOM），是W3C组织推荐的处理可扩展标记语言的标准编程接口。通过 DOM 提供的接口可以对页面上的各种元素进行操作（大小、位置、颜色等）
+- **BOM**：浏览器对象模型(Browser Object Model，简称BOM) 是指浏览器对象模型，它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等。
+
+
+
+#### 1.2.3.2 书写位置
+
+**1.行内式**
+
+```html
+<input type="button" value="点我试试" onclick="alert('Hello World')" />
+```
+
+- 可以将单行或少量 JS 代码写在HTML标签的事件属性中（以 on 开头的属性），如：onclick；
+- 可读性差， 在HTML中编写JS大量代码时，不方便阅读；
+- 引号易错，引号多层嵌套匹配时，非常容易弄混；
+
+**2.内嵌式**
+
+```html
+<script>
+ alert('Hello World~!');
+</script>
+```
+
+- 可以将多行JS代码写到 script 标签中
+
+**3.外部JS文件**
+
+```html
+<script src="myScript.js"></script>
+```
+
+```javascript
+//myScript.js文件内容
+function myFunction()
+{
+ document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
+}
+```
+
+- 利于HTML页面代码结构化，把大段 JS代码独立到 HTML 页面之外，既美观，也方便文件级别的复用
+- 引用外部 JS文件的 script 标签中间不可以写代码
+- 适合于JS 代码量比较大的情况
+
+
+
+参考链接：
+
+https://www.runoob.com/js/js-tutorial.html
+
+https://www.w3school.com.cn/js/index.asp
+
+
+
+---
+
+
+
+# 2. Vue简介
+
+ Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
+
+
+
+## 2.1 安装
+
+
+
+### 2.1.1 通过< script>标签引入
+
+直接下载并用 `<script>` 标签引入，`Vue` 会被注册为一个全局变量。
+
+- **开发版本**：https://cn.vuejs.org/js/vue.js
+
+- **生产版本**：https://cn.vuejs.org/js/vue.min.js
+
+
+
+### 2.1.2 通过CDN安装
+
+- **制作原型或学习**：
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
+```
+
+- **用于生产环境**：
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
+```
+
+- **使用原生 ES Modules**：
+
+```html
+<script type="module">
+ import Vue from 'https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.esm.browser.js'
+</script>
+```
+
+
+
+### 2.1.3 通过NPM安装
+
+ 在用 Vue 构建大型应用时推荐使用 NPM 安装。NPM 能很好地和诸如 webpack或 Browserify模块打包器配合使用。同时 Vue 也提供配套工具来开发单文件组件。
+
+ 由于 npm 安装速度慢，也可使用 cnpm安装，安装使用介绍参照：[使用淘宝 NPM 镜像](https://www.runoob.com/nodejs/nodejs-npm.html#taobaonpm)。
+
+
+
+1.npm 版本需要大于 3.0，如果低于此版本需要升级它：
+
+```shell
+# 查看版本
+$ npm -v
+2.3.0
+
+#升级 npm
+cnpm install npm -g
+
+# 升级或安装 cnpm
+npm install cnpm -g
+```
+
+2.安装vue
+
+```shell
+# 使用npm安装
+$ cnpm install vue
+
+# 使用cnpm安装
+$ cnpm install vue
+```
+
+
+
+## 2.2 创建一个Vue实例
+
+每个 Vue 应用都需要通过实例化 Vue 来实现。
+
+
+
+### 2.2.1 语法格式
+
+```javascript
+var vm = new Vue({
+ // 选项
+})
+```
+
+
+
+例如：
+
+```html
+<div id="example">
+ <h1>title : {{title}}</h1>
+ <h1>url : {{url}}</h1>
+</div>
+<script>
+ var vm = new Vue({
+ el: '#example',
+ data: {
+ title: "一个Vue实例",
+ url: "https://cn.vuejs.org/",
+ },
+ methods: {
+ details: function() {
+ return this.title + " ------";
+ }
+ }
+ })
+</script>
+```
+
+在 Vue 构造器中有一个el 参数，它是 DOM 元素中的 id。在上面实例中 id 为 example，这表示接下来的改动全部在以上指定的 div 内，div 外部不受影响。
+
+
+
+### 2.2.2定义数据对象
+
+在上述Vue实例中：
+
+- **data** ：定义属性，实例中有2个属性分别为：title、url。
+
+- **methods** ：定义的函数，可以通过 return 来返回函数值。
+
+- **{{ }}** ：输出对象属性和函数返回值。
+
+ 当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时，html 视图将也会产生相应的变化。
+
+
+
+例如：
+
+```html
+<div id="example">
+ <h1>data : {{num}}</h1>
+</div>
+<script>
+ // 数据对象
+ var data = {
+ num:1,
+ }
+ // 将对象加入到一个 Vue 实例中
+ var vm = new Vue({
+ el: '#examplet',
+ data: data
+ })
+
+ // 获得这个实例上的 property
+ // 返回源数据中对应的字段
+ vm.a == data.a // => true
+
+ // 设置 property 也会影响到原始数据
+ vm.a = 2
+ data.a // => 2
+</script>
+```
+
+ 除了数据 property，Vue 实例还暴露了一些有用的[实例property](https://cn.vuejs.org/v2/api/#%E5%AE%9E%E4%BE%8B-property) 与方法。它们都有前缀 `$`，以便与用户定义的 property 区分开来。
+
+
+
+例如：
+
+```html
+<div id="example">
+ <h1>title : {{title}}</h1>
+ <h1>url : {{url}}</h1>
+</div>
+<script>
+// 数据对象
+var data = {
+ title: "一个Vue实例",
+ url: "https://cn.vuejs.org/"
+}
+var vm = new Vue({
+ el: '#examplet',
+ data: data
+})
+
+document.write(vm.$data === data) // true
+document.write(vm.$el === document.getElementById('example')) // true
+</script>
+```
+
+
+
+## 2.3 Vue的生命周期
+
+ 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做**生命周期钩子**的函数，这给了用户在不同阶段添加自己的代码的机会。
+
+ 下图是一个Vue实例的生命周期：
+
+
+
+
+
+### 2.3.1 beforeCreate
+
+ 在实例初始化之后,进行数据侦听和事件/侦听器的配置之前同步调用。
+
+ 此时组件的选项对象还未创建，el 和 data 并未初始化，因此无法访问methods， data， computed等上的方法和数据。
+
+
+
+### 2.3.2 created
+
+ 在实例创建完成后被立即同步调用。
+
+ 实例已完成对选项的处理，以下内容已被配置完毕：数据侦听、计算属性、方法、事件/侦听器的回调函数。然而，挂载阶段还没开始，且 $el property 目前尚不可用。
+
+ 在这一步中可以调用methods中的方法，改变data中的数据，并且修改可以通过vue的响应式绑定体现在页面上，获取computed中的计算属性等等，通常我们可以在这里对实例进行预处理。但需要注意的是，这个周期中是没有什么方法来对实例化过程进行拦截的，因此假如有某些数据必须获取才允许进入页面的话，并不适合在这个方法发请求，建议在组件路由钩子beforeRouteEnter中完成
+
+
+
+### 2.3.3 beforeMount
+
+ 在挂载开始之前被调用：相关的 render 函数首次被调用（虚拟DOM）。
+
+ 实例已完成以下的配置： 编译模板，把data里面的数据和模板生成html，完成了el和data 初始化，但此时还没有挂在html到页面上。
+
+
+
+### 2.3.4 mounted
+
+ 实例被挂载后调用，这时 el 被新创建的 vm.$el 替换了。
+
+ 模板中的HTML渲染到HTML页面中，此时一般可以做一些ajax操作，**mounted只会执行一次**。
+
+ 但mounted 不会保证所有的子组件也都被挂载完成。如果希望等到整个视图都渲染完毕再执行某些操作，可以在 mounted 内部使用 vm.$nextTick：
+
+```javascript
+mounted: function () {
+ this.$nextTick(function () {
+ // 仅在整个视图都被渲染之后才会运行的代码
+ })
+}
+//生命周期钩子的 this 上下文指向调用它的 Vue 实例。
+```
+
+
+
+### 2.3.5 beforeUpdate
+
+ 在数据发生改变后，DOM 被更新之前被调用。
+
+ 适合在现有 DOM 将要被更新之前访问它，比如移除手动添加的事件监听器。可以在该钩子中进一步地更改状态，不会触发附加地重渲染过程.
+
+
+
+### 2.3.6 updated
+
+ 在数据更改导致的虚拟 DOM 重新渲染和更新完毕之后被调用。
+
+ 当这个钩子被调用时，组件 DOM 已经更新。，所以可以执行依赖于DOM的操作，然后在大多是情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环。
+
+ 但updated 不会保证所有的子组件也都被重新渲染完毕。如果希望等到整个视图都渲染完毕，可以在 updated 里使用 vm.$nextTick：
+
+```javascript
+updated: function () {
+ this.$nextTick(function () {
+ // 仅在整个视图都被重新渲染之后才会运行的代码
+ })
+}
+```
+
+
+
+### 2.3.7 beforeDestroy
+
+ 实例销毁之前调用。在这一步，实例仍然完全可用。
+
+ 这一步还可以用this来获取实例，一般用来做一些重置的操作，比如清除掉组件中的定时器和监听的dom事件。
+
+
+
+### 2.3.8 destroyed
+
+ 实例销毁后调用。该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。
+
+
+
+参考链接：
+
+https://vuejs.org/v2/guide/instance.html#Instance-Lifecycle-Hooks
+
+https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram
+
+https://vuejs.org/v2/api/index.html#Options-Lifecycle-Hooks
+
+https://www.jianshu.com/p/672e967e201c
+
+https://blog.csdn.net/haochangdi123/article/details/78358895
+
+
+
+## 2.4 创建一个Vue项目
+
+ Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供：
+
+- 通过 `@vue/cli` 实现的交互式的项目脚手架。
+- 通过 `@vue/cli` + `@vue/cli-service-global` 实现的零配置原型开发。
+- 一个运行时依赖 (`@vue/cli-service`)，该依赖：
+ - 可升级；
+ - 基于 webpack 构建，并带有合理的默认配置；
+ - 可以通过项目内的配置文件进行配置；
+ - 可以通过插件进行扩展。
+- 一个丰富的官方插件集合，集成了前端生态中最好的工具。
+- 一套完全图形化的创建和管理 Vue.js 项目的用户界面。
+
+ Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接。与此同时，它也为每个工具提供了调整配置的灵活性，无需 eject
+
+
+
+### 2.4.1 安装vue CLI
+
+ Vue CLI 的包名称由 `vue-cli` 改成了 `@vue/cli`。 如果已经全局安装了旧版本的 `vue-cli` (1.x 或 2.x)，需要先通过 `npm uninstall vue-cli -g` 或 `yarn global remove vue-cli` 卸载它。
+
+
+
+1.安装新的包
+
+```shell
+npm install -g @vue/cli
+
+# 或者
+yarn global add @vue/cli
+```
+
+2.检查其版本是否正确
+
+```shell
+vue --version
+```
+
+3.升级包
+
+```shell
+npm update -g @vue/cli
+
+# 或者
+yarn global upgrade --latest @vue/cli
+```
+
+
+
+### 2.4.2 创建Vue项目
+
+#### 2.4.2.1 通过 vue create创建
+
+```shell
+vue create hello-world
+```
+
+- **默认配置**：包含了基本的 Babel + ESLint 设置。适合快速创建一个新项目的原型。
+
+
+
+- **手动选择特性**：选取需要的特性。适合面向生产的项目。
+
+
+
+
+
+```shell
+# 进入项目具体路径
+cd hello-world
+
+# 下载依赖
+npm install
+
+# 启动运行项目
+npm run serve
+
+# 项目打包
+npm run build
+```
+
+
+
+#### 2.4.2.2 使用图形化界面创建
+
+```shell
+vue ui
+```
+
+ 打开一个浏览器窗口，并以图形化界面将你引导至项目创建的流程。
+
+
+
+#### 2.4.2.3 使用2.x 模板 (旧版本)创建
+
+```shell
+# 全局安装一个桥接工具
+npm install -g @vue/cli-init
+
+# `vue init` 的运行效果将会跟 `vue-cli@2.x` 相同
+vue init webpack vue_map_test
+```
+
+
+
+```shell
+# 进入项目具体路径
+cd vue_map_test
+
+# 下载依赖
+npm install
+
+# 启动运行项目，默认为8080端口
+npm run dev
+
+# 项目打包
+npm run build
+```
+
+
+
+### 2.4.3 Vue项目目录
+
+```
+├── v-proj
+| ├── node_modules // 当前项目所有依赖，一般不可以移植给其他电脑环境
+| ├── public
+| | ├── favicon.ico // 标签图标
+| | └── index.html // 当前项目唯一的页面
+| ├── src
+| | ├── assets // 静态资源img、css、js
+| | ├── components // 小组件
+| | ├── App.vue // 根组件
+| | ├── main.js // 全局脚本文件（项目的入口）
+| | └── router.js // 路由脚本文件
+| ├── README.md
+└ └── package.json //配置文件,使用npm install安装
+```
+
+
+
+#### 2.4.3.1 public
+
+ 可以理解为入口目录。
+
+
+
+##### 2.4.3.1.1 favicon.ico
+
+ 用于作为缩略的网站标志，它显示位于浏览器的地址栏或者在标签上，用于显示网站的logo。
+
+ ico图标制作网址：https://www.bitbug.net/
+
+
+
+##### 2.4.3.1.2 index.html
+
+ 首页入口文件，可以添加一些 meta 信息或统计代码。
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <meta http-equiv="X-UA-Compatible" content="ie=edge">
+ <title>Title
+
+
+
+
+
+
+
+```
+
+
+
+#### 2.4.3.2 src
+
+ 是整个项目的主文件夹 ，代码大部分都在这里完成。
+
+
+
+##### 2.4.3.2.1 assets
+
+ 放置一些资源文件。比如js 、css、image等。
+
+
+
+
+
+##### 2.4.3.2.2 components
+
+ 放置组件文件。一个vue项目就是由一个个的组件拼装起来的。
+
+
+
+例如：
+
+```html
+
+
+
+
+
+
+
+
+
+```
+
+- **** 有且只有一个根标签
+- **
+
+
+```
+
+
+
+##### 2.4.3.2.4 main.js
+
+ 是项目的主JS，全局的使用的各种变量、js、插件 都在这里引入 、定义。
+
+```js
+import Vue from 'vue'
+import App from './App.vue'
+import router from './router'
+
+Vue.config.productionTip = false
+
+new Vue({
+ router,
+ render: h => h(App)
+}).$mount('#app')
+```
+
+
+
+##### 2.4.3.2.5 router.js
+
+ 路由脚本文件（配置路由 url链接 与 页面组件的映射关系）
+
+```javascript
+// 导入VueRoute路由组件
+import VueRouter from 'vue-router'
+
+
+// 导入各个组件
+import homePage from "./components/homePage.vue";
+import test from "./components/test.vue";
+
+// 创建路由对象
+let routerObj = new VueRouter({
+ routes: [
+ {path: '/', component: homePage},
+ {path: '/test', component: test},
+ ],
+});
+
+// 把routerObj对象暴漏出去。main.js导入这个数据
+export default routerObj
+```
+
+
+
+#### 2.4.3.3 README.md
+
+ 项目的说明文档，markdown 格式
+
+~~~markdown
+## Project setup
+
+```
+npm install
+```
+
+### Compiles and hot-reloads for development
+
+```
+npm run serve
+```
+
+### Compiles and minifies for production
+
+```
+npm run build
+```
+
+### Lints and fixes files
+
+```
+npm run lint
+```
+
+### Customize configuration
+
+See [Configuration Reference](https://cli.vuejs.org/config/).
+~~~
+
+
+
+#### 2.4.3.4 package.json
+
+ 是整个项目用的到的所有的插件的json的格式，比如插件的名称、版本号。 当在项目里使用npm install 时 node 会自动安装文件里的所有插件。
+
+```javascript
+{
+ "name": "test",
+ "version": "0.1.0",
+ "private": true,
+ "scripts": {
+ "serve": "vue-cli-service serve",
+ "build": "vue-cli-service build",
+ "lint": "vue-cli-service lint"
+ },
+ "dependencies": {
+ "core-js": "^3.6.5",
+ "vue": "^3.0.0"
+ },
+ "devDependencies": {
+ "@vue/cli-plugin-babel": "~4.5.0",
+ "@vue/cli-plugin-eslint": "~4.5.0",
+ "@vue/cli-service": "~4.5.0",
+ "@vue/compiler-sfc": "^3.0.0",
+ "babel-eslint": "^10.1.0",
+ "eslint": "^6.7.2",
+ "eslint-plugin-vue": "^7.0.0"
+ },
+ "eslintConfig": {
+ "root": true,
+ "env": {
+ "node": true
+ },
+ "extends": [
+ "plugin:vue/vue3-essential",
+ "eslint:recommended"
+ ],
+ "parserOptions": {
+ "parser": "babel-eslint"
+ },
+ "rules": {}
+ },
+ "browserslist": [
+ "> 1%",
+ "last 2 versions",
+ "not dead"
+ ]
+}
+```
+
+
+
+参考链接：
+
+https://www.runoob.com/vue3/vue3-directory-structure.html
+
+https://blog.csdn.net/weixin_41887155/article/details/107648969
+
+https://www.cnblogs.com/jhpy/p/11873270.html
+
+https://blog.csdn.net/chao2458/article/details/81284522
+
+
+
+---
+
+
+
+# 3.基于Vue的移动端H5项目
+
+
+
+## 3.1 什么是H5
+
+ HTML5是第五代HTML的标准，可以说，H5是基于 HTML5 实现的，是当前互联网前端开发的主流语言。H5页面与普通web页面相比，最大的区别在于HTML5页面可以与不同大小的移动设备相匹配，支持市场上不同浏览器的兼容。移动网络和移动设备的快速发展，使得H5在移动设备上能够被更好的应用。
+
+
+
+H5页面有以下特点：
+
+- **具有移动端自适应能力**，H5页面会根据不同的手机屏幕尺寸进行适配，以达到不同屏幕的最佳显示效果。
+- **支持多媒体功能**，支持背景音乐，视频播放等多种多媒体功能。
+- **页面素材预加载**，为了保证整个页面的播放流畅，H5页面都搭配预加载功能，即用户点击之前就完成了页面的加载，保证阅读流畅性。
+- **支持滑动翻页**，每个页面内容单独成页。
+- **使用滚动侦测特效，**即滑动页面的同时，大量文字或图片会自动加载出来，造成一种动态美感。
+
+
+
+ 随着移动互联网的发展，智能手机、平板等移动终端设备的普及，用户在移动端浏览的时间越来越长，H5页面传播渠道广，流量大，传播效率高，传播成本低的优势，同时H5页面制作搭配页面滑动、简单的文字、动态的图片动画以及妙趣横生的音乐及视频，给浏览者带来深刻的浏览体验。
+
+
+
+参考链接：
+
+https://www.zhihu.com/question/438871843
+
+https://www.sohu.com/a/298484000_100273234
+
+https://www.zhihu.com/question/49397123/answer/1537150222
+
+
+
+## 3.2 使用Vue开发H5页面
+
+
+
+### 3.2.1 创建Vue项目
+
+```shell
+# vue create创建项目
+vue create test
+
+# 进入项目具体路径
+cd test
+
+# 下载依赖
+npm install
+
+# 启动运行项目
+npm run serve
+```
+
+
+
+
+
+### 3.2.2 自适应布局
+
+ 移动端的布局相对PC较为简单，关键在于对不同设备的适配。
+
+- 网易云的方案总结为：根据**屏幕大小 / 750 = 所求字体 / 基准字体大小**比值相等，动态调节html的font-size大小。
+
+- 淘宝的方案总结为：根据设备设备像素比设置scale的值，保持视口device-width始终等于设备物理像素，接着根据屏幕大小动态计算根字体大小，具体是将屏幕划分为10等分，每份为a，1rem就等于10a。
+
+
+
+这里主要用到两种单位:
+
+- **vw**: viewport width，相对于视口的宽度，1vw为视口宽度的1%，100vw为设备的宽度
+
+- **rem**: 相对于根元素html的字体大小的单位，比如2rem=2倍的根字体大小
+
+ rem的基本原理是根据屏幕不同的分辨率,动态修改根字体的大小,让所有的用rem单位的元素跟着屏幕尺寸一起缩放,从而达到自适应的效果。
+
+
+
+ 为了提高开发效率，可以使用px转化为rem的插件。如果使用sublimeText，推荐 [rem-unit](https://link.segmentfault.com/?enc=0sgWMyxWSTDHOuSMI2YbBg%3D%3D.mR80LuBqC9Ho0ZNWbXZEhp01D9Kd27sM86xiXK3KicUIV8Pq13VkvscpGYAkicjg)，如果使用vscode编辑器，推荐 [cssrem](https://link.segmentfault.com/?enc=%2FcW%2BwDnaeF7S4v0hrGtWFg%3D%3D.QSKZFTjOQHkymW%2BjEOLCM6eFl6%2FO8B6h%2Fq9hrAGijE15ve0%2FCMmhgbQS3Rvni85vQx3DIiFlNttgudMA45gMtb1rZDBJfgNlJ2xd1tCcYEI%3D)。
+
+
+
+ 在使用rem单位时需要注意以下几点：
+
+1. 在所有的单位中，font-size推荐使用px，然后结合媒体查询进行重要节点的控制，这样可以满足突出或者弱化某些字体的需求，而非整体调整。
+2. 众向的单位可以全部使用px，横向的使用rem，因为移动设备宽度有限，而高度可以无限向下滑动。但这也有特例，比如对于一些活动注册页面，需要在一屏幕内完全显示，没有下拉，这时候所有众向或者横向都应该使用rem作为单位。
+
+
+
+参考链接：
+
+https://juejin.cn/post/6844904013322944525
+
+https://segmentfault.com/a/1190000010030848
+
+
+
+### 3.2.3 路由配置
+
+
+
+#### 3.2.3.1 下载vue-router
+
+```shell
+npm install vue-router
+```
+
+
+
+#### 3.2.3.2 配置router.js
+
+```javascript
+//新建router.js文件
+
+import Vue from 'vue'
+import Router from 'vue-router'
+import HelloWorld from "@/components/HelloWorld"
+
+Vue.use(Router)
+
+export default new Router({
+ routes: [
+ {
+ path: "/",
+ component: HelloWorld
+ },
+ ]
+})
+```
+
+```javascript
+//main.js中引入router
+
+import Vue from 'vue'
+import App from './App.vue'
+import router from '../router'
+
+
+Vue.config.productionTip = false
+
+
+new Vue({
+ router,
+ render: h => h(App),
+}).$mount('#app')
+```
+
+
+
+参考链接：
+
+https://blog.csdn.net/ct5211314/article/details/120696182?utm_medium=distribute.pc_relevant.none-task-blog-2~default~baidujs_title~default-0.highlightwordscore&spm=1001.2101.3001.4242.1
+
+
+
+### 3.2.4 数据请求
+
+
+
+#### 3.2.4.1 安装axios
+
+[axios]: https://github.com/axios/axios
+
+```shell
+npm install axios
+```
+
+
+
+#### 3.2.4.2 封装axios实例
+
+ 在项目src目录下新建utils文件夹，然后在其中新建 request.js文件，这个文件是主要书写axios的封装过程。
+
+```javascript
+/**** request.js ****/
+// 导入axios
+import axios from 'axios'
+// 使用element-ui Message做消息提醒
+import { Message} from 'element-ui';
+//1. 创建新的axios实例，
+const service = axios.create({
+ // 公共接口--这里注意后面会讲
+ baseURL: process.env.BASE_API,
+ // 超时时间 单位是ms，这里设置了3s的超时时间
+ timeout: 3 * 1000
+})
+// 2.请求拦截器
+service.interceptors.request.use(config => {
+ //发请求前做的一些处理，数据转化，配置请求头，设置token,设置loading等，根据需求去添加
+ config.data = JSON.stringify(config.data); //数据转化,也可以使用qs转换
+ config.headers = {
+ 'Content-Type':'application/x-www-form-urlencoded' //配置请求头
+ }
+ //注意使用token的时候需要引入cookie方法或者用本地localStorage等方法，推荐js-cookie
+ const token = getCookie('名称');//这里取token之前，你肯定需要先拿到token,存一下
+ if(token){
+ config.params = {'token':token} //如果要求携带在参数中
+ config.headers.token= token; //如果要求携带在请求头中
+ }
+ return config
+}, error => {
+ Promise.reject(error)
+})
+
+// 3.响应拦截器
+service.interceptors.response.use(response => {
+ //接收到响应数据并成功后的一些共有的处理，关闭loading等
+
+ return response
+}, error => {
+ /***** 接收到异常响应的处理开始 *****/
+ if (error && error.response) {
+ // 1.公共错误处理
+ // 2.根据响应码具体处理
+ switch (error.response.status) {
+ case 400:
+ error.message = '错误请求'
+ break;
+ case 401:
+ error.message = '未授权，请重新登录'
+ break;
+ case 403:
+ error.message = '拒绝访问'
+ break;
+ case 404:
+ error.message = '请求错误,未找到该资源'
+ window.location.href = "/NotFound"
+ break;
+ case 405:
+ error.message = '请求方法未允许'
+ break;
+ case 408:
+ error.message = '请求超时'
+ break;
+ case 500:
+ error.message = '服务器端出错'
+ break;
+ case 501:
+ error.message = '网络未实现'
+ break;
+ case 502:
+ error.message = '网络错误'
+ break;
+ case 503:
+ error.message = '服务不可用'
+ break;
+ case 504:
+ error.message = '网络超时'
+ break;
+ case 505:
+ error.message = 'http版本不支持该请求'
+ break;
+ default:
+ error.message = `连接错误${error.response.status}`
+ }
+ } else {
+ // 超时处理
+ if (JSON.stringify(error).includes('timeout')) {
+ Message.error('服务器响应超时，请刷新当前页')
+ }
+ error.message = '连接服务器失败'
+ }
+
+ Message.error(error.message)
+ /***** 处理结束 *****/
+ //如果不需要错误处理，以上的处理过程都可省略
+ return Promise.resolve(error.response)
+})
+//4.导入文件
+export default service
+
+```
+
+
+
+#### 3.2.4.3 封装请求
+
+ 在项目src目录下的utils文件夹中新建 http.js文件，这个文件是主要书写几种请求的封装过程。
+
+```javascript
+/**** http.js ****/
+// 导入封装好的axios实例
+import request from './request'
+
+const http ={
+ /**
+ * methods: 请求
+ * @param url 请求地址
+ * @param params 请求参数
+ */
+ get(url,params){
+ const config = {
+ method: 'get',
+ url:url
+ }
+ if(params) config.params = params
+ return request(config)
+ },
+ post(url,params){
+ const config = {
+ method: 'post',
+ url:url
+ }
+ if(params) config.data = params
+ return request(config)
+ },
+ put(url,params){
+ const config = {
+ method: 'put',
+ url:url
+ }
+ if(params) config.params = params
+ return request(config)
+ },
+ delete(url,params){
+ const config = {
+ method: 'delete',
+ url:url
+ }
+ if(params) config.params = params
+ return request(config)
+ }
+}
+//导出
+export default http
+
+```
+
+
+
+#### 3.2.4.4 封装API
+
+ 在项目src目录下新建api文件夹，然后在其中新建 api.js文件，这个文件是主要书写API的封装过程。
+
+```javascript
+import http from '../utils/http'
+//
+/**
+ * @parms resquest 请求地址 例如：http://127.0.0.1:8088/request/...
+ * @param '/testIp'代表vue-cil中config，index.js中配置的代理
+ */
+let resquest = "/testIp/request/"
+
+// get请求
+export default{
+ getListAPI(params){
+ return http.get(`${resquest}/getList.json`,params)
+ },
+ postFormAPI(params){
+ return http.post(`${resquest}/postForm.json`,params)
+ }
+}
+
+```
+
+
+
+#### 3.2.4.3 使用Axios工具
+
+ 修改HelloWorld.vue文件
+
+```html
+
+ index page
+
+
+```
+
+
+
+### 3.2.5 UI组件库
+
+ UI 设计组件（UI KIT），直译过来就是用户界面成套元件，是界面设计常用控件或元件，「组」是设计元素的组合方式，「件」由不同的元件组成。
+
+
+组件有如下优势：
+
+- **保证一致性 Consistency**
+
+ 与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。
+
+- **反馈用户 Feedback**
+
+ 控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。
+
+- **提高效率，减少成本 Efficiency**
+
+ 简化流程：设计简洁直观的操作流程；清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。
+
+
+
+#### 3.2.5.1 Mint UI
+
+ **下载地址**：http://mint-ui.github.io/ / https://github.com/ElemeFE/mint-ui
+
+ 是饿了么开源的移动端UI组件库，基于vue.js的移动端UI框架，包含丰富的 CSS 和 JS 组件，能够满足日常的移动端开发需求。
+
+
+
+- Mint UI 包含丰富的 CSS 和 JS 组件，能够满足日常的移动端开发需要。
+- 可按需加载组件。可以只加载声明过的组件及其样式文件，无需再纠结文件体积过大。
+- 采用 CSS3 处理各种动效，避免浏览器进行不必要重绘和重排，使用户获得流畅顺滑的体验。
+- Mint UI 做到了轻量化。即使全部引入，压缩后的文件体积也仅有30kb。
+
+
+
+
+
+
+
+
+
+#### 3.2.5.2 Vant
+
+ **下载地址**：https://youzan.github.io/vant/ / https://github.com/youzan/vant
+
+ 是有赞前端团队基于有赞统一的规范实现的 Vue 组件库，提供了一整套 UI 基础组件和业务组件。
+
+
+
+- 60+ 高质量组件
+- 90% 单元测试覆盖率
+- 完善的中英文文档和示例
+- 支持按需引入
+- 支持主题定制
+- 支持国际化
+- 支持 TS
+- 支持 SSR
+
+
+
+)
+
+#### 3.2.5.3 Cube UI
+
+ **下载地址**：https://didi.github.io/cube-ui/ / https://github.com/didi/cube-ui
+
+ 滴滴团队开发的基于 Vue.js 实现的精致移动端组件库。支持按需引入和后编译，轻量灵活；扩展性强，可以方便地基于现有组件实现二次开发。
+
+
+
+- 质量可靠：由滴滴内部组件库精简提炼而来，为集成提供保障。
+- 体验极致：以迅速响应、动画流畅、接近原生为目标，在交互体验方面追求极致。
+- 标准规范：遵循统一的设计交互标准，高度还原设计效果。
+- 扩展性强：支持按需引入，轻量灵活；扩展性强，可以方便地实现二次开发。
+
+
+
+
+
+
+
+#### 3.2.5.4 Muse UI
+
+ **下载地址**：https://muse-ui.org/ / https://github.com/museui/muse-ui
+
+ 基于 Vue 2.0 优雅的 Material Design UI 组件库，基本实现 Material Design 设计规范类的所有组件，另外还开发许多新的功能特性。
+
+
+
+- 组件丰富：拥有40多个UI 组件，用于适应不同业务环境。
+- 可定制化：自定义主题方式极为优雅，仅需少量代码即可完成主题样式替换。
+- 基于vue2.x：Muse UI 基于 Vue2.0 开发，小巧，api友好，可用于开发的复杂单页应用。
+
+
+
+
+
+
+
+#### 3.2.5.5 NutUI
+
+ **下载地址**：http://nutui.jd.com/ / https://github.com/jdf2e/nutui
+
+ 京东自研的轻量级移动端Vue组件库，有近50多个组件。开发和服务于移动Web界面的企业级前中后台产品。
+
+
+
+- 50+ 高质量组件
+- 40+ 京东移动端项目正在使用
+- 基于京东APP 7.0 视觉规范
+- 支持按需加载详尽的文档和示例
+- 支持定制主题支持多语言（国际化）
+- 支持 TypeScript
+- 支持服务端渲染（Vue SSR）
+- 单元测试加持
+- 配套有基于Webpack的构建工具，可快速创建已内置本组件库的Vue工程
+
+
+
+