外部导入vue脚本使用vue如何导入组件

如果你想在外部导入 Vue 脚本，并使用 Vue 组件，可以按照以下步骤进行操作：

1. 首先，在你的项目中确保已经安装了 Vue.js，并在你的 HTML 文件中引入 Vue 脚本。例如：

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

2. 在你的项目中创建一个组件文件，例如 `MyComponent.vue`。

3. 在 `MyComponent.vue` 文件中，定义你的组件。例如：

<template>
  <div>
    <!-- 组件的模板 -->
  </div>
</template>

<script>
export default {
  // 组件的配置选项
}
</script>

<style scoped>
/* 组件的样式 */
</style>

4. 在你的外部 JavaScript 文件中，使用 `import` 语句将组件导入。例如：

import MyComponent from './MyComponent.vue'

5. 创建一个 Vue 实例，并在组件选项中注册这个组件。例如：

new Vue({
  el: '#app',
  components: {
    MyComponent
  }
})

6. 在你的 HTML 文件中，使用组件标签来渲染这个组件。例如：

<div id="app">
  <my-component></my-component>
</div>

现在，你可以在外部导入的 Vue 脚本中使用 `MyComponent` 组件了。确保根据你的项目结构和文件路径做相应的调整。

请注意，这种方式需要使用构建工具（例如 webpack）来处理模块导入和构建项目。如果你只是想在浏览器中直接使用 Vue，你可以使用 `<script>` 标签引入 Vue，并将组件定义在全局作用域中。