vue怎么在模板中引用公用js

在Vue模板中引用公用JS的方式包括：在main.js中引入、在组件内使用import、通过Vue.prototype挂载、在HTML模板直接引入。这些方式可以根据具体需求选择使用。下面将详细描述其中一种方式：在main.js中引入。

在Vue项目中，我们可以在main.js文件中引入公用的JavaScript文件，并将其挂载到Vue实例上。这样，所有的Vue组件都可以访问这个公用的JavaScript文件中的方法和变量。这种方式可以确保公用代码的复用性和维护性。

一、在`main.js`中引入公用JS

在Vue项目的入口文件main.js中，我们可以引入公用的JavaScript文件，并将其挂载到Vue实例上。具体步骤如下：

1.1 创建公用JS文件

首先，在项目的src目录下创建一个utils目录，并在其中创建一个common.js文件。在这个文件中编写公用的JavaScript代码，例如：

// src/utils/common.js
export function formatDate(date, format) {
  // 实现日期格式化的逻辑
  // ...
  return formattedDate;
}

1.2 在`main.js`中引入并挂载

接下来，在main.js文件中引入common.js文件，并将其挂载到Vue实例上：

// src/main.js
import Vue from 'vue';
import App from './App.vue';
import { formatDate } from './utils/common';
Vue.config.productionTip = false;
// 将公用方法挂载到Vue原型上，所有组件都可以通过this.$formatDate访问
Vue.prototype.$formatDate = formatDate;
new Vue({
  render: h => h(App),
}).$mount('#app');

1.3 在组件中使用

现在，您可以在任何Vue组件中通过this.$formatDate来调用公用的formatDate方法：

<template>
  <div>
    {{ formattedDate }}
  </div>
</template>
<script>
export default {
  data() {
    return {
      date: new Date(),
      formattedDate: ''
    };
  },
  created() {
    this.formattedDate = this.$formatDate(this.date, 'YYYY-MM-DD');
  }
};
</script>

二、在组件内使用`import`引入公用JS

除了在main.js中引入公用JS文件外，您还可以在组件内直接使用import来引入公用的JavaScript文件。这种方式适用于只在特定组件中使用公用方法的情况。

2.1 创建公用JS文件

同样地，首先在项目的src目录下创建一个utils目录，并在其中创建一个common.js文件：

// src/utils/common.js
export function calculateSum(a, b) {
  return a + b;
}

2.2 在组件中引入并使用

在需要使用公用方法的组件中，直接使用import引入common.js文件，并调用其中的方法：

<template>
  <div>
    Sum: {{ sum }}
  </div>
</template>
<script>
import { calculateSum } from '@/utils/common';
export default {
  data() {
    return {
      sum: 0
    };
  },
  created() {
    this.sum = calculateSum(5, 3);
  }
};
</script>

三、通过`Vue.prototype`挂载公用方法

除了在main.js中引入和在组件内使用import引入外，您还可以通过Vue.prototype挂载公用方法。这种方式可以在所有Vue组件中全局访问公用方法。

3.1 创建公用JS文件

首先，在项目的src目录下创建一个utils目录，并在其中创建一个common.js文件：

// src/utils/common.js
export function greet(name) {
  return `Hello, ${name}!`;
}

3.2 在`main.js`中引入并挂载

在main.js文件中引入common.js文件，并将其方法挂载到Vue实例上：

// src/main.js
import Vue from 'vue';
import App from './App.vue';
import { greet } from './utils/common';
Vue.config.productionTip = false;
// 将公用方法挂载到Vue原型上，所有组件都可以通过this.$greet访问
Vue.prototype.$greet = greet;
new Vue({
  render: h => h(App),
}).$mount('#app');

3.3 在组件中使用

现在，您可以在任何Vue组件中通过this.$greet来调用公用的greet方法：

<template>
  <div>
    {{ greeting }}
  </div>
</template>
<script>
export default {
  data() {
    return {
      name: 'Vue',
      greeting: ''
    };
  },
  created() {
    this.greeting = this.$greet(this.name);
  }
};
</script>

四、在HTML模板中直接引入公用JS

如果您希望在Vue项目的HTML模板中直接引入公用的JavaScript文件，可以在public/index.html文件中通过<script>标签引入。这种方式适用于需要在整个项目中全局使用的公用方法。

4.1 创建公用JS文件

首先，在项目的public目录下创建一个common.js文件：

// public/common.js
function showMessage(message) {
  alert(message);
}

4.2 在`index.html`中引入

在public/index.html文件中，通过<script>标签引入common.js文件：

<!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>
  <noscript>
    <strong>We're sorry but this website doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
  </noscript>
  <div id="app"></div>
  <!-- 引入公用JS文件 -->
  <script src="./common.js"></script>
</body>
</html>

4.3 在组件中使用

在任何Vue组件中，您都可以直接使用showMessage方法：

<template>
  <div>
    <button @click="showMessage('Hello, Vue!')">Show Message</button>
  </div>
</template>
<script>
export default {
  methods: {
    showMessage(message) {
      // 调用全局的showMessage方法
      window.showMessage(message);
    }
  }
};
</script>

五、结论

在Vue模板中引用公用JS的方法有多种，本文详细介绍了在main.js中引入、在组件内使用import、通过Vue.prototype挂载以及在HTML模板中直接引入四种方式。根据项目的具体需求选择合适的方式，可以有效地复用和维护公用代码。同时，在项目管理中，推荐使用研发项目管理系统PingCode和通用项目协作软件Worktile来提高团队协作效率和项目管理水平。