vue文件引入（说人话）

vue文件引入（说人话）

初学vue的时候,对文件的引入产生了疑惑，import 与 @import，export 与 export default [手动黑人问号]，在此总计一下。
vue 中的文件引入大致分为四类：

1.引入第三方组件

import Vue from ‘vue’
往往这类写法是基于依赖项的，在 package.json 文件中能找到配置，并且 项目初始化的时候会打进 node_modules 文件夹中

2.引入自定义方法

引入方式一：

import { Message } from ‘element-ui’
import { apple,orange } from ‘@/assets/js/fruits.js’

js 写法：

// fruits.js 用 “export”
export function apple(options) {
	console.log('this is apple')
}

调用

Message()
apple()
orange()

引入方式二：

import ele from ‘element-ui’
import fruits from ‘@/assets/js/fruits.js’

js 写法：

// fruits.js 用 “export default”
export default function apple(options) {
	console.log('this is apple')
}

调用
ele.Message()
fruits.apple()
fruits.orange

3.导入css文件

全局引入

// main.js
import '@/assets/styles'

vue文件内引入

<style scope>
 @import './fruits.css'; 
</style>

4.组件引入

**自定义组件（.vue）**导入

import fruits from ‘./components’
import meat from ‘./components’