vue-cli sets the import directory

Open build/webpack.base.conf.js

Find the resolve line under module.exports

That's how it started

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

Change it to:

  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      'src': path.resolve(__dirname, '../src'),
      'pages': path.resolve(__dirname, '../src/pages'),
      'common': path.resolve(__dirname, '../src/common'),
      'vendor': path.resolve(__dirname, '../src/vendor'),
      'components': path.resolve(__dirname, '../src/components'),
    }
  },

Then you can use import xxxComponent from 'components/xxxComponent' in any .vue file