Vue中的import from

最新推荐文章于 2024-09-04 14:24:09 发布

原创最新推荐文章于 2024-09-04 14:24:09 发布 · 6k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#vue #json #babel #js

Vue 专栏收录该内容

28 篇文章

订阅专栏

本文介绍了Vue中import from的使用，可引入.js、.json、.vue等文件。引入JS和JSON文件时，路径可为相对或绝对，后缀名可写可不写，优先级按webpack.base.conf.js设置。引入Vue组件不用写大括号，引用Vue文件需在components里挂载，使用时名称大小写均可。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue中的import from

大家都知道，import from 是用来引入一些文件的，在vue中，可能有.js文件.json文件.vue文件
在JS和JSON文件引入的时候，往往需要写入一些

//例如数组
export const a=[]
//例如对象
export const b={}
//例如函数
export function c(){}

在其他文件中需要引入的时候，就写上，只引入一个的时候可写可不写大括号

import {a,b,c} from '你的路径'

路径可以是相对路径也可以是绝对路径，后缀名可写可不写，他会按照你在webpack.base.conf.js文件中的设置来绝对后缀名选择的优先级
比如你如果设置的是这样

module.exports = {
      resolve: {
        extensions: ['.js', '.vue', '.json'],
        alias: {
          '@': resolve('src')
        }
      }
    ...
    }

他就会按照JS文件最大优先级这样来决定优先级

引入Vue组件的话也是这样，不过不用写大括号，直接引用，例如

import StatisticsCard from './components/StatisticsCard'

后缀名可写可不写，优先级顺序也是按照上面的来走的、
引用Vue文件有个特殊的地方，就是要在components里面挂载一下他，例如

  components: {
    StatisticsCard
  },

而在使用他的时候，名称可以是StatisticsCard，也可以是Statistics-Card，大小写都行