vue 中怎么添加自己的js

在 Vue 中添加自己的 JavaScript 方法步骤如下：使用全局挂载、在组件内引入、通过插件方式引入。其中，在组件内引入是最常用且灵活的方法。通过在组件中定义和调用自己的JavaScript方法，你可以更好地控制其作用范围和生命周期，确保代码的可维护性和可读性。

一、使用全局挂载

在 Vue 项目中，全局挂载是将 JavaScript 方法或者库直接挂载到 Vue 的原型上，这样可以在任何 Vue 组件中直接调用这些方法。这种方式适合一些通用的工具方法。

1、在 `main.js` 文件中引入

首先，在你的 Vue 项目的主入口文件 main.js 中引入你想要添加的 JavaScript 文件或方法。假设你有一个 utils.js 文件，里面包含一些工具方法：

// utils.js
export function formatDate(date) {
    // 格式化日期的方法
    return new Date(date).toLocaleDateString();
}

然后，在 main.js 中引入并挂载到 Vue 原型上：

// main.js
import Vue from 'vue';
import App from './App.vue';
import { formatDate } from './utils';
Vue.prototype.$formatDate = formatDate;
new Vue({
    render: h => h(App),
}).$mount('#app');

2、在组件中使用

在任何组件中，你可以直接使用这个全局挂载的方法：

<template>
  <div>
    {{ formattedDate }}
  </div>
</template>
<script>
export default {
  data() {
    return {
      date: '2023-10-10'
    };
  },
  computed: {
    formattedDate() {
      return this.$formatDate(this.date);
    }
  }
};
</script>

二、在组件内引入

如果你只想在某个组件中使用你的 JavaScript 方法，可以直接在组件内引入。这种方式更加灵活，适合局部使用。

1、在组件中引入 JavaScript 文件

假设你有一个 helpers.js 文件，里面有一些辅助方法：

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

然后，在你的 Vue 组件中引入并使用这些方法：

<template>
  <div>
    Sum: {{ sum }}
  </div>
</template>
<script>
import { calculateSum } from './helpers';
export default {
  data() {
    return {
      num1: 10,
      num2: 20,
      sum: 0
    };
  },
  created() {
    this.sum = calculateSum(this.num1, this.num2);
  }
};
</script>

2、在组件中定义 JavaScript 方法

你也可以直接在组件的 methods 选项中定义 JavaScript 方法：

<template>
  <div>
    <button @click="showAlert">Click Me</button>
  </div>
</template>
<script>
export default {
  methods: {
    showAlert() {
      alert('Hello, this is your custom JavaScript method!');
    }
  }
};
</script>

三、通过插件方式引入

如果你有一组通用的功能，并且希望在多个项目中复用，可以考虑将这些方法封装为 Vue 插件。

1、创建插件

首先，创建一个插件文件 myPlugin.js：

// myPlugin.js
export default {
  install(Vue) {
    Vue.prototype.$myMethod = function() {
      console.log('This is a method from my plugin!');
    };
  }
};

2、在 `main.js` 中注册插件

在你的 main.js 文件中注册这个插件：

// main.js
import Vue from 'vue';
import App from './App.vue';
import myPlugin from './myPlugin';
Vue.use(myPlugin);
new Vue({
  render: h => h(App),
}).$mount('#app');

3、在组件中使用

现在你可以在任何组件中使用这个插件方法：

<template>
  <div>
    <button @click="usePluginMethod">Use Plugin Method</button>
  </div>
</template>
<script>
export default {
  methods: {
    usePluginMethod() {
      this.$myMethod();
    }
  }
};
</script>

四、通过外部库引入

有时，你可能需要使用第三方 JavaScript 库。在 Vue 项目中，你可以通过 npm 或 yarn 安装这些库，然后在你的组件中引入并使用。

1、安装第三方库

假设你需要使用 lodash 这个库，首先通过 npm 安装：

npm install lodash

2、在组件中引入并使用

在你的组件中引入并使用 lodash：

<template>
  <div>
    <p>Random Number: {{ randomNumber }}</p>
  </div>
</template>
<script>
import _ from 'lodash';
export default {
  data() {
    return {
      randomNumber: 0
    };
  },
  created() {
    this.randomNumber = _.random(1, 100);
  }
};
</script>

五、使用模块化管理 JavaScript

为了更好地管理和组织你的 JavaScript 代码，可以考虑使用模块化的方式。这不仅有助于提高代码的可读性和可维护性，还能避免全局变量污染和命名冲突。

1、创建模块文件夹

在你的项目结构中创建一个 modules 文件夹，用于存放各个功能模块。例如，创建一个 math.js 文件：

