Vue之import

经常看到vue的代码里面有import，这里把几种情况总结一下。

case1：

如果使用export default 导出的对象，在import的时候，可以任意命名。

<template><div><label>cat</label><label>cat</label><label>cat</label><label>cat</label><label>cat</label><label>cat</label></div>
</template>
<script>
export default {name: 'MyCat'
}
</script>

导入：这里的名字可以任意命名

import MyCat from './cat'

case2：

使用export导出的成员，必须严格按照导出时候的名称，来使用{ }按需接收

使用export导出的成员，如果想换个变量名称接收，可以使用as来起别名，

实例如下：

export { default as AppHeader } from './header'

case3：

使用import可以导入文件夹

那么这个文件夹下面，会有一个index.js 文件，实际上是导入这个文件。

index.js可以这么写

export { default as Navbar } from './Navbar'
export { default as Sidebar } from './Sidebar'
export { default as AppMain } from './AppMain'
export { default as AppHeader } from './header'

如果还找不到index.js 那么还会去找index.vue文件

case4：

import father from '@/components/father'

这里的@的含义是等价于 /src 这个目录，避免写麻烦又易错的相对路径

Vue之import相关推荐

Vue中import引入模块路径时的@符号
Vue中import引入模块路径时的@符号 1.ES6 模块主要有两个功能:export 和 import export:用户对外输出本模块(一个文件可以理解为一个模块,比如 aaa.js bbb.j ...
vue 文件导入服务器,Vue 如何import服务器上的js配置文件
背景项目中有一个本地配置文件: // src/image-position.js export default { label: '首页', value: 'home', data: [ { lab ...
vue中import引入模块路径中@符号是什么意思
在编写vue文件中引入模块 import model from "@/common/model"; 这里路径前面的"@"符号表示什么意思? resolve: { ...
vue中import和require的用法
Import(模块.文件)引入方式引入js文件在用的那一页,引入文件 Import tools from './tools.js' 相应的js文件,必须暴露出来引入组件 Import Hello ...
Vue中import与@import的区别及使用场景
import script中的import是js的语法, 是在js中去引用css文件 (ES6)模块化规范:默认导入语法 import 接收名称 from '模块标识符' 使用导入组件 import ...
oracle 波浪号不识别,Vue中@import路径不能使用波浪号（~）吗？
Vue中类似这样引入css, @import '~abc/dist/abc.full.css' 编译会报错,Error:Fail to find '~abc/dist/abc.full.css' 用最 ...
webpack vue router import() 打包后单个js文件名称自定义
webpack 配置输出文件名 output: {path: path.resolve(__dirname, 'public'),filename: '[name].[hash:8].js',chun ...
vue引用import“@/路径“ 有下划线并且 crtl+鼠标无法点进去
点击file 进入到setting中选择webpack,指定到@vue\cli-service\webpack.config.js文件关闭idea重启即可,下划线就消失了CTRL+鼠标也能进到引用 ...
怎么将vue模板转换为html,vue中自定义html文件的模板
如果默认生成的 HTML 文件不适合需求,可以创建/使用自定义模板. 一是通过 inject 选项,然后传递给定制的 HTML 文件.html-webpack-plugin 将会自动注入所有需要的 C ...

Vue之import

Vue之import相关推荐

最新文章

热门文章