vue2项目怎么引用js

VUE2项目怎么引用JS

在Vue2项目中引用JavaScript文件可以通过多种方式实现，包括全局引用、局部引用、外部脚本引入等。全局引用是将JavaScript文件直接引入到项目的主入口文件中，使得所有组件都可以访问这些JS代码。局部引用是只在某个特定组件中引用该JavaScript文件，确保该JS代码仅在该组件中起作用。外部脚本引入是通过HTML的<script>标签在模板中直接引入外部的JavaScript文件。下面我们将详细描述其中的一种方法。

一、全局引用

全局引用是将JavaScript文件引入到项目的主入口文件（通常是main.js）中，使得所有组件都可以访问这些JS代码。这样做的好处是所有组件都可以共享这些功能，但是也会增加全局命名空间的污染风险。

1、在项目的`src`目录下创建一个新的JavaScript文件，例如`utils.js`。

// utils.js
export function sayHello() {
    console.log('Hello from utils.js');
}

2、在`main.js`中引入该文件。

// main.js
import Vue from 'vue'
import App from './App.vue'
import { sayHello } from './utils'
Vue.config.productionTip = false
new Vue({
  render: h => h(App),
  mounted() {
    sayHello(); // 调用全局引入的JS函数
  }
}).$mount('#app')

二、局部引用

局部引用是指将JavaScript文件仅在需要的组件中引入。这种方法可以避免全局命名空间污染，并且使得代码更加模块化和可维护。

1、创建一个新的JavaScript文件，例如`helpers.js`。

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

2、在需要使用该JS文件的组件中引入，例如在`ExampleComponent.vue`中。

<template>
  <div>
    <p>The sum is: {{ sum }}</p>
  </div>
</template>
<script>
import { calculateSum } from './helpers'
export default {
  data() {
    return {
      sum: 0
    };
  },
  mounted() {
    this.sum = calculateSum(5, 3); // 调用局部引入的JS函数
  }
}
</script>

三、外部脚本引入

外部脚本引入是通过HTML的<script>标签在模板中直接引入外部的JavaScript文件。这种方法适用于需要引入第三方库或CDN脚本。

1、在`public/index.html`中直接引入外部脚本。

<!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>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
  <noscript>
    <strong>We're sorry but vue2-app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
  </noscript>
  <div id="app"></div>
  <!-- built files will be auto injected -->
</body>
</html>

2、在组件中直接使用外部引入的脚本。

<template>
  <div>
    <p>Check the console for Axios response</p>
  </div>
</template>
<script>
export default {
  mounted() {
    axios.get('https://jsonplaceholder.typicode.com/posts')
      .then(response => {
        console.log(response.data);
      })
      .catch(error => {
        console.error(error);
      });
  }
}
</script>

四、在Vue CLI项目中引用JS文件

在Vue CLI项目中，我们可以更灵活地管理JavaScript文件。以下是一些常见的引用方式。

1、在`assets`目录中存放JS文件。

// src/assets/js/custom.js
export function greetUser(name) {
    console.log(`Hello, ${name}!`);
}

2、在组件中引用`assets`目录下的JS文件。

<template>
  <div>
    <p>{{ greeting }}</p>
  </div>
</template>
<script>
import { greetUser } from '@/assets/js/custom'
export default {
  data() {
    return {
      greeting: ''
    };
  },
  mounted() {
    this.greeting = greetUser('Vue Developer');
  }
}
</script>

五、使用第三方库

有时候，我们需要引用第三方库，例如Lodash、Moment.js等。这些库通常通过npm安装，然后在项目中引用。

1、通过npm安装第三方库。

npm install lodash

2、在组件中引用和使用第三方库。

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

六、在Vuex中引用JS文件

如果项目中使用了Vuex进行状态管理，我们还可以在Vuex的actions、mutations或getters中引用JS文件。

1、创建一个新的JavaScript文件，例如`api.js`。

// api.js
export function fetchData() {
    return fetch('https://jsonplaceholder.typicode.com/posts')
        .then(response => response.json());
}

2、在Vuex的actions中引用该文件。

// store.js
import Vue from 'vue'
import Vuex from 'vuex'
import { fetchData } from './api'
Vue.use(Vuex)
export default new Vuex.Store({
  state: {
    posts: []
  },
  mutations: {
    SET_POSTS(state, posts) {
      state.posts = posts;
    }
  },
  actions: {
    loadPosts({ commit }) {
      fetchData().then(posts => {
        commit('SET_POSTS', posts);
      });
    }
  }
})

3、在组件中使用Vuex的actions。

<template>
  <div>
    <ul>
      <li v-for="post in posts" :key="post.id">{{ post.title }}</li>
    </ul>
  </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
  computed: {
    ...mapState(['posts'])
  },
  created() {
    this.$store.dispatch('loadPosts');
  }
}
</script>

七、使用Webpack配置

在Vue CLI项目中，我们可以通过Webpack配置来管理JavaScript文件的引用。以下是一些常见的Webpack配置方法。

1、在项目根目录下创建`vue.config.js`文件。

// vue.config.js
module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        'custom-js': '@/assets/js/custom.js'
      }
    }
  }
}

2、在组件中引用别名配置的JS文件。

<template>
  <div>
    <p>{{ greeting }}</p>
  </div>
</template>
<script>
import { greetUser } from 'custom-js'
export default {
  data() {
    return {
      greeting: ''
    };
  },
  mounted() {
    this.greeting = greetUser('Webpack User');
  }
}
</script>

通过上述多种方式，可以灵活地在Vue2项目中引用JavaScript文件，使得项目代码更加模块化、易维护。不同的引用方式适用于不同的场景，开发者可以根据具体需求选择最合适的方法。

在大型项目中，合理的文件引用和管理方式尤为重要。推荐使用研发项目管理系统PingCode和通用项目协作软件Worktile，这两个系统可以帮助团队高效地进行项目管理和协作，确保项目开发过程顺利进行。

总结

在Vue2项目中引用JavaScript文件有多种方式，包括全局引用、局部引用、外部脚本引入、使用第三方库、在Vuex中引用、通过Webpack配置等。不同的引用方式适用于不同的场景，开发者可以根据具体需求选择最合适的方法。合理的文件引用和管理方式可以提高代码的可维护性和可读性，帮助开发者更高效地进行项目开发。