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 指的是超文本标记语言 (Hyper Text Markup Language)是用来描述网页的一种语言。
HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)

1.2.1.1 超文本的含义

超越文本限制：可以加入图片、声音、动画、多媒体等内容
超级链接文本：可以从一个文件跳转到另一个文件，与世界各地主机的文件连接。

1.2.1.2 语法骨架格式

html

<!DOCTYPE html>
<html>   
    <head>
        <meta charset="utf-8">
        <title>我的第一个页面</title>
    </head>
    <body>
        <h1>一个一级标题</h1>
		<p>一个段落。</p>
    </body>
</html>

<!DOCTYPE html> 声明为 HTML5 文档
<html> 元素是 HTML 页面的根元素
<head> 元素包含了文档的元（meta）数据
- <meta charset="utf-8"> 定义网页编码格式
- <title> 元素描述了文档的标题
<body> 元素包含了可见的页面内容
- <h1> 元素定义一个标题
- <p> 元素定义一个段落

html

参考链接：

https://www.runoob.com/html/html-tutorial.html

https://www.w3school.com.cn/html/index.asp

1.2.2 CSS

CSS(Cascading Style Sheets) ，通常称为CSS样式表或层叠样式表（级联样式表）
CSS主要用于设置 HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。
CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。

1.2.2.1 CSS 规则

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 (JavaScript)是 Web 的编程语言，是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。同时也是一种广泛用于客户端Web开发的脚本语言，常常用来给HTML网页添加动态效果，从而实现人机交互的网页
脚本语言不需要编译，在运行过程中由 js 解释器(js引擎)逐行来进行解释并执行

1.2.3.1 JS的组成

ECMAScript：是由ECMA 国际（原欧洲计算机制造商协会）进行标准化的一门编程语言，这种语言在万维网上应用广泛，它往往被称为 JavaScript或 JScript，但实际上后两者是 ECMAScript 语言的实现和扩展。
DOM：文档对象模型（Document Object 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 镜像。

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 与方法。它们都有前缀 $，以便与用户定义的 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实例的生命周期：

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 设置。适合快速创建一个新项目的原型。

cli-new-project

手动选择特性：选取需要的特性。适合面向生产的项目。

cli-select-features

shell

# 进入项目具体路径
cd hello-world

# 下载依赖
npm install

# 启动运行项目
npm run serve 

# 项目打包
npm run build

2.4.2.2 使用图形化界面创建

shell

vue ui

打开一个浏览器窗口，并以图形化界面将你引导至项目创建的流程。

ui-new-project

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

init-vue

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</title>
</head>
<body style="background-color: #fff;">
    <div id="app" >

    </div>
</body>
</html>

2.4.3.2 src

是整个项目的主文件夹，代码大部分都在这里完成。

2.4.3.2.1 assets

放置一些资源文件。比如js 、css、image等。

assets

2.4.3.2.2 components

放置组件文件。一个vue项目就是由一个个的组件拼装起来的。

例如：

html

<template>
    <div class="test">
        
    </div>
</template>

<script>
    export default {
        name: "Test"
    }
</script>

<style scoped>

</style>

<template> 有且只有一个根标签
<script> 必须将组件对象导出 export default {}
<style> 标签明确scoped属性，代表该样式只在组件内部起作用(样式的组件化)

2.4.3.2.3 App.vue

是整个项目的入口文件，相当于包裹整个页面的最外层的div。

html

<template>
  <div id="app">
      
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
  components:{
   
  },
}
</script>

<style>
  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
  }

</style>

2.4.3.2.4 main.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

vue-h5

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，如果使用vscode编辑器，推荐 cssrem。

在使用rem单位时需要注意以下几点：

在所有的单位中，font-size推荐使用px，然后结合媒体查询进行重要节点的控制，这样可以满足突出或者弱化某些字体的需求，而非整体调整。
众向的单位可以全部使用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

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

<template>
    <div>index page</div>
</template>
<script>
    import api from '@/api/api'
    export default {
        methods: {
         getList() {
            api.getListAPI(data).then(res => {
              //数据处理
            }).catch(err => console.log(err))
          }
        }  
    }
</script>

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。

mintui

3.2.5.2 Vant

下载地址：https://youzan.github.io/vant/ / https://github.com/youzan/vant

是有赞前端团队基于有赞统一的规范实现的 Vue 组件库，提供了一整套 UI 基础组件和业务组件。

60+ 高质量组件
90% 单元测试覆盖率
完善的中英文文档和示例
支持按需引入
支持主题定制
支持国际化
支持 TS
支持 SSR

vant )

3.2.5.3 Cube UI

下载地址：https://didi.github.io/cube-ui/ / https://github.com/didi/cube-ui

滴滴团队开发的基于 Vue.js 实现的精致移动端组件库。支持按需引入和后编译，轻量灵活；扩展性强，可以方便地基于现有组件实现二次开发。

质量可靠：由滴滴内部组件库精简提炼而来，为集成提供保障。
体验极致：以迅速响应、动画流畅、接近原生为目标，在交互体验方面追求极致。
标准规范：遵循统一的设计交互标准，高度还原设计效果。
扩展性强：支持按需引入，轻量灵活；扩展性强，可以方便地实现二次开发。

