vue按需引入ui库、同时引入两种组件库
按需要引入 Mint UI ,有两种情况: 1. 引入全部组件 如果项目会用到 Mint UI 里较多的组件,最简单的方法就是把它们全部引入。此时需要在入口文件 main.js 中:import Mint from 'mint-ui';Vue.use(Mint);import 'mint-ui/lib/style.css'; 2. 按需引入 如果你只需要...
按需要引入 Mint UI ,有两种情况:
1. 引入全部组件
如果项目会用到 Mint UI 里较多的组件,最简单的方法就是把它们全部引入。此时需要在入口文件 main.js 中:
import Mint from 'mint-ui';
Vue.use(Mint);
import 'mint-ui/lib/style.css';
2. 按需引入
如果你只需要使用某个组件,可以仅引入这个组件,Mint UI 能够保证在代码打包时,与这个组件无关的文件不会出现在最终代码里。比如需要引入 Button 组件,则在 main.js 中:
import Button from 'mint-ui/lib/button';
import 'mint-ui/lib/button/style.css';
Vue.component(Button.name, Button);
上面两种引入方法都要单独引入相应的 CSS 文件。这很不方便,尤其当你使用按需引入的方法引入多个组件时。
1. 使用插件, 首先当然是安装它:
cnpm i babel-plugin-component -D
2. 然后在 .babelrc 中配置它:
{
"presets": [
["env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}],
"stage-2"
],
"plugins": ["transform-vue-jsx", "transform-runtime",
[
"component",
[
{
"libraryName": "mint-ui",
"style": true
}
]
]
]
}
3. 这样上述两种引入方法就可以简化为:
//import Mint from 'mint-ui';
//Vue.use(Mint);
//import 'mint-ui/lib/style.css'; //不需要手动导入mint-ui样式
import Button from 'mint-ui/lib/button';
Vue.component(Button.name, Button);
import { Swipe, SwipeItem } from 'mint-ui'; //按需引入部分组件
Vue.component(Swipe.name, Swipe);
Vue.component(SwipeItem.name, SwipeItem);
前面安装的插件会自动引入相应的 CSS 文件!
官方参考:https://mint-ui.github.io/docs/#/en2/quickstart
Element-ui按需引入
element UI组件的单独使用(第一种方法):
1、cnpm install babel-plugin-component -D
2、找到.babelrc 配置文件
plugins改为:
{
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}
3、
import { Button, Select } from 'element-ui';
Vue.use(Button)
Vue.use(Select)
element UI组件的单独使用(第二种方法):
import { Button, Select } from 'element-ui';
Vue.use(Button)
Vue.use(Select)
引入对应的css
import 'element-ui/lib/theme-chalk/index.css';
同时引入两种ui库(思路)
1.采用单独的样式,手动引入控件
2.名字相同的控件起个别名
//引入element-ui的Button控件
import {Button} from 'element-ui';
import 'element-ui/lib/theme-chalk/button.css';
Vue.use(Button);
//引入mint-ui的Actionsheet控件,Actionsheet里面用到了Button
import {Actionsheet} from 'mint-ui';
//名字相同的控件起个别名,这里用MyButton代表mint-ui的Button
import MyButton from 'mint-ui/lib/button';
import 'mint-ui/lib/actionsheet/style.css'
import 'mint-ui/lib/button/style.css'
Vue.component(Actionsheet.name, Actionsheet);
Vue.component(MyButton.name, MyButton);
使用mint-ui的ActionSheet:
<mt-button @click.native="sheetVisible = true" size="large">点击上拉 action sheet</mt-button>
<mt-actionsheet :actions="actions" v-model="sheetVisible"></mt-actionsheet>
使用element-ui的Button:
<el-button type="success">成功按钮</el-button>
更多推荐
所有评论(0)