共计 725 个字符，预计需要花费 2 分钟才能阅读完成。
在用 vue 构建项目的过程中，我们有时会用到别人开发的组件如 vue-router；使用他人组件的正常步骤如下：1、命令行进行安装，执行 install；2、在 vue 项目中的入口文件 main.js 中，进行导入；3、然后用 Vue.use(plugin)引入该组件。
我们也可以创造属于自己的组件，具体步骤如下：1、在 components 文件中创建 test 文件；2、在 test 文件中，创建 index.js 和 Test.vue；3、Test.vue 中的代码如下：
<template>
<div>
<div> 实现自定义组件 </div>
</div>
</template>
<script>
export default{
data () {
return {
msg: ‘hello vue’
}
},
components: {}
}
</script>
<style>
</style>
4、test 文件夹下的 index.js 中的代码如下：
import MyTest from ‘./Test.vue’
const Test = {
install (Vue) {
Vue.component(‘Test’, MyTest)
}
}
export default Test
5、入口文件 main.js 进行相关的配置：
import Test from ‘./components/test’
Vue.use(Test)
6、如此这般，就可以在其它组件中正常使用，如下：
<template>
<div class=”hello”>
<Test></Test>
</div>
</template>
自定义组件 Test 的内容 (“ 实现自定义组件 ”) 将会展示出来。
注：test 文件指的是自定义组件文件夹；index.js 指的是组件的入口加载文件；Test.vue 指的是组件模板。
