Vue如何基于es6导入外部js文件

Vue可以基于ES6语法通过import关键字来导入外部的JavaScript文件，这个功能比起使用传统的<script>标签更为灵活和高效。下面是详细的步骤：

1. 创建Vue项目

首先需要安装Vue脚手架（可以使用npm或yarn进行安装），使用以下命令可以快速创建一个Vue项目：

vue create my-project

2. 创建外部JavaScript文件并导出

接下来，我们需要创建一个JavaScript文件并将其导出，可以使用ES6语法中的export关键字，在文件中声明一个变量或函数，再通过export关键字将其导出。比如：

// mathUtils.js
export function add(a, b) {
  return a + b;
}

3. 导入外部JavaScript文件

在Vue的组件中，可以使用import关键字来导入我们之前定义的外部JavaScript文件。首先在组件的开头添加以下代码：

import { add } from 'mathUtils.js';

注意，这里的路径要相对于使用import关键字的文件，我们之前创建的mathUtils.js文件在同一层级目录下，所以直接写mathUtils.js即可。

接着，在Vue组件的methods属性中调用add函数：

export default {
  name: 'MyComponent',
  methods: {
    myMethod() {
      const sum = add(1, 2);
      console.log(sum); // 输出 3
    }
  }
}

这样就可以在Vue组件中使用之前定义的add函数了。

示例1：在Vue组件中导入lodash库

另一个例子是，在Vue组件中导入外部的第三方库。如下面的示例中，我们在Vue组件中导入了lodash库，并在myMethod函数中使用lodash的isEmpty函数：

import _ from 'lodash';

export default {
  name: 'MyComponent',
  methods: {
    myMethod() {
      const arr = [];
      console.log(_.isEmpty(arr)); // 输出 true
    }
  }
}

示例2：在Vue项目中导入CSS文件

有时候我们需要在Vue组件中导入CSS文件。在Vue中，可以使用import关键字在组件中导入CSS文件，然后在Vue组件的style属性中使用。

首先在组件中导入CSS文件：

import './my-style.css';

在my-style.css文件中定义CSS样式：

.my-class {
  color: red;
}

最后，在Vue组件的template属性中应用样式：

<template>
  <div class="my-class">
    这段文本将会显示为红色。
  </div>
</template>

这样就可以在Vue组件中导入并使用CSS文件了。

总结一下，以上几个示例展示了Vue如何基于ES6语法导入外部的JavaScript文件、第三方库和CSS文件。使用import关键字来导入外部文件可以更灵活、高效地管理和使用代码。