vue同时安装element-ui和vant-ui

从本质上来说想用多少个库都是可以的,cdn方式是通过引入外部的stylescript文件,比如可以添加一堆框架库工具和UI组件库,每个框架本身都使用了命名空间隔离避免污染全局空间,一般不太需要考虑冲突,比如像jquery$lodash_(另外他们本身也定义了避免命名冲突的方法);组件框架iviewivuvant-uivan-前缀和element-uiel-前缀都是一种特定避免冲突的命名空间。而使用工程化模块化的方式引入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>

猜你喜欢

转载自blog.csdn.net/weixin_42776027/article/details/114222712