vue引入自己写的js（vue 直接引入）

简介

在开发网页应用时，我们经常会使用Vue.js作为前端框架，通过Vue来管理页面的组件化和数据流动。而有时候我们可能会编写一些自定义的js文件来实现一些特定的功能，那么在Vue应用中如何引入自己编写的js文件呢？本文将详细介绍如何在Vue项目中引入自己编写的js文件。

多级标题

1. 创建自己的js文件

2. 在Vue项目中引入自己编写的js文件

3. 在Vue组件中使用自己编写的js文件

内容详细说明

1. 创建自己的js文件

首先，我们需要创建自己的js文件，通常我们会在src目录下创建一个assets文件夹，用来存放静态文件，比如图片、样式文件、以及我们自己编写的js文件。在assets文件夹下创建一个名为utils.js的文件，并在其中编写我们需要的功能函数。比如，我们创建一个函数add，实现两个数相加的功能：

```js

export function add(a, b){

return a + b;

```

2. 在Vue项目中引入自己编写的js文件

接下来，在Vue项目中引入我们自己编写的js文件。打开main.js文件，我们可以通过import语句将utils.js文件引入进来：

```js

import { add } from './assets/utils.js';

Vue.prototype.$add = add;

```

在以上代码中，我们将utils.js文件中的add函数挂载到Vue实例的原型上，这样在整个Vue项目中都可以使用该函数。

3. 在Vue组件中使用自己编写的js文件

最后，我们可以在Vue组件中使用我们自己编写的js文件中的函数。在组件的methods中调用add函数：

```html

```

通过以上操作，我们成功引入并使用了自己编写的js文件。现在我们可以在Vue项目中封装一些通用的功能函数，以提高开发效率和代码复用性。

总结

在Vue项目中引入自己编写的js文件并不复杂，只需要在js文件里编写我们需要的功能函数，然后通过import语句引入到Vue项目中即可。通过这种方式，我们可以更好地组织和管理我们的代码。希望本文可以帮助大家更好地使用Vue.js进行开发。