使用ES6语法在vue中导入多个组件不起作用 [英] Import multiple components in vue using ES6 syntax doesn't work

问题描述

所以我试图创建一个需要文件夹views /的其他组件的vue实例。

So I am trying to create a vue instance that needs other components from folder "views/"

这是文件结构：

• 项目
  
  
  
  
  • build /
  
  
  • config /
  
  
  • node_modules /
  
  
  • src /
    
    
    
    
    • views /
    
    
    • components /
    
    
    • Project
      • build/
      • config/
      • node_modules/
      • src/
        • views/
        • components/

        如果我在App.vue中执行此操作，服务器将运行且没有错误：

        If I do this in App.vue, the server will run with no error:

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

        但如果我尝试这样做：

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

        服务器将无法运行并将返回：

        The server won't run and will return:

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

        这是网络pack.base.config.js

        Here is the 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'),
            },
          },
        

        我真的不知道什么是错的，plz帮助，thx

        I really have no idea what's wrong, plz help, thx

        推荐答案

        这不是正确的方法。

        import { something } from 'some_file';
        

        是关于导入默认情况下未导出的内容！当一个文件暴露很多东西时，这很有用。

        is about importing something which is not exported by default! This is helpful in case when one file exposes a lot of things.

        import Something from 'some_file';
        

        是关于从文件导入默认导出项目。

        is about importing the default exported item from your file.

        使用当前设置无法编写内容。你必须这样写：

        What you write is not possible with the current setup. You'll have to write it like:

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

        然后创建一个 index.js 文件布局然后跟随将是该文件的内容：

        then create a index.js file in layouts and then following will be the content for that file:

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

        这应该现在可以使用，请尝试阅读有关ES6导入的更多信息 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/报表/进口

        This should work now, try reading more about ES6 imports on https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import

        这篇关于使用ES6语法在vue中导入多个组件不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！