vue组件的几种导出方式、挂载和创建方式

创建vue实例的方式

1.new Vue

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
new Vue({
  render: (h) => h(App),
  router,
  store
}).$mount('#app')

.$mount('#app')可以换成el:'#app'

2.createAPP

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
const app = createApp(App)
async function start() {
app.use(router)
app.mount('#app')
}
start()

2.export default

        在Node.js中，如果你尝试导入一个目录，那么默认会尝试加载该目录下的index.js文件

例如：在src/plugins目录下有三个文件分别是a.js，b.js和index.js，那么就可以在index.js文件中导入a.js、b.js，import a from './a',import a from './b',再export default{a,b},再main.js中导入并vue.use(plugins),这样会默认会尝试加载该目录下的index.js文件，这样就不用别把a.js、b.js分别导入

2.全局加载

方法挂载

1.install（Vue）

import tab from './tab'

export default {
  install(Vue) {  
    // 页签操作
    Vue.prototype.$tab = tab
  }
}

在组件中this.$tab调用即可

2.在main.js中全局挂载
 

import { getDicts } from "@/api/system/dict/data";

Vue.prototype.getDicts =getDicts 

在组件中this.getDicts调用即可

全局组件挂载

1.在main.js中导入并注册

import Pagination from "@/components/Pagination";
Vue.component('Pagination', Pagination)

2.在需要使用MyBread的组件中导入并注册

import MyBread from '@/components/common/MyBread.vue'
components: { MyBread }