注意:本人用的脚手架是vue.js
1 常见的UI组件库
常见的移动端UI组件库
PC端常用的UI组件库
1.Element UI
2.IView UI
2 全部引用 安装
进入cmd窗口
npm i element-ui -s
01 在main.js中
import Vue from 'vue'
import App from './App.vue'
// 全局引入
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
new Vue({
el:"#app",
render: h => h(App),
})
02 在App.vue里使用
在官方网站复制代码到App里
<template>
<div class="container">
<button>原生的按钮</button>
<el-row>
<el-button plain>朴素按钮</el-button>
<el-button type="primary" plain>主要按钮</el-button>
<el-button type="success" plain>成功按钮</el-button>
<el-button type="info" plain>信息按钮</el-button>
<el-button type="warning" plain>警告按钮</el-button>
<el-button type="danger" plain>危险按钮</el-button>
</el-row>
</div>
</template>
<script>
export default {
name: "App",
};
</script>
03 最后加载效果
3 这里是按需引用
npm install babel-plugin-component -D
01 在main.js中
import Vue from 'vue'
import App from './App.vue'
// 全局引入
// import ElementUI from 'element-ui';
// import 'element-ui/lib/theme-chalk/index.css';
//部分引入
import { Button, Row } from 'element-ui';
Vue.config.productionTip = false
Vue.component(Button.name, Button);
Vue.component(Row.name, Row);
// Vue.use(ElementUI);
new Vue({
el:"#app",
render: h => h(App),
})
02 配置 babel.confiig.js文件
在里面输入
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset',
["@babel/preset-env", { "modules": false }]
],
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}
03 在main.js里导入
import Vue from 'vue'
import App from './App.vue'
//部分引入
import { Button, Row } from 'element-ui';
Vue.config.productionTip = false
Vue.component(Button.name, Button);
Vue.component(Row.name, Row);
new Vue({
el:"#app",
render: h => h(App),
})
04 在App.vue里使用
<template>
<div class="container">
<button>原生的按钮</button>
<el-row>
<el-button plain>朴素按钮</el-button>
<el-button type="primary" plain>主要按钮</el-button>
<el-button type="success" plain>成功按钮</el-button>
<el-button type="info" plain>信息按钮</el-button>
<el-button type="warning" plain>警告按钮</el-button>
<el-button type="danger" plain>危险按钮</el-button>
</el-row>
</div>
</template>
<script>
export default {
name: "App",
};
</script>
03 最后加载效果