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

从本质上来说想用多少个库都是可以的，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>