Vue 导入文件import、路径@和.的区别

***import：

html文件中，通过script标签引入js文件。
而vue中，通过import xxx from xxx路径的方式导入文件，不光可以导入js文件。

from前的：
“xxx”指的是为导入的文件起一个名称，不是指导入的文件的名称，相当于变量名。

from后的：

“xxx路径”指的是文件的相对路径.

例如：

在路由index.js中，导入apple.vue和banana.vue

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

或者在某个.vue文件中导入css

import  '../assets/xxx.css'

当然导入css还可以在.vue文件里的

<style>/*当然这个@和下面所说的代表src的@不是一回事，这个只是一种引入css的一种方式*/@import "../css/style.css";
</style>

以上例子，通过两种方式定义相对路径，并且省略了文件的后缀名。

***.方式
以父子目录的方式定义相对路径
. /指当前目录
. ./指当前目录的上一层目录

***@方式
以根目录的方式定义相对路径
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'),}}
}

转载于:https://www.cnblogs.com/taohuaya/p/10651902.html

Vue 导入文件import、路径@和.的区别相关推荐

vue下载文件自定义路径_npm 自定义配置文件下载路径
Nodejs 内置的npm默认会把模块安装在c盘的用户AppData目录下,以下步骤是为了让大家学习如何更改npm 安装目录的首先你可以使用cmd命令进行查看当前电脑的npm 安装路径. 输入 np ...
Vue导入文件调用后报错vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in render: TypeError: Object(...) is not
问题所在: 导入的文件没有导出module.exports
Vue的导入（import）和导出（export、export default）
一.import import在引入文件路径时,引入一个依赖包,不需要相对路径.如:import app from 'app';,但引入一个自己写的js文件,是需要相对路径的.如:import app ...
vue+element-ui文件导出模板及导入xlsx文件
vue文件的导出与导入前言一.导出模板和导入xlsx文件二.导出JS方法,单独写示例 1.接口方法 2.页面调用导出方法三.导入表格JS代码前言当我们做后台管理的时候,不免会遇到导出模版, ...
Vue中使用配置文件vue.config.js简化文件夹路径
一.首先创建vue.config.js(名字不能更改) 二.使用vue.config.js为常用的文件路径进行标识 module.exports = {configureWebpack: {resol ...
vue elementui + Java实现获取本地文件夹路径，绝对路径。（Ctrl C+V 即用）
实现获取本地文件夹路径,不支持文件获取,文件上穿选择文件夹得弹框效果前端代码 <!DOCTYPE html> <html> <head><head> ...
js相对路径相关（比如：js中的路径依赖导入该js文件的路径）
问题描述: 前几天调用同事的js接口文件,在他自己的html测试页面ok,在我这边调用时出现问题. debug过程中,将该测试html移到其他位置都不行,放到原html测试页面同层次路径下是OK的. ...
python import os.path_Python常用模块os.path——文件及路径操作
os.path.abspath(path) 输入相对路径,返回绝对路径 Python 3.7.0 (v3.7.0:1bf9cc5093, Jun 27 2018, 04:59:51) [MSC v.1 ...
Vue导入TradingView（无charting_library.min.js文件的包导入方法）
Vue导入TradingView(无charting_library.min.js文件的包导入方法) 你申请到的包很可能不是有charting_library.min.js文件的那个版本,而是char ...

Vue 导入文件import、路径@和.的区别

Vue 导入文件import、路径@和.的区别相关推荐

最新文章

热门文章