ES6 구문을 사용하여 vue에서 여러 구성 요소를 가져올 수 없음

ES6 구문을 사용하여 vue에서 여러 구성 요소를 가져올 수 없음

이 질문에는 이미 답변이 있습니다.

와일드카드를 사용하여 디렉토리 내의 모든 파일에서 모듈을 Import할 수 있습니까? (14개 답변)

닫힘5년 전에요.

그래서 "views/" 폴더에서 다른 컴포넌트가 필요한 vue 인스턴스를 생성하려고 합니다.

파일 구조는 다음과 같습니다.

• 프로젝트.
  • 빌드/
  • 설정/
  • node_module/
  • src/
    • 표시/
    • 컴포넌트/
  • App.vue

App.vue에서 이렇게 하면 서버는 오류 없이 실행됩니다.

import Navbar from 'layouts/Navbar'
import Topbar from 'layouts/Topbar'
import AppMain from 'layouts/AppMain'

하지만 이걸 대신 해보면:

import { AppMain, Navbar, Topbar } from 'layouts/'

서버가 실행되지 않고 다음과 같이 반환됩니다.

This dependency was not found:
* views/ in ./src/router/index.js

다음은 webpack.base.config.js 입니다.

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

module.exports = {
  entry: {
    app: './src/main.js'
  },
  output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },
  resolve: {
    extensions: ['.js', '.vue', '.json', '.scss'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      'layouts': resolve('src/layouts'),
      'views': resolve('src/views'),
      'components': resolve('src/components'),
      'variables': path.resolve(__dirname, '../src/assets/common/variables.scss'),
    },
  },

난 정말 뭐가 잘못됐는지 모르겠어, 도와줘, thx

이것은 올바른 방법이 아니다.

import { something } from 'some_file';

기본적으로 내보내지 않는 항목을 가져오는 것입니다.이것은 하나의 파일에 많은 것이 노출되는 경우에 유용합니다.

import Something from 'some_file';

는 기본 내보내기 항목을 파일에서 가져오는 것입니다.

현재 설정에서는 쓸 수 없습니다.다음과 같이 적어야 합니다.

import { AppMain, Navbar, Topbar } from 'layouts';

그런 다음 생성한다.index.js레이아웃으로 파일을 작성한 후 해당 파일의 내용을 다음에 나타냅니다.

import Navbar from 'layouts/Navbar'
import Topbar from 'layouts/Topbar'
import AppMain from 'layouts/AppMain'

export {
  Navbar,
  Topbar,
  AppMain
}

지금 바로 실행 가능합니다.ES6 Import에 대한 자세한 내용은 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import에서 확인하시기 바랍니다.

언급URL : https://stackoverflow.com/questions/43060814/import-multiple-components-in-vue-using-es6-syntax-doesnt-work