vue 里面怎么引js文件

在Vue项目中引入JavaScript文件的方法有多种，包括在组件中使用script标签、通过Vue CLI配置文件引入、在main.js中全局引入等。 下面将详细介绍其中一种方法：在组件中使用script标签。

一、在组件中使用script标签

在Vue组件中，最常见的方法是直接在组件的 <template> 部分之后使用 <script> 标签来引入JavaScript文件。这种方法的优点是简单易用，适用于大多数情况。下面是具体步骤：

创建JavaScript文件：在你的项目目录中创建一个JavaScript文件。例如，在src/assets目录下创建一个文件example.js。

// src/assets/example.js
export function exampleFunction() {
  console.log('This is an example function');
}

在Vue组件中引入：在你要使用这个函数的Vue组件中，通过import语句引入这个JavaScript文件。

<template>
  <div>
    <h1>Hello Vue!</h1>
  </div>
</template>
<script>
import { exampleFunction } from '@/assets/example.js';
export default {
  name: 'ExampleComponent',
  created() {
    exampleFunction();
  }
}
</script>
<style scoped>
h1 {
  color: blue;
}
</style>

在上面的代码中，exampleFunction 会在组件创建时被调用，并在控制台输出信息。

二、通过Vue CLI配置文件引入

如果你需要在全局范围内引入JavaScript文件，可以通过修改Vue CLI的配置文件来实现。

创建JavaScript文件：同样在src/assets目录下创建你的JavaScript文件。

// src/assets/global.js
window.globalFunction = function() {
  console.log('This is a global function');
};

修改vue.config.js文件：在项目根目录下找到或创建vue.config.js文件，并添加如下配置。

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config
      .plugin('html')
      .tap(args => {
        args[0].title = 'Your App Title';
        return args;
      });
    config
      .entry('app')
      .add('./src/assets/global.js');
  }
};

在组件中使用：你可以直接在任何Vue组件中使用全局定义的函数。

<template>
  <div>
    <h1>Hello Vue!</h1>
  </div>
</template>
<script>
export default {
  name: 'ExampleComponent',
  created() {
    window.globalFunction();
  }
}
</script>
<style scoped>
h1 {
  color: blue;
}
</style>

三、在main.js中全局引入

你还可以在main.js中全局引入JavaScript文件，这样在整个应用中都可以使用它。

创建JavaScript文件：在src/assets目录下创建你的JavaScript文件。

// src/assets/global.js
window.globalFunction = function() {
  console.log('This is a global function');
};

在main.js中引入：

// src/main.js
import Vue from 'vue';
import App from './App.vue';
import '@/assets/global.js'; // 引入全局JavaScript文件
Vue.config.productionTip = false;
new Vue({
  render: h => h(App),
}).$mount('#app');

在组件中使用：同样可以在任何组件中使用这个全局函数。

<template>
  <div>
    <h1>Hello Vue!</h1>
  </div>
</template>
<script>
export default {
  name: 'ExampleComponent',
  created() {
    window.globalFunction();
  }
}
</script>
<style scoped>
h1 {
  color: blue;
}
</style>

四、使用外部库

有时候你可能需要引入外部的JavaScript库，比如jQuery或Lodash。这时候你可以使用npm或yarn来安装这些库，然后在你的组件或全局范围内引入它们。

安装外部库：例如，安装Lodash库。

npm install lodash

在组件中引入并使用：

<template>
  <div>
    <h1>Hello Vue!</h1>
  </div>
</template>
<script>
import _ from 'lodash';
export default {
  name: 'ExampleComponent',
  created() {
    console.log(_.join(['Hello', 'Vue'], ' '));
  }
}
</script>
<style scoped>
h1 {
  color: blue;
}
</style>

五、使用CDN引入外部库

如果你不想通过npm来安装外部库，可以直接在public/index.html中使用CDN引入。

在public/index.html中添加CDN链接：

<!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.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
</head>
<body>
  <div id="app"></div>
</body>
</html>

在组件中使用：

<template>
  <div>
    <h1>Hello Vue!</h1>
  </div>
</template>
<script>
export default {
  name: 'ExampleComponent',
  created() {
    console.log(_.join(['Hello', 'Vue'], ' '));
  }
}
</script>
<style scoped>
h1 {
  color: blue;
}
</style>

六、使用研发项目管理系统和通用项目协作软件

在开发过程中，管理和协作是至关重要的。研发项目管理系统PingCode 和 通用项目协作软件Worktile 是两个优秀的工具，可以帮助团队更高效地管理项目和任务。

PingCode 提供了全面的项目管理功能，能够帮助研发团队有效地追踪任务进度、管理需求和缺陷。它的高效协作平台和强大的报告功能，使团队可以更好地掌控项目进展。

Worktile 则是一款通用的项目协作软件，适用于各种类型的团队。它提供了任务分配、进度跟踪、团队沟通等功能，使团队成员可以更轻松地协同工作，提高整体工作效率。

这些工具不仅可以帮助团队提高效率，还可以确保项目按时完成，达到预期目标。在Vue项目中，通过合理引入和使用JavaScript文件，可以进一步提升项目的灵活性和功能性。

结论

在Vue项目中引入JavaScript文件的方法多种多样，包括在组件中使用script标签、通过Vue CLI配置文件引入、在main.js中全局引入以及使用外部库。根据具体需求选择合适的方法，可以显著提高开发效率和代码质量。同时，使用专业的项目管理和协作工具，如PingCode和Worktile，可以进一步提升团队的协作效率和项目管理水平。