Vue import from省略后缀/加载文件夹的方法/实例详解

目录
  • 简介
  • 省略后缀
    • 说明
    • 官网网址
    • 详解
    • 文件名相同的处理流程
  • 加载文件夹
    • 简介
    • 说明
    • 详解
  • 实例
    • 1. 路由配置中导入layout文件夹
    • 2.layout/index.vue引入目录
    • 3.components/index.js引入各个组件

简介

本文介绍Vue在import时省略后缀以及import文件夹的方法。

省略后缀

说明

可以配置省略后缀，比如：test.js，只用test即可。

官网网址

解析(Resolve) | webpack 中文文档

详解

配置文件：webpack.base.conf.js（也可以在vue.config.js中配置相应的位置）

（下边这个是默认配置，项目中不配置也是这样的规则）。

module.exports = {
  resolve: {
    extensions: ['.js', '.vue', '.json'],
  }
...
}

这里的extensions指定了from后可导入的文件类型。上面定义的这3类可导入文件，js和vue是可以省略后缀的。

例如：

对于test.js，可以用如下两种任一方式导入：

import test from './test'
import test from './test.js'

对于test.vue，可以用如下两种任一方式导入：

import test from './test'
import test from './test.vue'

json不可以省略后缀，只能如下导入（如果去掉后缀则编译出错）：

import test from './test.json'

文件名相同的处理流程

若test.vue，test.js同时存在于同一个文件夹下，会按照配置的顺序进行导入。比如：按上边的配置，.js优先于.vue，则import的导入优先级是：js > vue。

加载文件夹

简介

说明

可以import文件夹。例如：import test from './components'。

若from文件夹，则对于该文件夹下的文件：

  • 如果package.json存在且设置正确的情况下，会加载package.json；
  • 若不满足，则加载index.js；
  • 若不满足，则加载index.vue。

详解

伪代码如下：

在该目录下：

if(package.json存在 && package.main字段存在 && package.main指定的js存在) {
    取package.main指定的js作为from的来源（即使该js可能格式或内容错误）
} else if(index.js存在){
    取index.js作为from的来源
} else {
    取index.vue作为from的来源
}

实例

以vue-element-admin的代码为例。

1. 路由配置中导入layout文件夹

此时，按照规则，会去加载package.json，没有；则找index.js，没有；再找index.vue，找到了。

2.layout/index.vue引入目录

引入的是components/index.js

3.components/index.js引入各个组件

其他网址

Vue中import from的来源：省略后缀与加载文件夹

到此这篇关于Vue import from省略后缀/加载文件夹的方法/实例详解的文章就介绍到这了,更多相关Vue--import from省略后缀内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Vue中import from的来源及省略后缀与加载文件夹问题

    Vue使用import ... from ...来导入组件,库,变量等.而from后的来源可以是js,vue,json.这个是在webpack.base.conf.js中设置的: module.exports = { resolve: { extensions: ['.js', '.vue', '.json'], alias: { '@': resolve('src') } } ... } 这里的extensions指定了from后可导入的文件类型. 而上面定义的这3类可导入文件,js和vue是

  • Vue import from省略后缀/加载文件夹的方法/实例详解

    目录 简介 省略后缀 说明 官网网址 详解 文件名相同的处理流程 加载文件夹 简介 说明 详解 实例 1. 路由配置中导入layout文件夹 2.layout/index.vue引入目录 3.components/index.js引入各个组件 简介 本文介绍Vue在import时省略后缀以及import文件夹的方法. 省略后缀 说明 可以配置省略后缀,比如:test.js,只用test即可. 官网网址 解析(Resolve) | webpack 中文文档 详解 配置文件:webpack.base

  • webpack 动态批量加载文件的实现方法

    背景 最近笔者在工作中遇到了一个小需求: 要实现一个组件来播放帧图片 这个需求本身不复杂,但是需要在组件中一次性引入十张图片,就像下面这样: // 就是这么任性,下标从0开始~ import frame0 from './assets/frame_0.png' import frame1 from './assets/frame_1.png' import frame2 from './assets/frame_2.png' // ..省略n张 import frame7 from './ass

  • Jupyter加载文件的实现方法

    初学初用,随手记录以当作笔记使用,会慢慢再进行补充添加,错误之处烦请指正. (1)运行本地文件,在代码不加载的情况下可以直接显示结果 % run F:\pythonCode\range.py(路径不加引号) (2)将本地文件加载到jupyter %load F:\pythonCode\range.py(路径是文件在本地的保存位置) 加载完成后"%load F:\pythonCode\range.py"会变成注释,而文件内容会显示在cell中. 若是从网络中导入python代码,可以使用

  • Vue中使用方法、计算属性或观察者的方法实例详解

    熟悉 Vue 的都知道 方法methods.计算属性computed.观察者watcher 在 Vue 中有着非常重要的作用,有些时候我们实现一个功能的时候可以使用它们中任何一个都是可以的,但是它们之间又存在一些不同之处,每一个都有一些适合自己的场景,我们要想知道合适的场景,肯定先对它们有一个清楚的了解,先看一个小例子. <div id="app"> <input v-model="firstName" type="text"&

  • vue全局使用axios的方法实例详解

    在vue项目开发中,我们使用axios进行ajax请求,很多人一开始使用axios的方式,会当成vue-resoure的使用方式来用,即在主入口文件引入import VueResource from 'vue-resource'之后,直接使用Vue.use(VueResource)之后即可将该插件全局引用了,所以axios这样使用的时候就报错了,很懵逼. 仔细看看文档,就知道axios 是一个基于 promise 的 HTTP 库,axios并没有install 方法,所以是不能使用vue.us

  • vue父组件触发事件改变子组件的值的方法实例详解

    父组件向子组件通信 业务场景:现在我要在父组件点击一个回退按钮,这个回退会传进子组件中(子组件中有两步进程),子组件来处理. 解决方案 起初我是父组件通过props传值,但是发现只有组件第一次加载时才能传值,通过事件改变的父组件值并不会再通过过props传递,也就是说props只有加载组件时才会工作,并不会根据值改变动态操作 后面,我是通过操作dom的方法,this.$refs.children这样直接操作子组件 <ProgressTwo ref="progressTwo" v-

  • 在vue项目中优雅的使用SVG的方法实例详解

    1.基础介绍 本文旨在介绍如何在项目中配置和方便的使用svg图标. 本文以vue项目为例,当然在react中的使用原理基本相似. svg图标可以直接通过img标签来使用,也可当做icon来使用. 本文是参考了鑫旭大佬的文章:SVG Sprite技术介绍. 2.配置 安装svg-sprite-loader.通过vue-cli脚手架创建的项目默认情况下会使用 url-loader 对svg进行处理,所以需要处理下: { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, l

  • Vue中使用webpack别名的方法实例详解

    在工作中,我们经常会写出这种代码: import MHeader from '../../components/m-header/m-header' @import "../../common/stylus/variable" @import "../../common/stylus/mixin" 即,需要引入公共文件,但是公共文件的文件路径里当前文件很远,那么就会形成上面示例中的那种路径很长的情况. 而因为文件目录是约定俗成的,不可轻易更改,无法修改相对路径.那么

  • Vue.js框架路由使用方法实例详解

    Vue.js框架路由使用方法实例详解

    Vue.js框架路由使用方法实例详解 html代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name='viewport' content='width=device-width,initial-

随机推荐