【新闻推荐系统】(task4)Vue基础与实战（更新ing）

学习总结

文章目录

• ​​学习总结​​
• ​​二、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项目​​

• ​​（1）通过 vue create创建​​
• ​​（2）使用图形化界面创建​​
• ​​（3）使用2.x 模板 (旧版本)创建​​

• ​​2.4.3 Vue项目目录​​

• ​​2.4.3.1 public​​

• ​​（1）favicon.ico​​
• ​​（2）index.html​​

• ​​2.4.3.2 src​​

• ​​（1）assets​​
• ​​（2）components​​
• ​​（3）App.vue​​
• ​​（4）main.js​​
• ​​（5）router.js​​

• ​​2.4.3.3 README.md​​
• ​​2.4.3.4 package.json​​

• ​​三、基于Vue的移动端H5项目​​

• ​​3.1 H5的介绍​​
• ​​3.2 使用Vue开发H5页面​​

• ​​3.2.1 创建Vue项目​​
• ​​3.2.2 自适应布局​​
• ​​3.2.3 路由配置​​

• ​​（1）下载vue-router​​
• ​​（2）配置router.js​​

• ​​3.2.4 数据请求​​

• ​​（1）安装axios​​
• ​​（2）封装axios实例​​
• ​​（3）封装请求​​
• ​​（4）封装API​​
• ​​（5）使用Axios工具​​

• ​​3.2.5 UI组件库​​

• ​​（1）Mint UI​​
• ​​（2）Vant​​
• ​​（3）Cube UI​​
• ​​（4）Muse UI​​
• ​​（5）NutUI​​

• ​​Reference​​

二、Vue简介

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

（1）首先要下载node.js开始，安装时默认加入环境变量。

node.js官网下载地址：https://nodejs.org/en/

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安装

• 制作原型或学习：

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

• 用于生产环境：

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>

• 使用原生 ES Modules：

<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安装

使用之前，我们先来了解3个东西的作用。

（1）npm: Nodejs下的包管理器。

推荐使用：taobao NPM镜像源下载比较快 命令：​​npm install -g cnpm --registry=https://registry.npm.taobao.org​​

（2）webpack: 它主要的用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备，比如资源的合并和打包。

（3）vue-cli: 用户生成Vue工程模板。（帮你快速开始一个vue的项目，也就是给你一套vue的结构，包含基础的依赖库，只需要 npm install就可以安装）

不过这个版本有点老，我就卸载然后装新的（新版本换名字了）：

npm uninstall vue-cli -g
npm install -g @vue/cli

​ 在用 Vue 构建大型应用时推荐使用 NPM 安装。NPM 能很好地和诸如 webpack或 Browserify模块打包器配合使用。同时 Vue 也提供配套工具来开发单文件组件。由于 npm 安装速度慢，也可使用 cnpm安装，安装使用介绍参照：​​使用淘宝 NPM 镜像​​。

1.npm 版本需要大于 3.0，如果低于此版本需要升级它：

# 查看版本
$ npm -v
2.3.0

#升级 npm
cnpm install npm -g

# 升级或安装 cnpm
npm install cnpm -g

2.安装vue

# 使用npm安装
$ cnpm install vue

# 使用cnpm安装
$ cnpm install vue

2.2 创建一个Vue实例

每个 Vue 应用都需要通过实例化 Vue 来实现。

2.2.1 语法格式

var vm = new Vue({
  // 选项
})

例如：

<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 外部不受影响。

DOM是文档对象模型（Document Object Model）的缩写。 是 W3C（万维网联盟）的标准。是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容。

2.2.2定义数据对象

在上述Vue实例中：

• data ：定义属性，实例中有2个属性分别为：title、url。
• methods ：定义的函数，可以通过 return 来返回函数值。
• {{ }} ：输出对象属性和函数返回值。

当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时，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 区分开来。

例如：

<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：

mounted: function () {
  this.$nextTick(function () {
    // 仅在整个视图都被渲染之后才会运行的代码
  })
}
//生命周期钩子的 this 上下文指向调用它的 Vue 实例。

2.3.5 beforeUpdate

在数据发生改变后，DOM 被更新之前被调用。

适合在现有 DOM 将要被更新之前访问它，比如移除手动添加的事件监听器。可以在该钩子中进一步地更改状态，不会触发附加地重渲染过程.

2.3.6 updated

在数据更改导致的虚拟 DOM 重新渲染和更新完毕之后被调用。

当这个钩子被调用时，组件 DOM 已经更新。，所以可以执行依赖于DOM的操作，然后在大多是情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环。

但updated 不会保证所有的子组件也都被重新渲染完毕。如果希望等到整个视图都渲染完毕，可以在 updated 里使用 vm.$nextTick：

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

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.安装新的包

npm install -g @vue/cli

# 或者
yarn global add @vue/cli

2.检查其版本是否正确

