五屏网站建设哪家好,素材模板网站,可以搜索企业信息的软件,松阳建设局网站Vue基础27Vue UI组件库移动端常用 UI 组件库PC 端常用 UI 组件库Element-ui插件基本使用安装引入并使用main.jsApp.vue按需引入安装 babel-plugin-componentbabel.config.jsmain.jsApp.vueVue UI组件库
移动端常用 UI 组件库
Vant https://youzan.github.io/vant Cube UI htt…
Vue基础27Vue UI组件库移动端常用 UI 组件库PC 端常用 UI 组件库Element-ui插件基本使用安装引入并使用main.jsApp.vue按需引入安装 babel-plugin-componentbabel.config.jsmain.jsApp.vueVue UI组件库
移动端常用 UI 组件库
Vant https://youzan.github.io/vant Cube UI https://didi.github.io/cube-ui Mint UI http://mint-ui.github.io PC 端常用 UI 组件库
Element UI https://element.eleme.cn IView UI https://www.iviewui.co Element-ui插件
基于Vue框架的国产UI组件饿了么出品
基本使用
安装 npm i element-ui 引入并使用
main.js
import Vue from vueimport App from ./App//引入ElementUI组件库
import ElementUI from element-ui
//引入ElementUI全部样式
import element-ui/lib/theme-chalk/index.css;//关闭vue的生产提示
Vue.config.productionTip false//应用ElementUI
Vue.use(ElementUI)
new Vue({el: #app,render: h h(App),
})App.vue
templatediv classbgbutton原生按钮/buttoninput typetext placeholder原生input框br br
!-- element-ui的引入--el-button typeprimary主要按钮/el-buttondiv classinputel-input placeholder请输入内容/el-input/divbrel-button iconel-icon-search circle/el-buttonbr
!-- 日期引入--el-date-pickertypedaterangealignrightunlink-panelsrange-separator至start-placeholder开始日期end-placeholder结束日期/el-date-picker/div
/templatescript
export default {name: App,
}
/scriptstyle
.input{width: 200px;margin-top: 10px;
}
/style 按需引入
安装 babel-plugin-component npm install babel-plugin-component -D babel.config.js
module.exports {presets: [vue/cli-plugin-babel/preset,[babel/preset-env, { modules: false }]],plugins: [[component,{libraryName: element-ui,styleLibraryName: theme-chalk}]]
}
main.js
import Vue from vueimport App from ./App// //引入ElementUI组件库
// import ElementUI from element-ui
// //引入ElementUI全部样式
// import element-ui/lib/theme-chalk/index.css;//关闭vue的生产提示
Vue.config.productionTip false//按需引入
import{Button,Row,DatePicker,Input} from element-ui;// //应用ElementUI
// Vue.use(ElementUI)
Vue.component(Button.name,Button)
Vue.component(Row.name,Row)
Vue.component(Input.name,Input)
Vue.component(expecial-datePicker,DatePicker)new Vue({el: #app,render: h h(App),
})App.vue
templatediv classbgbutton原生按钮/buttoninput typetext placeholder原生input框br br
!-- element-ui的引入--el-rowel-button typeprimary主要按钮/el-button/el-rowdiv classinputel-input placeholder请输入内容/el-input/divel-rowel-button iconel-icon-search circle/el-button/el-row
!-- 日期引入--expecial-datePickertypedaterangealignrightunlink-panelsrange-separator至start-placeholder开始日期end-placeholder结束日期/expecial-datePicker/div
/templatescript
export default {name: App,
}
/scriptstyle
.input{width: 200px;margin-top: 10px;
}
/style
