Vue UI框架 （Mint UI和Element UI）

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

Element UI  基于vue pc端的UI框架        https://github.com/ElemeFE/mint-ui

MintUI 基于vue 移动端的UI框架             https://github.com/ElemeFE/element

（github中可搜索资料）

MintUI的使用：

1.找官网

2.安装 npm install mint-ui -save

3.main.js引入mint UI的css和插件

　　import MintUI from \'mint-ui\'

　　import \'mint-ui/lib/style.css\'

　　Vue.use(Mint);

4.看文档直接使用

若看不到文档，到github中搜索mint-ui，下载看example中别人怎么用的

Element UI的使用：

1.找官网   https://element.eleme.cn/#/zh-CN/component/installation

2.安装     cnpm install element-ui -S

3.main.js中引入element UI的css和插件

　　import ElementUI from \'element-ui\'

　　import \'element-ui/lib/theme-chalk/index.css\'

　　Vue.use(ElementUI)

4.webpack.config.js文件中配置file_loader

　　{

　　　　test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,

　　　　loader:\'file-loader\'

　　}

5.看文档直接使用 

按需引入

方法一：

1、首先，安装 babel-plugin-component

　　cnpm install babel-plugin-component -D

2、找到 .babelrc 配置文件

将

{
  "presets": [
    ["env", { "modules": false }],
    "stage-3"
  ]
}

改为

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

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

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

方法二：

1、引入

import { Button, Select } from \'element-ui\';
Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
/* 或写为
 * Vue.use(Button)
 * Vue.use(Select)
 */

2、引入对应的css

import \'element-ui/lib/theme-chalk/index.css\'

3、如果报错，webpack.config.js文件中配置file_loader

　　{
　　　　test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
　　　　loader:\'file-loader\'
　　}

以上是 Vue UI框架 （Mint UI和Element UI） 的全部内容， 来源链接： utcz.com/z/375519.html

回到顶部