Vue UI 组件库

移动端还有一个

nutui.jd.com

组件 | Element

1.全部引入

javascript 复制代码
//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//关闭Vue的生产提示
Vue.config.productionTip = false

//引入ElementUI 组件库
import ElementUI from 'element-ui';
//引入ElementUI 全部样式
import 'element-ui/lib/theme-chalk/index.css';
//应用ElmentUI
Vue.use(ElementUI);
//创建vm
new Vue({
    el: '#app',
    render: (h) => h(App),//放入构造出 App组件模板
})

2.按需引入

-D 代表开发依赖 是在开发时引入的依赖

使用这个 babel-plugin-component 这个库就是专门在UI组件库里按需引入的

bash 复制代码
npm install babel-plugin-component -D

修改babel配置 最新版文件叫这个

javascript 复制代码
//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//关闭Vue的生产提示
Vue.config.productionTip = false

//完整引入
//引入ElementUI 组件库
// import ElementUI from 'element-ui';
//引入ElementUI 全部样式
// import 'element-ui/lib/theme-chalk/index.css';
//应用ElmentUI
// Vue.use(ElementUI);

//按需引入

import { Button,Input } from 'element-ui'

Vue.component(Button.name,Button)
Vue.component(Input.name,Input)

//创建vm
new Vue({
    el: '#app',
    render: (h) => h(App),//放入构造出 App组件模板
})

样式会根据你导入的组件自动引入

babel配置文件

新版本改成这个了 用这个

javascript 复制代码
module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset',//用于解析Vue相关的js文件的
    ["@babel/preset-env", { "modules": false }]
  ],
  plugins: [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

这个库也不错

Ant Design of Vue - Ant Design Vue (antdv.com)

Vue2顺利完结,马上开 Vue3 加油!

相关推荐
Asthenia04124 分钟前
Netty编解码器详解与实战
前端
袁煦丞9 分钟前
每天省2小时!这个网盘神器让我告别云存储混乱(附内网穿透神操作)
前端·程序员·远程工作
Mr.app39 分钟前
vue mixin混入与hook
vue.js
一个专注写代码的程序媛1 小时前
vue组件间通信
前端·javascript·vue.js
一笑code1 小时前
美团社招一面
前端·javascript·vue.js
懒懒是个程序员2 小时前
layui时间范围
前端·javascript·layui
NoneCoder2 小时前
HTML响应式网页设计与跨平台适配
前端·html
凯哥19702 小时前
在 Uni-app 做的后台中使用 Howler.js 实现强大的音频播放功能
前端
心宽体胖连壮实2 小时前
记录一次 MarchingSquaresJS 使用经历
vue.js
烛阴2 小时前
面试必考!一招教你区分JavaScript静态函数和普通函数,快收藏!
前端·javascript