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

标签：npm Vue task4 js vue https 组件 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.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/

【新闻推荐系统】(task4)Vue基础与实战（更新ing）_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安装

制作原型或学习：

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

用于生产环境：

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

使用原生 ES Modules：

<script type="module">
  import Vue from 'https://cdn.jsdelivr.net/npm/[email protected]/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

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

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

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

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

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

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

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

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实例的生命周期：

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

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

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

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

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

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

# 下载依赖
npm install

# 启动运行项目
npm run serve 

# 项目打包
npm run build

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

vue ui

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

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

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

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

# `vue init` 的运行效果将会跟 `[email protected]` 相同
vue init webpack vue_map_test

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

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

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

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

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

（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

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

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作为单位。

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。

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

（2）Vant

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

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

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

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

)

（3）Cube UI

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

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

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

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

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

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

（5）NutUI

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

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

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

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

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

D:\vue>cd VueDemo

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

[1/3] scripts.postinstall [email protected] › ejs@^2.5.7 finished in 99ms
[2/3] scripts.postinstall [email protected] › uglifyjs-webpack-plugin@^0.4.6 run "node lib/post_install.js", root: "D:\\vue\\VueDemo\\node_modules\\[email protected]@uglifyjs-webpack-plugin"
[2/3] scripts.postinstall [email protected] › uglifyjs-webpack-plugin@^0.4.6 finished in 90ms
[3/3] scripts.postinstall [email protected] › [email protected] › core-js@^2.5.0 run "node -e \"try{require('./postinstall')}catch(e){}\"", root: "D:\\vue\\VueDemo\\node_modules\\[email protected]@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 [email protected] › [email protected] › 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 [email protected] › browserslist@^2.11.3 Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
deprecate [email protected] › uglify-es@^3.3.4 support for ECMAScript is superseded by `uglify-js` as of v3.13.0
deprecate [email protected] › chokidar@^2.1.2 Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
deprecate [email protected] › [email protected] › flatten@^1.0.2 flatten is deprecated in favor of utility frameworks such as lodash.
deprecate [email protected] › [email protected] › [email protected] › browserslist@^1.5.2 Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
deprecate [email protected] › bfj-node4@^5.2.0 Switch to the `bfj` package for fixes and new features!
deprecate [email protected] › [email protected] › 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 [email protected] › [email protected] › [email protected] › [email protected] › [email protected] › urix@^0.1.0 Please see https://github.com/lydell/urix#deprecated
deprecate [email protected] › [email protected] › [email protected] › svgo@^0.7.0 This SVGO version is no longer supported. Upgrade to v2.x.x.
deprecate [email protected] › [email protected] › [email protected] › [email protected] › [email protected] › resolve-url@^0.2.1 https://github.com/lydell/resolve-url#deprecated
deprecate [email protected] › [email protected] › [email protected] › [email protected] › svgo@^1.0.0 This SVGO version is no longer supported. Upgrade to v2.x.x.
deprecate [email protected] › [email protected] › [email protected] › [email protected] The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
deprecate [email protected] › [email protected] › 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:
    → [email protected] › [email protected] › 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

> [email protected] 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

标签：npm,Vue,task4,js,vue,https,组件,ing
From： https://blog.51cto.com/u_15717393/5979879