// modules/math.js
export function add(a, b) {
    return a + b;
}
export function subtract(a, b) {
    return a - b;
}

2、在组件中引入并使用模块

在你的组件中按需引入并使用这些模块：

<template>
  <div>
    <p>Addition: {{ addition }}</p>
    <p>Subtraction: {{ subtraction }}</p>
  </div>
</template>
<script>
import { add, subtract } from './modules/math';
export default {
  data() {
    return {
      num1: 10,
      num2: 5,
      addition: 0,
      subtraction: 0
    };
  },
  created() {
    this.addition = add(this.num1, this.num2);
    this.subtraction = subtract(this.num1, this.num2);
  }
};
</script>

六、使用 Vuex 管理状态

在大型应用中，状态管理是一个重要的部分。Vuex 是 Vue 官方提供的状态管理工具，可以帮助你更好地管理和共享状态。

1、安装 Vuex

首先，通过 npm 安装 Vuex：

npm install vuex

2、创建 Vuex Store

在你的项目中创建一个 store.js 文件，并定义你的状态、变更和动作：

// store.js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    increment({ commit }) {
      commit('increment');
    }
  }
});

3、在 `main.js` 中注册 Vuex Store

在你的 main.js 文件中注册这个 Store：

// main.js
import Vue from 'vue';
import App from './App.vue';
import store from './store';
new Vue({
  store,
  render: h => h(App),
}).$mount('#app');

4、在组件中使用 Vuex Store

现在你可以在任何组件中使用 Vuex Store：

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>
<script>
export default {
  computed: {
    count() {
      return this.$store.state.count;
    }
  },
  methods: {
    increment() {
      this.$store.dispatch('increment');
    }
  }
};
</script>

七、使用外部API和数据

在实际项目中，可能需要与外部API进行交互，以获取或提交数据。这时，可以使用JavaScript的 fetch 方法或者第三方库如 axios。

1、安装 axios

通过 npm 安装 axios：

npm install axios

2、在组件中使用 axios

在你的组件中引入并使用 axios：

<template>
  <div>
    <p>User Data: {{ userData }}</p>
  </div>
</template>
<script>
import axios from 'axios';
export default {
  data() {
    return {
      userData: null
    };
  },
  created() {
    axios.get('https://jsonplaceholder.typicode.com/users/1')
      .then(response => {
        this.userData = response.data;
      })
      .catch(error => {
        console.error('There was an error!', error);
      });
  }
};
</script>

八、使用事件总线进行组件通信

在大型应用中，组件之间的通信可能会变得复杂。事件总线（Event Bus）是一种简便的解决方案，可以帮助你管理组件之间的事件和数据传递。

1、创建事件总线

在你的项目中创建一个单独的文件，如 eventBus.js：

// eventBus.js
import Vue from 'vue';
export const EventBus = new Vue();

2、在组件中使用事件总线

在你的组件中引入并使用事件总线：

<template>
  <div>
    <button @click="sendMessage">Send Message</button>
  </div>
</template>
<script>
import { EventBus } from './eventBus';
export default {
  methods: {
    sendMessage() {
      EventBus.$emit('message-sent', 'Hello from Component A');
    }
  }
};
</script>

另一个组件监听这个事件：

<template>
  <div>
    <p>Received Message: {{ message }}</p>
  </div>
</template>
<script>
import { EventBus } from './eventBus';
export default {
  data() {
    return {
      message: ''
    };
  },
  created() {
    EventBus.$on('message-sent', (msg) => {
      this.message = msg;
    });
  }
};
</script>

九、使用项目团队管理系统

在开发和管理大型 Vue 项目时，有效的项目团队管理系统是必不可少的。推荐使用 研发项目管理系统PingCode 和 通用项目协作软件Worktile。

1、研发项目管理系统PingCode

PingCode 提供了全面的项目管理功能，包括需求管理、任务分配、进度跟踪等。它专为研发团队设计，能够帮助团队提高效率和协作能力。

2、通用项目协作软件Worktile

Worktile 是一款功能强大的通用项目协作工具，适用于各种类型的团队。它提供任务管理、时间跟踪、文件共享等功能，能够满足团队的多样化需求。

通过使用这些项目管理系统，你可以更好地组织和管理团队，提高项目的成功率和效率。

结论

在 Vue 项目中添加自己的 JavaScript 方法有多种方式，包括全局挂载、在组件内引入、通过插件方式引入等。选择合适的方法可以帮助你提高代码的可维护性和可读性。同时，使用模块化管理、状态管理、外部API和事件总线等技术，可以进一步提升项目的结构和性能。在团队协作方面，推荐使用 PingCode 和 Worktile 进行有效的项目管理。通过综合运用这些技术和工具，你可以更好地开发和维护 Vue 项目。