vue引入自己写的js文件

要在 Vue 中引入自己写的 JavaScript 文件，可以通过以下步骤实现：

1. 在 Vue 项目的 src 目录下创建一个 js 文件夹，用于存放自己写的 JavaScript 文件。
2. 在需要引入 JavaScript 文件的组件中，使用 import 语句引入该文件，例如：

import myScript from '@/js/myScript.js'

其中，@ 表示 src 目录，myScript.js 是自己写的 JavaScript 文件名。

3. 在组件的 methods 中使用自己写的 JavaScript 函数，例如：

methods: {
  myFunction() {
    myScript.myFunction();
  }
}

其中，myFunction() 是自己写的 Vue 方法，在该方法中调用了 myScript.js 文件中的 myFunction() 函数。

需要注意的是，如果自己写的 JavaScript 文件需要使用 Vue 的一些功能，例如 $emit、this.$refs 等，需要在文件中先引入 Vue，例如：

import Vue from 'vue'

这样才能正常使用 Vue 的功能。

相关问题

vue文件引入静态js文件的方法

在Vue项目中，要引入静态的JavaScript文件，我们可以有以下步骤：

1. 在项目的public目录下新建一个js文件夹，用于存放静态的JavaScript文件。

2. 将需要引入的JavaScript文件放在js文件夹中。

3. 在vue文件中通过script标签引入静态的JavaScript文件，可以采用相对路径或绝对路径的方式。

例如，在vue文件中引入位于public/js目录下的test.js文件，代码如下：

<script src="../js/test.js"></script>

如果test.js文件的路径是项目根目录下的/public/js/test.js，则可以这样写：

<script src="/js/test.js"></script>

当然，在Vue项目中也可以通过webpack的方式将静态的JavaScript文件打包到最终的js文件中，这样就不需要单独引入。在webpack配置文件中，配置entry入口时，指定需要打包的静态JavaScript文件即可。

vue按需引入js文件

Vue.js的按需引入功能可以通过Webpack的Code Splitting特性实现，使用Webpack的import()函数动态加载组件或模块，从而实现按需引入。

举个例子，如果你想按需引入一个名为"my-component"的组件，可以在Vue的单文件组件中这样写：

export default {
  components: {
    'my-component': () => import('./MyComponent.vue')
  }
}

这样，在组件被渲染的时候才会动态加载对应的文件，从而实现按需引入。

当然，如果你使用的是Vue CLI，你可以使用它提供的@vue/cli-plugin-babel-plugin-component插件来自动化按需引入的过程。你只需要在Babel配置文件中添加如下代码：

plugins: [
  [
    'component',
    {
      libraryName: 'your-library-name',
      styleLibraryName: 'your-style-library-name'
    }
  ]
]

然后在你需要引入组件的地方直接使用即可：

import { MyComponent } from 'your-library-name'

Vue.use(MyComponent)

这样就可以自动按需引入组件了。