Vue ui组件的了解、安装、使用

Vue.js 是一个渐进式 JavaScript 框架，用于构建 UIS（用户界面）和 SPA（单页应用程序）。UI 组件库提高了我们的开发效率速度，增强了应用的整体外观、感觉、交互性和可访问性，接下来就看看有哪些适用于 Vue ui 组件库。

一、Vue ui组件库

移动端常用的 UI 组件库

        1、Vant

        2、Cube UI

        3、Mint UI

PC 端常用的 UI 组件库

        1、Element UI

        2、IView UI

二、Element UI

1、Element UI 的官网：https://element.eleme.io/#/zh-CN

2、安装 Element UI：npm i element-ui -S

3、完整引入在 main.js 中

    // 引入vue
    import Vue from "vue"
    // 引入App
    import App from "./App.vue"
    // 引入Element ui组件库
    import ElementUI from "element-ui";
    // 引入ElementUI的全部样式
    import "element-ui/lib/theme-chalk/index.css";
    // 关闭生产提示
    Vue.config.productionTip = false;
    // 使用ElementUI
    Vue.use(ElementUI);

    new Vue({
      el:"#app",
      render:h => h(App)
    });

4、element-ui的按需引入

        1、安装：npm install babel-plugin-component -D

        2、修改 babel-config-js，填入下面的信息

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

        3、在引入

	// 引入vue
	import Vue from 'vue'
	// 引入App
	import App from './App.vue'
	// 按需引入
	import {Button,Row,DatePicker} from 'element-ui';	
	// 关闭生产提示
	Vue.config.productionTip = false；
	// 应用ElementUI
	// Vue.use(ElementUI);
	Vue.component(Button.name, Button);
	Vue.component(Row.name, Row);
	Vue.component(DatePicker.name, DatePicker);

	// 创建vm
	new Vue({
	    el:'#app',
	    render: h => h(App),
	})

        4、打包时（npm run serve），可能会提示 cannot find xxx，这时只要 npm i xxx 就可以。