vue cli 如何引入 js

Vue CLI 引入 JS 文件的方法有以下几个：1、全局引入；2、在单个组件中引入；3、通过插件的方式引入。这些方法各有优劣，适用于不同的使用场景。全局引入适用于需要在多个组件中使用的JS文件；在单个组件中引入适用于只在特定组件中使用的JS文件；通过插件方式引入则适合于一些需要在Vue实例中全局使用的工具或库。

一、全局引入

全局引入是指将JS文件在整个项目中都可以使用。可以通过修改main.js文件来实现。

在src目录下创建JS文件

在src目录下创建一个新的JS文件，例如src/global.js，并在其中编写代码。
```
// src/global.js
export function greet() {
    console.log('Hello from global.js!');
}
```

修改main.js文件

在main.js文件中引入这个JS文件。

// src/main.js
import Vue from 'vue'
import App from './App.vue'
import { greet } from './global'
Vue.config.productionTip = false
new Vue({
  render: h => h(App),
  created() {
    greet();
  }
}).$mount('#app')

这样，greet函数就可以在任何地方使用。

二、在单个组件中引入

如果JS文件只在特定组件中使用，可以在该组件中引入。

在组件中引入JS文件

在src/components目录下创建一个新的组件，例如src/components/HelloWorld.vue，并在其中引入JS文件。

// src/components/HelloWorld.vue
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>
<script>
import { greet } from '@/global'
export default {
  name: 'HelloWorld',
  data() {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  created() {
    greet();
  }
}
</script>

这样，greet函数就可以在这个组件中使用。

三、通过插件的方式引入

如果需要在整个Vue实例中全局使用某个工具或库，可以通过插件的方式引入。

创建一个插件

在src目录下创建一个新的JS文件，例如src/plugins/myPlugin.js，并在其中编写插件代码。

// src/plugins/myPlugin.js
export default {
  install(Vue) {
    Vue.prototype.$greet = function() {
      console.log('Hello from myPlugin!');
    }
  }
}

修改main.js文件

在main.js文件中引入这个插件并使用它。

// src/main.js
import Vue from 'vue'
import App from './App.vue'
import myPlugin from './plugins/myPlugin'
Vue.use(myPlugin)
Vue.config.productionTip = false
new Vue({
  render: h => h(App),
  created() {
    this.$greet();
  }
}).$mount('#app')

这样，$greet方法就可以在整个Vue实例中使用。

四、通过异步加载引入

在某些情况下，您可能希望在特定条件下异步加载JS文件。这可以通过动态import来实现。

在组件中异步加载JS文件

在src/components目录下创建一个新的组件，例如src/components/HelloWorld.vue，并在其中异步加载JS文件。

// src/components/HelloWorld.vue
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  async created() {
    const { greet } = await import('@/global')
    greet();
  }
}
</script>

这样，greet函数就可以在特定条件下异步加载并使用。

总结

总结起来，通过Vue CLI引入JS文件有多种方式，包括全局引入、在单个组件中引入、通过插件的方式引入以及异步加载。选择哪种方式取决于具体的使用场景和需求。全局引入适合需要在多个组件中使用的JS文件，而在单个组件中引入则适合于只在特定组件中使用的JS文件。通过插件的方式引入适合于一些需要在Vue实例中全局使用的工具或库，异步加载则适合在特定条件下动态加载JS文件。根据具体情况选择合适的方法，可以有效提高代码的可维护性和可扩展性。

相关问答FAQs：

1. 如何在Vue CLI中引入外部的JavaScript文件？

在Vue CLI中，可以通过以下步骤引入外部的JavaScript文件：

步骤1：将JavaScript文件放置在项目的合适位置，例如放置在src/assets/js目录下。

步骤2：在Vue组件中使用import语句引入JavaScript文件。例如，在需要引入JavaScript文件的组件中，可以添加以下代码：

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

步骤3：使用引入的JavaScript文件。根据需要，在Vue组件中调用引入的JavaScript文件中的函数或变量。例如，在Vue组件的方法中调用引入的JavaScript文件中的函数：

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

请注意，@符号表示的是src目录的别名，这是Vue CLI中的一个常用配置。

2. 如何在Vue CLI中引入第三方的JavaScript库？

如果需要在Vue CLI中引入第三方的JavaScript库，可以按照以下步骤进行操作：

步骤1：使用npm或yarn安装所需的第三方JavaScript库。例如，如果要安装jQuery，可以运行以下命令：

npm install jquery

步骤2：在Vue组件中使用import语句引入第三方JavaScript库。例如，在需要引入jQuery的组件中，可以添加以下代码：

import $ from 'jquery';

步骤3：使用引入的第三方JavaScript库。根据需要，在Vue组件中调用引入的第三方JavaScript库中的函数或变量。例如，在Vue组件的方法中使用jQuery：

methods: {
  myFunction() {
    $('#myElement').addClass('highlight');
  }
}

请注意，使用第三方JavaScript库之前，请确保已将其正确安装并引入。

3. 如何在Vue CLI中使用外部CDN链接引入JavaScript文件？

如果希望在Vue CLI中使用外部CDN链接引入JavaScript文件，可以按照以下步骤进行操作：

步骤1：在Vue组件的HTML模板中，使用<script>标签引入外部CDN链接的JavaScript文件。例如，在模板中添加以下代码：

<script src="https://cdn.example.com/myScript.js"></script>

步骤2：使用外部CDN链接引入的JavaScript文件。根据需要，在Vue组件中调用外部CDN链接引入的JavaScript文件中的函数或变量。例如，在Vue组件的方法中调用外部CDN链接引入的JavaScript文件中的函数：

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

请注意，使用外部CDN链接引入JavaScript文件时，请确保网络连接正常，并且所引入的文件可在浏览器中正常访问。

文章标题：vue cli 如何引入 js，发布者：不及物动词，转载请注明出处：https://worktile.com/kb/p/3627001