vue怎么导入原生js

要在Vue项目中导入原生JavaScript，可以通过全局引入、组件内引入、或使用插件等方式，具体取决于使用场景和需求。 下面将详细描述如何在Vue项目中导入和使用原生JavaScript。

一、全局引入

全局引入原生JavaScript文件适用于那些需要在整个应用程序中使用的脚本，例如第三方库或工具脚本。

1.1 在HTML文件中引入

你可以直接在 public/index.html 文件中通过 <script> 标签引入JavaScript文件。这种方法适用于那些不需要模块化的脚本文件。

<!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>
</head>
<body>
  <div id="app"></div>
  <script src="path/to/your/script.js"></script>
</body>
</html>

1.2 在主入口文件中引入

如果你使用的是Vue CLI创建的项目，可以在 main.js 文件中通过 import 或 require 引入JavaScript文件。

import Vue from 'vue';
import App from './App.vue';
import './assets/js/your-script.js'; // 引入你的JS文件
new Vue({
  render: h => h(App),
}).$mount('#app');

二、组件内引入

如果你只需要在特定组件中使用JavaScript文件，可以在组件内部引入。

2.1 使用 `import` 或 `require`

在Vue组件的 <script> 部分，你可以直接使用 import 或 require 引入JavaScript文件。

<template>
  <div>
    <!-- Your template code -->
  </div>
</template>
<script>
import customScript from '@/assets/js/custom-script.js';
export default {
  name: 'YourComponent',
  mounted() {
    customScript();
  },
};
</script>
<style scoped>
/* Your styles */
</style>

三、使用插件

如果你需要在Vue项目中使用第三方JavaScript库，可以通过安装相关的npm包并在项目中引入。

3.1 安装第三方库

首先，通过npm或yarn安装第三方库，例如 lodash：

npm install lodash

3.2 在组件中引入

然后在你的Vue组件中引入并使用：

<template>
  <div>
    <!-- Your template code -->
  </div>
</template>
<script>
import _ from 'lodash';
export default {
  name: 'YourComponent',
  mounted() {
    let array = [1, 2, 3];
    let reversedArray = _.reverse(array);
    console.log(reversedArray); // [3, 2, 1]
  },
};
</script>
<style scoped>
/* Your styles */
</style>

四、通过Webpack配置

有时你可能需要对Webpack进行配置，以便更好地管理JavaScript文件的引入。

4.1 配置 `vue.config.js`

在 vue.config.js 文件中，你可以对Webpack进行自定义配置，以便处理特殊的JavaScript文件。

module.exports = {
  configureWebpack: {
    module: {
      rules: [
        {
          test: /.js$/,
          use: 'babel-loader',
          exclude: /node_modules/,
        },
      ],
    },
  },
};

4.2 在项目中引入

配置完成后，你可以在项目中任意位置引入JavaScript文件。

五、总结

导入原生JavaScript文件到Vue项目中有多种方法，选择哪一种方法取决于具体的需求和使用场景。全局引入适用于需要在整个应用中使用的脚本，组件内引入适用于特定组件，使用插件可以方便地引入第三方库，而通过Webpack配置则可以更灵活地管理JavaScript文件的加载和处理。

通过正确的方法引入原生JavaScript文件，可以让你的Vue项目更加灵活和强大。如果你有任何项目管理的需求，可以考虑使用 研发项目管理系统PingCode 和 通用项目协作软件Worktile，以提高团队的协作效率和项目管理水平。