vue 引入外部组件的正确写法应该是怎样的

正确应该怎么写？？我自己琢磨的，怎么写怎么错。。网上没有入门的说明，只有入门后的一堆说明。。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <runoob></runoob>
</div>

<script>
import runoob from './js/test.vue';    //引用
// 创建根实例
new Vue({
  el: '#app',
  components:{
    'runoob':runoob
  }
})
</script>
</body>
</html>
``
外部组件test.vue`
```<template>
    <h1>自定义组件!</h1>
</template>
<script>
    export default { 
        name: "runoob"     
    } 
</script>

<style>
</style>

分别在两个template文件去定义组件，根组件和子组件

HTML文件里面不能导入.vue文件的，你这是在浏览器运行的话，内容是无法识别的，浏览器只支持.html文件，您需要用Vue CLI构建一个完整的项目，打包之后才能在浏览器运行

这样单独来行不通的，你cli一个案列项目对着来