vue同时安装element-ui和vant-ui
从本质上来说想用多少个库都是可以的,cdn方式是通过引入外部的style和script文件,比如可以添加一堆框架库工具和UI组件库,每个框架本身都使用了命名空间隔离避免污染全局空间,一般不太需要考虑冲突,比如像jquery的$,lodash的_(另外他们本身也定义了避免命名冲突的方法);组件框架iview的ivu、vant-ui的van-前缀和element-ui的el-前缀都是一种特定避免冲突的
·
从本质上来说想用多少个库都是可以的,cdn
方式是通过引入外部的style
和script
文件,比如可以添加一堆框架库工具和UI组件库,每个框架本身都使用了命名空间隔离避免污染全局空间,一般不太需要考虑冲突,比如像jquery
的$
,lodash
的_
(另外他们本身也定义了避免命名冲突的方法);组件框架iview
的ivu
、vant-ui
的van-
前缀和element-ui
的el-
前缀都是一种特定避免冲突的命名空间。而使用工程化模块化的方式引入npm
包,比cdn
方式更优的是可以使用模块化的方式按需加载,可以减轻资源大小。这里有三种方式并用框架:
- 全局引入:
main.js
里直接引入多种多种框架,会加载全部的组件,使用时不需要在文件有额外的引用,直接使用框架带前缀的标签即可,示例:
// main.js
import Vant from 'vant'
import ElementUI from 'element-ui'
// 这里还可以设置一些组件全局配置
Vue.use(Vant)
Vue.use(ElementUI)
// template
<van-button />
<el-button />
- 按需加载:
main.js
文件不需要有任何引用,而是在模板文件里单独引入,要进行命名区分并在组件配置里加入依赖,这种方式会进行按需加载,有助精简代码,示例:
// template
<vanButton />
<ElButton />
// script
import { Button as VanButton } from 'vant'
import { Button as ElButton } from 'element-ui'
export default {
components: {
VanButton,
ElButton
}
}
- 按需加载并进行全局配置:在
main.js
文件里引入按需加载的组件,重命名避免冲突,并且需要进行全局配置,示例:
// main.js
import { Button as VanButton } from 'vant'
import { Button as ElButton } from 'element-ui'
Vue.component(VanButton.name, VanButton)
Vue.component(ElButton.name, ElButton)
// 全局配置
// ...
// template
<el-button>按钮</el-button>
<van-button>按钮</van-button>
更多推荐
已为社区贡献13条内容
所有评论(0)