Vue中常用的import引入方式详解
在Vue项目中，import语句是非常常用的，它可以帮助我们引入不同的模块、文件、组件、插件等，以满足项目的需求。下面是详解Vue中常用的几种import引入方式。
1. 引入第三方插件
在Vue项目中，我们经常需要引入第三方插件，例如 echarts、lodash 等。引入第三方插件可以使用以下方式：
```javascript
import echarts from 'echarts';
```
这里的`echarts`是第三方插件的名称，我们可以通过import语句将其引入我们的项目中。
2. 引入工具类
在Vue项目中，我们经常需要引入工具类，例如 axios、fetch 等。引入工具类可以使用以下两种方式：
2.1. 引入单个方法
我们可以使用以下方式引入单个方法：
```javascript
import { axiosfetch } from './util';
```
这里的`axiosfetch`是工具类中的一个方法，我们可以使用花括号将其引入我们的项目中。
2.2. 引入成组的方法
我们也可以使用以下方式引入成组的方法：
```javascript
import * as tools from './libs/tools';
```
这里的`tools`是一个工具类，包含多个方法，我们可以使用`*`号将其所有方法引入我们的项目中。然后，我们可以使用以下方式调用这些方法：
```javascript
Vue.prototype.$tools = tools;
```
这样，我们可以通过`this.$tools.method`的方式调用这些方法。
export 和 export default 的区别
在引入工具类时，我们经常需要使用`export`和`export default`关键字，但是它们有什么区别呢？
export
`export`关键字用于导出单个方法或变量，我们可以使用以下方式导出一个方法：
```javascript
export function axiosfetch(options) {}
```
然后，我们可以使用以下方式引入这个方法：
```javascript
import { axiosfetch } from './util';
```
export default
`export default`关键字用于导出默认的方法或变量，我们可以使用以下方式导出默认的方法：
```javascript
export default function axiosfetch(options) {}
```
然后，我们可以使用以下方式引入这个方法：
```javascript
import axiosfetch from './util';
```
可以看到，使用`export default`关键字时，不需要使用花括号。
3. 导入 CSS 文件
在Vue项目中，我们经常需要引入 CSS 文件，以便美化我们的界面。我们可以使用以下方式引入 CSS 文件：
```javascript
import 'iview/dist/styles/iview.css';
```
这里的`iview.css`是我们需要引入的 CSS 文件。
4. 导入组件
在Vue项目中，我们经常需要引入组件，以便复用我们的代码。我们可以使用以下方式引入组件：
```javascript
import name1 from './name1';
import name2 from './name2';
```
然后，我们可以使用以下方式注册这些组件：
```javascript
components: {
name1,
name2,
}
```
这样，我们可以在我们的Vue组件中使用这些组件。
我们可以使用import语句引入不同的模块、文件、组件、插件等，以满足项目的需求。同时，我们也需要注意`export`和`export default`关键字的区别，以便正确地引入和使用这些方法。
