问题描述

This dependency was not found: 如何引入自定义组件？

问题出现的环境背景及自己尝试过哪些方法

使用vue-cli初始化的项目，按照公司的项目，加入了一个自定义组件，tk_bg.vue.
然后修改HelloWorld.vue，import的时候报错。不知道需要改哪里？需要先注册么，具体怎么做？
因为是参考公司现有项目，对比了main.js和App.vue，没发现怎么处理的。

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）
tk_bg.vue的主要内容
<template>

<div class="tk_bg">
    <el-container>
        <el-header><h3>ERP</h3></el-header>
    </el-container>
</div>

</template>
HelloWorld.vue的主要内容
<template>

<tk-background class="navigation">
    <el-main>
        <el-container>
            <el-aside width="24%">
                <img id="pic" src="img/HBuilder.png" style="width: 200px; hight: 200px">
            </el-aside>
        </el-container>
    </el-main>
</tk-background>

</template>
<script>

import tkBackground from 'components/tk_bg/tk_bg'

export default {
    name: 'VueTest',
    data() {
        return {
            msg: 'Welcome to Your Vue.js App',
        }
    },
    components: {
        tkBackground
    },
};

</script>

你期待的结果是什么？实际看到的错误信息又是什么？

正常编译不报错，打开localhost：8080能看到HBuilder这个图片。

问题补充

经过科学上网，实验，观察日志后，发现问题在这一行

import tkBackground from 'components/tk_bg/tk_bg'>
发现我的Demo中直接写路径都不好使，需要使用别名@的形式，
import tkBackground from '@/components/tk_bg/tk_bg'>
我参考的例子中都是类似'components/组件名'，而我必须要在前面加@。
请问这个是什么原因，在哪里配置么？

自问自答

经过网友的指点，找到了问题所在：一般情况下import需要使用./或者../的相对路径，如果配置了别名，则可以挂在别名下。具体到此问题，因为参考项目增加了别名，我没有增加别名，所以访问不到。
解决办法，修改：webpack.base.conf.js：文件中，resolve: {}部分，找到这块儿，基本一看就明白了。
作为一个初学者，学习VUE觉得官网资料不够细腻，有过来人，请赐教好的学习资源。