淘先锋技术网

首页 1 2 3 4 5 6 7

要在Vue项目中加入共用的JavaScript文件,需要经过如下几个步骤。

首先,需要将共用的JavaScript文件放在项目中一个合适的位置,例如一个名为“utils”的文件夹下。在该文件夹下创建一个名为“index.js”的文件,该文件用于导出公共JavaScript函数和对象。

// utils/index.js
export const add = (a, b) =>{
return a + b
}
export const subtract = (a, b) =>{
return a - b
}

然后,需要在Vue项目中将该文件夹添加到webpack的alias中,以便可以在Vue组件中引用。

// webpack.config.js
var path = require('path')
module.exports = {
// ...
resolve: {
alias: {
'@utils': path.resolve(__dirname, 'src/utils/')
}
}
}

接着,在Vue组件中使用import语句导入所需的公共函数和对象。

<template>
<div>
<p>1 + 2 = {{ result }}</p>
</div>
</template>
<script>
import { add } from '@utils'
export default {
name: 'MyComponent',
data: function () {
return {
result: add(1, 2)
}
}
}
</script>

注意到可以使用webpack的alias别名来代替引用的路径。这样做可以减少代码的重复性,提高开发效率。

通过这样的方式,在Vue项目中加入共用的JavaScript文件和函数对象,可以提高代码的复用性和可维护性,减少代码的冗余性,让我们的开发更加高效。