vue怎么引入自己写的js

Vue引入自己写的JS的方法有：直接在Vue组件中引入、通过Webpack配置引入、在Vue实例的生命周期钩子中引入。其中，直接在Vue组件中引入是一种简单且常见的方法，可以确保脚本在组件创建时被加载和执行。下面将详细描述这种方法。

一、直接在Vue组件中引入

在Vue组件中直接引入外部的JS文件，是最直接且常见的方法之一。你可以在需要的组件中使用import语句直接导入JS文件，然后在组件的生命周期钩子中调用它们。

<script>
import myScript from '@/path/to/your/script.js';
export default {
  name: 'MyComponent',
  mounted() {
    myScript();
  }
}
</script>

这种方法确保了你的JS代码在组件被挂载到DOM上之后立即执行，适用于需要在组件加载时执行的脚本。

二、通过Webpack配置引入

使用Webpack配置引入JS文件，可以方便地管理和打包你的JS文件。Webpack是Vue CLI默认使用的打包工具，通过配置Webpack，你可以自定义引入外部的JS文件。

1. 配置Webpack

在你的Vue项目根目录下找到vue.config.js文件，如果没有，创建一个。添加以下配置：

const path = require('path');
module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        '@js': path.resolve(__dirname, 'src/assets/js')
      }
    }
  }
}

以上配置创建了一个路径别名@js，指向src/assets/js目录，方便在Vue组件中引用。

2. 在Vue组件中使用

<script>
import myScript from '@js/myScript.js';
export default {
  name: 'MyComponent',
  mounted() {
    myScript();
  }
}
</script>

这种方法使用路径别名，使得引用JS文件变得更加简洁和清晰。

三、在Vue实例的生命周期钩子中引入

有时候，你可能需要在整个应用范围内使用某个JS文件，这种情况下，可以在Vue实例的生命周期钩子中引入。

1. 在main.js中引入

在你的Vue项目的入口文件main.js中引入JS文件，这样可以确保在应用启动时加载和执行JS文件。

import Vue from 'vue';
import App from './App.vue';
import myScript from '@/path/to/your/script.js';
Vue.config.productionTip = false;
new Vue({
  render: h => h(App),
  created() {
    myScript();
  }
}).$mount('#app');

2. 在生命周期钩子中使用

在Vue实例的created钩子中调用你的JS脚本，这样可以确保在Vue实例创建时执行JS脚本。

import Vue from 'vue';
import App from './App.vue';
import myScript from '@/path/to/your/script.js';
Vue.config.productionTip = false;
new Vue({
  render: h => h(App),
  created() {
    myScript();
  }
}).$mount('#app');

这种方法适用于需要在整个应用范围内使用的JS脚本，比如全局配置、初始化操作等。

四、结合Vue的插件机制

如果你的JS文件提供的功能是可以在多个组件中复用的，可以考虑将其封装成一个Vue插件。

1. 创建Vue插件

创建一个新的JS文件，将你的功能封装成一个Vue插件。

// myPlugin.js
export default {
  install(Vue) {
    Vue.prototype.$myMethod = function() {
      // your JS logic here
    };
  }
}

2. 在main.js中使用插件

在你的Vue项目的入口文件main.js中引入并使用这个插件。

import Vue from 'vue';
import App from './App.vue';
import myPlugin from '@/path/to/your/myPlugin.js';
Vue.config.productionTip = false;
Vue.use(myPlugin);
new Vue({
  render: h => h(App)
}).$mount('#app');

3. 在组件中使用

在任何需要使用这个JS功能的组件中，你可以通过this.$myMethod()来调用。

<script>
export default {
  name: 'MyComponent',
  mounted() {
    this.$myMethod();
  }
}
</script>

这种方法使得你的JS功能可以在整个Vue应用中复用，增强了代码的可维护性和可扩展性。

五、通过CDN引入

如果你的JS文件存放在外部服务器上，可以通过CDN的方式引入。在Vue项目的public/index.html文件中添加如下代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue App</title>
  <script src="https://cdn.example.com/your-script.js"></script>
</head>
<body>
  <div id="app"></div>
</body>
</html>

然后在组件中直接使用该脚本提供的功能。

六、总结

综上所述，Vue引入自己写的JS文件有多种方法，包括直接在Vue组件中引入、通过Webpack配置引入、在Vue实例的生命周期钩子中引入、结合Vue的插件机制引入以及通过CDN引入。选择哪种方法主要取决于你的具体需求和项目结构。合理使用这些方法，可以让你的Vue项目更加模块化和可维护。

在实际开发中，经常会使用类似PingCode这样的研发项目管理系统和Worktile这样的通用项目协作软件来提高团队的协作效率。通过合理配置和使用这些工具，可以更好地管理项目进度和质量。