VUEパスの問題

import:
htmlファイルでは、scriptラベルでjsファイルを導入します.vueでは、import xxx from xxxパスでファイルをインポートし、jsファイルだけをインポートすることはできません.「xxx」とは、インポートしたファイルに名前を付けることであり、入力を指導するファイルの名前ではなく、変数名に相当します.「xxxパス」とは、ファイルの相対パスを指す.
srcの下にはcomponents、routerフォルダ、Appがあります.vueファイル、componentsフォルダ下流apple.vueとbanana.vue、routerフォルダの下にindexがあります.jsルーティングファイル
ルートでindex.jsではappleをインポートする.vueとbanana.vue

import banana from '@/components/banana'
import apple from '../components/apple'

以上の例では、相対パスを2つの方法で定義し、ファイルの接尾辞名を省略した.
.方式
親子ディレクトリで相対パスを定義するには

./     
../           

@方式
相対パスvueをルートディレクトリで定義webpack.base.conf.jsファイルには次の構成があります.

//        
function resolve(dir) {
  return path.join(__dirname, '..', dir)
}

module.exports = {
  resolve: {
    //             ，webpack              
    extensions: ['.js', '.vue', '.json'],
    //     
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      //        ，src        @
      '@': resolve('src'),
    }
  }
}