UI组件库笔记

对于UI库需要了解它们是基于Vue还是React实现。

移动端常用的UI组件库

1. Vant https://vant-contrib.gitee.io/vant/v2/#/zh-CN/home
2. Cube UI https://didi.github.io/cube-ui/#/zh-CN/docs/introduction
3. Mint UI https://mint-ui.github.io/#!/zh-cn

这里以vant组件库为例子介绍基本使用方法。
根据自己Vue版本安装对应的vant版本

# Vue 3 项目，安装最新版 Vant：
npm i vant -S

# Vue 2 项目，安装 Vant 2：
npm i vant@latest-v2 -S

可以根据需求采用按需导入还是全部导入，这里以全部导入为例，虽然这样子会导致体积很大，但是在打包发布的时候有办法将体积减少。

import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';

Vue.use(Vant);

在每一个栏目的底部都有对应的API可以使用，如下，在组件标签上添加上route即可开启路由模式

其次这些UI组件标签可以相互嵌套使用，实现不同的效果，通常都是配合反馈组件使用
以下就是实现一个页面下拉刷新和列表滚动底部自动获取新数据的效果

    <van-pull-refresh v-model="isLoading" :disable="finished" @refresh="onRefresh">
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" >
        <ArticleInfoVue v-for="item in articleList" :key="item.art_id" :title="item.title"
          :com-count="item.comm_count"
          :pubdate="item.pubdate"
          :name="item.aut_name"
          :cover="item.cover"
        ></ArticleInfoVue>
      </van-list>
    </van-pull-refresh>

同时组件库也可以自定义主题使用，这样子的好处是所有用到该组件标签的地方样式都会改变。
修改样式的方法有如下

1. 直接使用组件标签，在打开的页面中，使用鼠标获取当前样式，查看是哪一个样式添加的效果，可以在页面中重新添加样式层叠掉。
   ，
2. 也可以安装vant官方的做法来修改，首先需要了解vant官方采用less变量才修饰样式，所以需要引入less后缀的文件样式，其次需要在vue.config.js配置文件中添加如下代码
   *：方法一，在配置文件中直接对想修改的样式直接进行覆盖。但是这种方法每次都是修改配置文件，所以每次修改都需要重新启动项目，过于麻烦
   *：方法二：单独创建一个less后缀的文件，主要用于存放自定义主题样式。同时需要了解，vue2打包发布基于webpack，而webpack基于node.js，可以使用node.js的核心模块，使用其path模块获取绝对路径拼接，并放入下面代码中导入

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      less: {
        // 若 less-loader 版本小于 6.0，请移除 lessOptions 这一级，直接配置选项。
        lessOptions: {
          modifyVars: {
            //方法一：
            // 直接覆盖变量
            'text-color': '#111',
            'border-color': '#eee',
            
             //方法二：
            // 或者可以通过 less 文件覆盖（文件路径为绝对路径）
            hack: `true; @import "your-less-file-path.less";`,
          },
        },
      },
    },
  },
};

在项目打包发布阶段，由于vue中publicPath默认是/，所以打开的是绝对路径，如https://www.my-app.com/。这样子想打开一个打包好的产品就必须放在服务器上才能启动。这个值也可以被设置为空字符串 (‘’) 或是相对路径 (‘./’)，这样所有的资源都会被链接为相对路径，这样打出来的包可以被部署在任意路径就可以不在部署服务器的情况下打开。

PC端常用的UI组件库

1. Element UI https://element.eleme.cn/#/zh-CN
2. IView UI https://iview.github.io/

全局引入element-ui，缺点：文件体积大，将不用的组件全部引入

// 引入element-ui组件库
import ElementUI from 'element-ui'
// 引入全局样式
import 'element-ui/lib/theme-chalk/index.css';
// 使用插件
Vue.use(ElementUI)

按需引入element-ui

按需引入第一步

//-D表示将包安装为开发依赖项（devDependencies）。开发依赖项是指在开发过程中需要使用的包，但不会在生产环境中使用。
npm install babel-plugin-component -D

配置babel.config.js文件，（文档中为显示为babelrc），在vue-cli生成的bable文件中追加，不能删除原有内容。

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset',
    ["@babel/preset-env", { "modules": false }]
  ],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

按需引入组件，并注册，可以使用自定义的组件标签名，也可以使用默认的标签名

import { Button, Select } from 'element-ui';
/* 组件标签名即组件定义 */
Vue.component('mybutton', Button);
Vue.component('myselect', Select);

扩展UI库了解

https://uiverse.io/all