vue --version

3.升级包

npm update -g @vue/cli

# 或者
yarn global upgrade --latest @vue/cli

2.4.2 创建Vue项目

（1）通过 vue create创建

vue create hello-world

• 默认配置：包含了基本的 Babel + ESLint 设置。适合快速创建一个新项目的原型。

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

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

# 下载依赖
npm install

# 启动运行项目
npm run serve 

# 项目打包
npm run build

（2）使用图形化界面创建

vue ui

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

（3）使用2.x 模板 (旧版本)创建

# 全局安装一个桥接工具
npm install -g @vue/cli-init

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

# 进入项目具体路径
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

可以理解为入口目录。

（1）favicon.ico

用于作为缩略的网站标志，它显示位于浏览器的地址栏或者在标签上，用于显示网站的logo。

ico图标制作网址：https://www.bitbug.net/

（2）index.html

首页入口文件，可以添加一些 meta 信息或统计代码。

<!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

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

（1）assets

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

（2）components

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

例如：

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

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

<style scoped>

</style>

• ​ 有且只有一个根标签
• 
  

（3）App.vue

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

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

（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')

（5）router.js

路由脚本文件（配置路由 url链接 与 页面组件的映射关系）

// 导入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 格式

## 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 会自动安装文件里的所有插件。

{
  "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​​​

三、基于Vue的移动端H5项目

3.1 H5的介绍

第五代HTML标准HTML5，当前前端开发的主流语言H5就是基于HTML5实现，H5的优势有：

• 具有移动端自适应能力，H5页面会根据不同的手机屏幕尺寸进行适配，以达到不同屏幕的最佳显示效果。H5和普通web页面相比，最大区别是可以与不同大小的移动设备相匹配，兼容不同的浏览器
• 支持多媒体功能，支持背景音乐，视频播放等多种多媒体功能。
• 页面素材预加载，为了保证整个页面的播放流畅，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项目

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

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

1. 在所有的单位中，font-size推荐使用px，然后结合媒体查询进行重要节点的控制，这样可以满足突出或者弱化某些字体的需求，而非整体调整。
2. 众向的单位可以全部使用px，横向的使用rem，因为移动设备宽度有限，而高度可以无限向下滑动。但这也有特例，比如对于一些活动注册页面，需要在一屏幕内完全显示，没有下拉，这时候所有众向或者横向都应该使用rem作为单位。

3.2.3 路由配置

（1）下载vue-router

npm install vue-router

（2）配置router.js

//新建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
        },
    ]
})

//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')

3.2.4 数据请求

（1）安装axios

npm install axios

（2）封装axios实例

在项目src目录下新建utils文件夹，然后在其中新建 request.js文件，这个文件是主要书写axios的封装过程。

