VUE UI

目录

• VUE UI
  • 一 移动端常用UI组件库
  • 二 PC端常用UI组件库
  • 三 ElementUI组件按需引入

1. Vant http://vant-contrib.gitee.io/vant/#/zh-CN/

2. Cube UI https://didi.github.io/cube-ui/

3. Mint UI http://mint-ui.github.io/#!/zh-cn (vue 2.0)

4. NUT UI https://nutui.jd.com/#/

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

6. IView UI http://v1.iviewui.com/

7. 首先安装element-ui:

   npm install element-ui

8. 然后安装 babel-plugin-component:

   npm install babel-plugin-component -D

9. 修改babel.config.js:

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

10. 在main.js按需引入组件

    //引入Vue
    import Vue from "vue";
    //引入App
    import App from './App';

    //完整引入
    // 引入element-ui组件库
    // import ElementUI from 'element-ui';
    /// 引入element全部样式
    // import 'element-ui/lib/theme-chalk/index.css';

    // 使用element ui插件库
    // Vue.use(ElementUI);

    //按需引入
    import { Button, Input, Row, DatePicker } from 'element-ui';
    Vue.use(Button);
    Vue.use(Input);
    Vue.use(Row);
    Vue.use(DatePicker);

    //关闭Vue的生产提示
    Vue.config.productionTip = false;

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

11. 然后在App.vue使用