Vue에 공통 js 코드를 넣을 위치

Vue에는 공개 JS 코드를 저장할 수 있는 두 가지 위치가 있습니다. main.js 파일: Vue 인스턴스를 초기화하고 전역 구성을 설정하여 모든 구성 요소에서 공개 코드에 액세스할 수 있도록 하는 데 사용됩니다. public/ 디렉토리의 JS 파일: CDN 또는 서버를 통해 페이지에 로드될 수 있습니다.

Vue에서 공개 JS 코드가 저장되는 위치

Vue.js에서 공개 JS 코드는 일반적으로 다음 두 위치에 배치됩니다:

1. code> 파일 main.js 文件

main.js 文件是 Vue 项目的入口文件，主要用于初始化 Vue 实例和设置全局配置。将公用 JS 代码放置在这里可以确保它在所有组件中都可以访问。

示例：

<code class="javascript">// main.js
import Vue from 'vue'
import MyGlobalFunc from './utils/myGlobalFunc'

Vue.component('my-component', {
  // ...
})

Vue.mixin({
  methods: {
    myGlobalFunc() {
      return MyGlobalFunc()
    }
  }
})</code>

2. public/ 目录中的 JS 文件

public/ 目录用于存放静态资源，例如 CSS、JS 和图像。将公用 JS 代码放置在这里可以让它们通过 CDN 或服务器直接加载到页面中。

示例：

在 public/js/utils.js

main.js 파일은 Vue 프로젝트의 항목 파일로 주로 Vue 인스턴스를 초기화하고 전역 구성을 설정하는 데 사용됩니다. 여기에 공통 JS 코드를 배치하면 모든 구성 요소에서 액세스할 수 있습니다.

🎜🎜예: 🎜🎜

<code class="javascript">export function myGlobalFunc() {
  // ...
}</code>

🎜🎜2. public/ 디렉터리의 JS 파일 🎜🎜🎜public/ 디렉터리는 CSS와 같은 정적 리소스를 저장하는 데 사용됩니다. , JS 및 이미지. 여기에 공통 JS 코드를 배치하면 CDN 또는 서버를 통해 페이지에 직접 로드할 수 있습니다. 🎜🎜🎜예: 🎜🎜🎜 public/js/utils.js에서: 🎜

<code class="javascript">// MyComponent.vue
<script>
import { myGlobalFunc } from '@/js/utils'

export default {
  methods: {
    myMethod() {
      myGlobalFunc()
    }
  }
}
</script></code>

🎜그런 다음 구성 요소에서 사용: 🎜rrreee

위 내용은 Vue에 공통 js 코드를 넣을 위치의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!