vue2项目中在js文件中引ivew组件

在 Vue.js 2.x 项目中，在 JavaScript 文件中引用并使用 `Vue` 组件通常有两种常见做法：

1. **在单文件组件 (Single File Component, .vue) 中导出和引入**:
- 首先，你需要有一个名为 `MyComponent.vue` 的组件文件，它会包含模板、数据和方法。例如：

     <template>
       <div>{{ message }}</div>
     </template>

     <script>
     export default {
       data() {
         return { message: 'Hello from Vue!' };
       }
     };
     </script>

- 然后在 JavaScript 文件中，你可以导入并使用这个组件：

     import MyComponent from '@/components/MyComponent.vue';
     // 注册组件到 Vue 实例上
     Vue.component('my-component', MyComponent);

现在你可以在需要的地方使用 `<my-component>` 标签。

2. **在普通 `.js` 或者 `.ts` 文件中作为函数返回一个自定义组建实例**:
- 如果你想在一个模块化的结构中创建组件，可以将其封装成一个工厂函数：

     const MyComponent = {
       template: '<div>Hello from custom component</div>',
       created() {
         this.message = 'Custom component instance';
       },
     };

     export default MyComponent;

使用时直接在需要的地方创建实例并挂载：

     const myInstance = new Vue(MyComponent);
     document.getElementById('app').appendChild(myInstance.$el);