vue 组合组件_vue组件的组合

vue 组合组件

w-component-vue (w-component-vue)

A combination for vue component.

vue组件的组合。

例 (Example)

To view some examples for more understanding, visit examples:

要查看一些示例以进一步了解，请访问示例：

all components: web [source code]

所有组件： Web [ 源代码 ]

安装 (Installation)

使用npm(ES6模块)： (Using npm(ES6 module):)

Note: w-component-vue depends on vuetify.

注意： w-component-vue取决于vuetify 。

npm i w-component-vue

Import all components:

导入所有组件：

//choose component
<w-text
    ...
></w-text>

//import
import WComponentVue from 'w-component-vue'

//use
Vue.use(WComponentVue)

Import one component:

导入一个组件：

//choose component
<w-text
    ...
></w-text>

//import
import WText from 'w-component-vue/src/components/WText.vue'

//component
Vue.component('w-text',WText)

在浏览器(UMD模块)中： (In a browser(UMD module):)

Note: umd file includes with element-ui, lodash and wsemi, by using tree-shaking for dead-code elimination.

注意： umd文件使用element-ui ， lodash和wsemi包括wsemi ，通过使用摇树来消除死代码。

[Optional] Add script with nomodule for IE11.

[可选]为IE11添加带有nomodule的脚本。

<script nomodule src="https://cdn.jsdelivr.net/npm/@babel/polyfill/dist/polyfill.min.js"></script>

[Necessary] Add script for vue.

[必要]为vue添加脚本。

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>

[Optional] Add link for icon.

[可选]添加图标链接。

<link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://use.fontawesome.com/releases/v5.10.0/css/all.css" rel="stylesheet">

[Necessary] Add script and link for vuetify.

[必要]添加脚本和链接以进行vuetify。

<link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>

[Necessary] Add script for w-component-vue.

[必要]为w-component-vue添加脚本。

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/w-component-vue.umd.js"></script>

Directly use:

直接使用：

//choose component
<w-text
    ...
></w-text>

//use
Vue.use(window['w-component-vue'])

//new
new Vue({
    el: '#app',
    data: {
        ...
    }
})

翻译自: https://vuejsexamples.com/a-combination-for-vue-component/

vue 组合组件