Vue中常见混淆用法汇总

import Vue from 'vue' 
import App from './App.vue'
import router from './router'
 
new Vue({
    el: '#app',
    router,
    components: { App },
    template: '<App/>'
})

// App.vue
<template>
   <div id="app">
       <router-view />
   </div>
</template>
 
<script>
export default {
 name: "App"
};
</script>

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
 
createApp(App).use(router).mount('#app')

import Vue from 'vue' 
import App from './App.vue'
import PageTools from '@/components/PageTools'
 
Vue.component('PageTools', PageTools)
 
new Vue({
    el: '#app',
    components: { App },
    template: ' <div>
                     <App/>
                      <PageTools></PageTools>
                  </div>'
})

// GlobalComponent.vue
<template>
 <button @click="count++">点了 {{ count }} 次！</button>
</template>
 
<script>
export default {
 name: "GlobalComponent",
 data() {
   return {
     count: 0,
   };
 },
};
</script>
 
// main.js
import {createApp} from 'vue'
import App from './App.vue'
import GlobalComponent from "./components/GlobalComponent"
 
const app = createApp(App)
 
app.component('GlobalComponent',GlobalComponent);
 
app.mount('#app')
 
// App.vue
<template>
 <h1>Hello element-plus!</h1>
 <GlobalComponent></GlobalComponent>
 <br />
 <about></about>
</template>
 
<script>
import About from "./components/About.vue";
export default {
 name: "App",
 components: {
   About,
 },
};
</script>
 
// About.vue
<template>
 <h2>this is About！ </h2>
 <br/>
 <GlobalComponent></GlobalComponent>
</template>

Vue.use(VueRouter)
Vue.use(Vuex)
Vue.use(vant)
Vue.use(ElementUI)

import axios from 'axios';
Vue.prototype.$http = axios;