UI组件的定义和引用

一、UI组件的定义
1.在xml中定义界面元素
   在android中通过xml标记就可以定义该标记对应的视图类或者子类。

例如：xml中的<Button>，标记，就可以对应一个按钮实例，而这个对应过程可以由android软件自动完成，这样就实现了xml与java代码具有等同的效果。

这种直接通过xml标记定义界面组件的机制，实现了界面代码与逻辑代码分开的效果。

2.在java代码中定义界面元素
   这种方式比较常见，即在代码中通过new语句初始化一个类实例，然后设置其属性，调用其方法（老师上课时就用的时此种方法定义元素）
 

UI组件的引入

Vant 的引入及使用

安装

• 新的脚手架引入 vant 很简单，我们先安装一下：

$ npm install vant --save

• 因为我们的项目中本来是使用sass来作为 css 的一个预编译器的，但是 vant 是用的less语法，所以我们还需要安装下less，不然会报错。

$ npm isntall less less-loader --save-dev

按需引入

• 配置安装参考官网的教程就可以了。

• 我们就按照教程的来，在我们的babel.config.js中配置一下：

module.exports = {
  presets: ["@vue/cli-plugin-babel/preset"],
  // vant引入：
  plugins: [
    [
      "import",
      {
        libraryName: "vant",
        libraryDirectory: "es",
        style: true,
      },
      "vant",
    ],
  ],
};

使用

• 在我们项目的main.js文件中引入一下：

// main.js
import { Button } from "vant";
Vue.use(Button);

• 按照上面这样引入后，就可以在全局任意页面中使用了。

• 但在我们的项目开发中，发现按需引入的 vant 组件越来越多，所以专门在src/components/Vant文件夹下维护了一份组件引入的 js 文件，然后在 main.js 中统一引入，这样的话就不会把 main.js 搞的很繁杂了。

import Vue from 'vue'

// https://youzan.github.io/vant/#/zh-CN/home
import {
  Button,
  Toast,
  Dialog,
  Field,
  ...
} from 'vant'

Vue.use(Toast)
  .use(Dialog)
  .use(Notify)
  .use(Field)
  ...

• 如果你使用postcss-px-to-viewport来解决移动端的适配问题，并将viewportWidth设置为了750，那么你还需要在postcss.config.js文件中将其selectorBlackList名单中把vant加进去，因为 vant 的样式是按325px来设计的，不然 vant 的组件都会缩小一半。

module.exports = {
  plugins: {
    'postcss-px-to-viewport': {
      unitToConvert: 'px',
      viewportWidth: 750,
      unitPrecision: 3,
      propList: ['*'],
      viewportUnit: 'vw',
      fontViewportUnit: 'vw',
+     selectorBlackList: ['.ignore', 'van'],
      minPixelValue: 1,
      mediaQuery: false,
      replace: true,
      exclude: [],
      landscape: false,
      landscapeUnit: 'vw',
      landscapeWidth: 568
    }
  }
}

其它

• 如何修改vant的主题色？在@vue/cli3.x的项目中，修改主题色是件简单的事情。

• 我们可以在vue.config.js配置文件中向向预处理器 Loader 传递选项，就可以替换的vant的默认样式：

module.exports = {
  // ...
  css: {
    loaderOptions: {
      less: {
        modifyVars: {
          "font-size-sm": "100px",
          "font-size-md": "200px",
          "font-size-lg": "300px",
        },
      },
    },
  },
};

在vue-cli4.0项目引入element-plus

1. 安装，可以使用npm或者yarn进行安装

npm install element-plus --save
yarn add element-plus

 

2. 完整引入

在main.js上

import App from './App.vue'
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';  //plus版本的样式文件
const app = createApp(App)
app.use(ElementPlus)

2.1 按需引入

①借助 babel-plugin-import，我们可以只引入需要的组件，以达到减小项目体积的目的。

npm install babel-plugin-import -D
yarn add babel-plugin-import -D

②在根目录下创建babel.config.js

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    [
      "import",
      {
        libraryName: 'element-plus',
        customStyleName: (name) => {
          name = name.slice(3)
          return `element-plus/packages/theme-chalk/src/${name}.scss`;
        },
      },
    ],
  ],
}

③在main.js下进行引入和注册

import 'element-plus/packages/theme-chalk/src/base.scss'
import { ElButton, ElSelect, ElOption } from 'element-plus';
//另一种注册写法
// app.component(ElButton.name, ElButton);
// app.component(ElSelect.name, ElSelect);
app.use(ElButton)
app.use(ElSelect)
app.use(ElOption)

3. 使用

<el-button type="primary">新增</el-button>
<el-select v-model="sex" placeholder="请选择性别">
  <el-option label="汉子" value="man"></el-option>
  <el-option label="妹子" value="woman"></el-option>
</el-select>