cubeui

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友好，可用于开发的复杂单页应用。

museui

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工程

nutui

1.Web前端 ​

1.1 什么是Web ​

1.2 Web 标准构成 ​

1.2.1 HTML ​

1.2.1.1 超文本的含义 ​

1.2.1.2 语法骨架格式 ​

1.2.2 CSS ​

1.2.2.1 CSS 规则 ​

1.2.2.2 语法格式 ​

1.2.3 JS ​

1.2.3.1 JS的组成 ​

1.2.3.2 书写位置 ​

2. Vue简介 ​

2.1 安装 ​

2.1.1 通过< script>标签引入 ​

2.1.2 通过CDN安装 ​

2.1.3 通过NPM安装 ​

2.2 创建一个Vue实例 ​

2.2.1 语法格式 ​

2.2.2定义数据对象 ​

2.3 Vue的生命周期 ​

2.3.1 beforeCreate ​

2.3.2 created ​

2.3.3 beforeMount ​

2.3.4 mounted ​

2.3.5 beforeUpdate ​

2.3.6 updated ​

2.3.7 beforeDestroy ​

2.3.8 destroyed ​

2.4 创建一个Vue项目 ​

2.4.1 安装vue CLI ​

2.4.2 创建Vue项目 ​

2.4.2.1 通过 vue create创建 ​

2.4.2.2 使用图形化界面创建 ​

2.4.2.3 使用2.x 模板 (旧版本)创建 ​

2.4.3 Vue项目目录 ​

2.4.3.1 public ​

2.4.3.1.1 favicon.ico ​

2.4.3.1.2 index.html ​

2.4.3.2 src ​

2.4.3.2.1 assets ​

2.4.3.2.2 components ​

2.4.3.2.3 App.vue ​

2.4.3.2.4 main.js ​

2.4.3.2.5 router.js ​

2.4.3.3 README.md ​

2.4.3.4 package.json ​

3.基于Vue的移动端H5项目 ​

3.1 什么是H5 ​

3.2 使用Vue开发H5页面 ​

3.2.1 创建Vue项目 ​

3.2.2 自适应布局 ​

3.2.3 路由配置 ​

3.2.3.1 下载vue-router ​

3.2.3.2 配置router.js ​

3.2.4 数据请求 ​

3.2.4.1 安装axios ​

3.2.4.2 封装axios实例 ​

3.2.4.3 封装请求 ​

3.2.4.4 封装API ​

3.2.4.3 使用Axios工具 ​

3.2.5 UI组件库 ​

3.2.5.1 Mint UI ​

3.2.5.2 Vant ​

3.2.5.3 Cube UI ​

3.2.5.4 Muse UI ​

3.2.5.5 NutUI ​

1.Web前端

1.1 什么是Web

1.2 Web 标准构成

1.2.1 HTML

1.2.1.1 超文本的含义

1.2.1.2 语法骨架格式

1.2.2 CSS

1.2.2.1 CSS 规则

1.2.2.2 语法格式

1.2.3 JS

1.2.3.1 JS的组成

1.2.3.2 书写位置

2. Vue简介

2.1 安装

2.1.1 通过< script>标签引入

2.1.2 通过CDN安装

2.1.3 通过NPM安装

2.2 创建一个Vue实例

2.2.1 语法格式

2.2.2定义数据对象

2.3 Vue的生命周期

2.3.1 beforeCreate

2.3.2 created

2.3.3 beforeMount

2.3.4 mounted

2.3.5 beforeUpdate

2.3.6 updated

2.3.7 beforeDestroy

2.3.8 destroyed

2.4 创建一个Vue项目

2.4.1 安装vue CLI

2.4.2 创建Vue项目

2.4.2.1 通过 vue create创建

2.4.2.2 使用图形化界面创建

2.4.2.3 使用2.x 模板 (旧版本)创建

2.4.3 Vue项目目录

2.4.3.1 public

2.4.3.1.1 favicon.ico

2.4.3.1.2 index.html

2.4.3.2 src

2.4.3.2.1 assets

2.4.3.2.2 components

2.4.3.2.3 App.vue

2.4.3.2.4 main.js

2.4.3.2.5 router.js

2.4.3.3 README.md

2.4.3.4 package.json

3.基于Vue的移动端H5项目

3.1 什么是H5

3.2 使用Vue开发H5页面

3.2.1 创建Vue项目

3.2.2 自适应布局

3.2.3 路由配置

3.2.3.1 下载vue-router

3.2.3.2 配置router.js

3.2.4 数据请求

3.2.4.1 安装axios

3.2.4.2 封装axios实例

3.2.4.3 封装请求

3.2.4.4 封装API

3.2.4.3 使用Axios工具

3.2.5 UI组件库

3.2.5.1 Mint UI

3.2.5.2 Vant

3.2.5.3 Cube UI

3.2.5.4 Muse UI

3.2.5.5 NutUI