登录
原创

vue常用组件库

发布于 2022-04-11 阅读 575
  • 前端
  • Vue.js
原创

PC 端

  1. Element UI
  2. View UI

移动端

  1. Mint UI
  2. Vant

Element UI 使用方法示例

Element UI 官网:
https://element.eleme.cn/#/zh-CN

ps~ 此处为 Element UI2 使用示例,可根据自己需要查看官网安装和使用方法
vue2的话使用老版本的 Element UI
vue3的话使用新版本的 Element UI

elementUi使用版本说明.png

安装方法教程地址:
https://element.eleme.cn/#/zh-CN/component/installation

  1. 安装
    在项目中执行安装命令 : npm i element-ui -S

  2. 使用

① 全部引入:

a. 在main.js 文件中加入:

// 导入 ElementUI 及其样式文件
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

// vue 使用 ElementUI 
Vue.use(ElementUI);

b. 然后在 官网找到自己需要使用的元素,赋值代码到自己项目中:

image.png

② 按需引入

a. 安装 babel-plugin-component: npm install babel-plugin-component -D

b. babel.config.js文件添加如下代码:

"plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]

添加后:

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

c. 在main.js 文件中加入:

// 按需引入
import { Button, Input } from 'element-ui'

Vue.component(Button.name, Button)
/* 
或者这么写
Vue.use(Button)
 */
Vue.use(Input)

d. 在官网找到自己需要的元素,赋值代码到 自己项目代码中

评论区

零00
7粉丝

时光荏苒,我自清欢

0

0

0

举报