elemrnt UI 应用

前端UI组件库：移动端与PC端的选择与按需引入

最新推荐文章于 2024-12-13 17:42:58 发布

原创最新推荐文章于 2024-12-13 17:42:58 发布 · 138 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ui #vue.js #javascript

Vue学习专栏收录该内容

63 篇文章

订阅专栏

文章介绍了移动端常用的UI组件库Vant、CubeUI和MintUI，以及PC端的ElementUI和IViewUI。强调了使用babel-plugin-component实现按需引入组件以减小项目体积的方法，提供了配置示例，并展示了在main.js中引入特定组件的代码片段。

7.1 移动端常用 UI 组件库

1. Vant https://youzan.github.io/vant

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

3. Mint UI http://mint-ui.github.io

7.2 PC 端常用UI 组件库

1. Element UI https://element.eleme.cn

2. IView UI https://www.iviewui.co

应用：（全部引入）

应用：按需引入

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

首先，安装babel-plugin-component：

npm install babel-plugin-component -D

然后，将 .babelrc 修改为：（新版本里文件名为：babel.config.js）

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

（追加）

接下来，如果你只希望引入部分组件，比如Button 和 Select，那么需要在 main.js 中写入以下内容：

importVue from'vue';
import{ Button, Select } from'element-ui';
importApp from'./App.vue';
Vue.component(Button.name,Button);
Vue.component(Select.name, Select);
/* 或写为
 * Vue.use(Button)
 * Vue.use(Select)
 */newVue({
  el: '#app',
  render: h=>h(App)
});

由于脚手架更新了，所以需要更改配置：