/****   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）封装请求

在项目src目录下的utils文件夹中新建 http.js文件，这个文件是主要书写几种请求的封装过程。

/****   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

（4）封装API

在项目src目录下新建api文件夹，然后在其中新建 api.js文件，这个文件是主要书写API的封装过程。

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)
    }
}

（5）使用Axios工具

修改HelloWorld.vue文件

<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

简化流程：设计简洁直观的操作流程；清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。

（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。

（2）Vant

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

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

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

)

（3）Cube UI

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

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

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

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

（5）NutUI

下载地址：http://nutui.jd.com/ / https://github.com/jdf2e/nutui

京东自研的轻量级移动端Vue组件库，有近50多个组件。开发和服务于移动Web界面的企业级前中后台产品。

• 50+ 高质量组件
• 40+ 京东移动端项目正在使用
• 基于京东APP 7.0 视觉规范
• 支持按需加载详尽的文档和示例
• 支持定制主题支持多语言（国际化）
• 支持 TypeScript
• 支持服务端渲染（Vue SSR）
• 单元测试加持
• 配套有基于Webpack的构建工具，可快速创建已内置本组件库的Vue工程

贴一个创建vue项目的过程：

D:\vue>cd VueDemo

D:\vue\VueDemo>cnpm install
√ Installed 37 packages
√ Linked 801 latest versions
[1/3] scripts.postinstall webpack-bundle-analyzer@2.13.1 › ejs@^2.5.7 run "node ./postinstall.js", root: "D:\\vue\\VueDemo\\node_modules\\_ejs@2.7.4@ejs"
Thank you for installing EJS: built with the Jake JavaScript build tool (https://jakejs.com/)

[1/3] scripts.postinstall webpack-bundle-analyzer@2.13.1 › ejs@^2.5.7 finished in 99ms
[2/3] scripts.postinstall webpack@3.12.0 › uglifyjs-webpack-plugin@^0.4.6 run "node lib/post_install.js", root: "D:\\vue\\VueDemo\\node_modules\\_uglifyjs-webpack-plugin@0.4.6@uglifyjs-webpack-plugin"
[2/3] scripts.postinstall webpack@3.12.0 › uglifyjs-webpack-plugin@^0.4.6 finished in 90ms
[3/3] scripts.postinstall babel-core@6.26.3 › babel-register@6.26.0 › core-js@^2.5.0 run "node -e \"try{require('./postinstall')}catch(e){}\"", root: "D:\\vue\\VueDemo\\node_modules\\_core-js@2.6.12@core-js"
Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!

The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
> https://opencollective.com/core-js
> https://www.patreon.com/zloirock

Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)

[3/3] scripts.postinstall babel-core@6.26.3 › babel-register@6.26.0 › core-js@^2.5.0 finished in 95ms
√ Run 3 scripts
deprecate extract-text-webpack-plugin@^3.0.0 Deprecated. Please use https://github.com/webpack-contrib/mini-css-extract-plugin
deprecate html-webpack-plugin@^2.30.1 out of support
deprecate autoprefixer@7.2.6 › browserslist@^2.11.3 Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
deprecate uglifyjs-webpack-plugin@1.3.0 › uglify-es@^3.3.4 support for ECMAScript is superseded by `uglify-js` as of v3.13.0
deprecate webpack-dev-server@2.11.5 › chokidar@^2.1.2 Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
deprecate vue-loader@13.7.3 › postcss-selector-parser@2.2.3 › flatten@^1.0.2 flatten is deprecated in favor of utility frameworks such as lodash.
deprecate css-loader@0.28.11 › cssnano@3.10.0 › postcss-merge-rules@2.1.2 › browserslist@^1.5.2 Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
deprecate webpack-bundle-analyzer@2.13.1 › bfj-node4@^5.2.0 Switch to the `bfj` package for fixes and new features!
deprecate webpack-dev-server@2.11.5 › sockjs@0.3.19 › uuid@^3.0.1 Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
deprecate webpack-dev-server@2.11.5 › chokidar@2.1.8 › braces@2.3.2 › snapdragon@0.8.2 › source-map-resolve@0.5.3 › urix@^0.1.0 Please see https://github.com/lydell/urix#deprecated
deprecate css-loader@0.28.11 › cssnano@3.10.0 › postcss-svgo@2.1.6 › svgo@^0.7.0 This SVGO version is no longer supported. Upgrade to v2.x.x.
deprecate webpack-dev-server@2.11.5 › chokidar@2.1.8 › braces@2.3.2 › snapdragon@0.8.2 › source-map-resolve@0.5.3 › resolve-url@^0.2.1 https://github.com/lydell/resolve-url#deprecated
deprecate optimize-css-assets-webpack-plugin@3.2.1 › cssnano@4.1.11 › cssnano-preset-default@4.0.8 › postcss-svgo@4.0.3 › svgo@^1.0.0 This SVGO version is no longer supported. Upgrade to v2.x.x.
deprecate webpack@3.12.0 › node-libs-browser@2.2.1 › url@0.11.0 › querystring@0.2.0 The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
deprecate babel-core@6.26.3 › babel-register@6.26.0 › core-js@^2.5.0 core-js@<3.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Please, upgrade your dependencies to the actual version of core-js.
Recently updated (since 2021-12-16): 6 packages (detail see file D:\vue\VueDemo\node_modules\.recently_updates.txt)
  Today:
    → babel-preset-env@1.7.0 › browserslist@3.2.8 › electron-to-chromium@^1.3.47(1.4.27) (03:02:33)
√ All packages installed (950 packages installed from npm registry, used 43s(network 43s), speed 511.23KB/s, json 802(2.58MB), tarball 18.75MB)

D:\vue\VueDemo>cnpm run dev

> my_vue_demo@1.0.0 dev D:\vue\VueDemo
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

(node:13900) [DEP0111] DeprecationWarning: Access to process.binding('http_parser') is deprecated.
(Use `node --trace-deprecation ...` to show where the warning was created)
 13% building modules 33/37 modules 4 active ...VueDemo\src\components\HelloWorld.vue{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.
 95% emitting

 DONE  Compiled successfully in 2547ms                                                                              下午5:02:58

 I  Your application is running here: http://localhost:8080

Reference

（1）https://nodejs.org/en/
（2）​​windows下npm安装vue​​ （3）如何安装vue.js以及创建第一个vue项目
（4）彻底理解并解决 ‘webpack’ 不是内部或外部命令，也不是可运行的程序或批处理文件
（5）vue.js 三种方式安装–npm安装(node.js安装)
（6）vue官方文档：https://cn.vuejs.org/
（7）NPM安装Vue及配置
（8）‘webpack’ 不是内部或外部命令解决办法以及npm配置
（9）前端知识之–DOM
（10）​​​黑马程序员vue前端基础教程-4个小时带你快速入门vue​​

（11）​​【狂神说Java】Vue最新快速上手教程通俗易懂​​

（12）https://learning.dcloud.io/#/?vid=2