vue模板中的使用配置
<template>
......
//element ui select组件命名方法
<el-select v-model="" placeholder="">
<el-option
v-for="item in arr"
:key="item.w"
:label="item.n"
:value="item.w"
>
</el-option>
</el-select>
......
//vant Search组件使用方法
<Search
v-model=""
show-action
placeholder=""
shape=""
background="#FFFFFF"
@search=""
@cancel=""
/>
......
</template>
<script>
import Search from "vant/lib/search"; // vant组件引入方式
import "vant/lib/search/style"; // vant组件样式引入方式
import Select from "element-ui/lib/select"; // element 组件引入方式
import "element-ui/packages/theme-chalk/src/select.scss"; // element 组件样式引入方式
export default {
components: {
Search, // vant 组件注册方式
[Select.name]: Select // element 组件引入方式
}
};
</script>
element 还有两个公用样式需要全局引入
/*icon字体路径变量*/
$--font-path: "~element-ui/lib/theme-chalk/fonts";
/*按需引入用到的组件的scss文件和基础scss文件*/
@import "~element-ui/packages/theme-chalk/src/base.scss";
引入的组件路径,官网没有说,怎么查找?
如果你npm安装了element 或者 vant 你可以在 项目的node_modules 文件夹下根据以下路径查找确认:
vant => "vant/lib/组件名"; // vant组件引入方式
vant => "vant/lib/组件名/style"; // vant组件样式引入方式
element => "element-ui/lib/组件名"; // element 组件引入方式
element => "element-ui/packages/theme-chalk/src/组件名.scss"; // element 组件样式引入方式
如果没有安装 element 或者 vant 请先npm安装一下,再继续上面的方式
注意:
通常驼峰命名 的组件 DateTimePicker => date-time-picker (全部小写);单个单词的组件:Upload => upload (全部小写)
vue components选项的组件注册的名称可以有多种形式,具体每个组件的内部结构,可以在其父组件的mouted生命周期钩子中(console.log)打印一下这个组件
element参考
element 部分组件批量全局注册
elementComponents.ts 内容
// elementComponents.js
// element 样式
import "element-ui/packages/theme-chalk/src/tooltip.scss";
import "element-ui/packages/theme-chalk/src/select.scss";
import "element-ui/packages/theme-chalk/src/option.scss";
import "element-ui/packages/theme-chalk/src/date-picker.scss";
// element 组件
// import Tooltip from "element-ui/lib/tooltip";
// import Select from "element-ui/lib/select";
// import Option from "element-ui/lib/option";
// import DatePicker from "element-ui/lib/date-picker";
import { Tooltip, Select, Option, DatePicker } from "element-ui";
// element 组件数组
const components = [Tooltip, Select, Option, DatePicker];
// 自定vue义注册方法 vm 默认指向调用它的对象, main.js中 vue.use(elementComponents); 所以vm指向Vue
export const elementComponents = {
install: (vm: any) => {
components.forEach(item => {
vm.component(item.name, item);
});
}
};
common.scss
/*icon字体路径变量*/
$--font-path: "~element-ui/lib/theme-chalk/fonts";
/*按需引入用到的组件的scss文件和基础scss文件*/
@import "~element-ui/packages/theme-chalk/src/base.scss";
main.ts
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import "@/assets/css/common.scss"; // 引入公用样式
import { elementComponents } from "@/utils/static/elementComponents/index"; // 引入需要注册的element 组件
Vue.config.productionTip = false;
Vue.use(elementComponents); // 统一注册
const vue = new Vue({
router,
render: h => h(<any>App)
}).$mount("#app");
Vant 部分组件批量全局注册
needToVant.ts
// 引入需要的样式
import 'vant/lib/divider/style'
import 'vant/lib/image/style'
import 'vant/lib/field/style'
import 'vant/lib/rate/style'
import 'vant/lib/button/style'
import 'vant/lib/toast/style'
// 引入需要的组件
// import Divider from "vant/lib/divider";
// import VanImage from "vant/lib/image";
// import Field from "vant/lib/field";
// import Rate from "vant/lib/rate";
// import Button from "vant/lib/button";
// import Toast from "vant/lib/toast";
import { Toast, Button, Rate, Field, Image as VanImage, Divider } from 'vant'
// vant 组件数组
const components = [Divider, VanImage, Field, Rate, Button, Toast]
// 自定vue义注册方法 vm 默认指向调用它的对象, main.js中 vue.use(needToVant); 所以vm指向Vue
export default {
install: (vm: any) => {
components.forEach(item => {
vm.component(item.name, item)
})
}
}
main.ts
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import needToVant from "@/utils/static/needToVant"; // 引入需要注册的Vant组件
Vue.config.productionTip = false;
Vue.use(needToVant); // 统一注册
const vue = new Vue({
router,
render: h => h(<any>App)
}).$mount("#app");