Vue 中如何引入 JS 和 SCSS

在Vue项目开发中，引入JavaScript（JS）和层叠样式表（SCSS）是常见的需求。正确地引入它们能够增强项目的功能和样式表现，下面将详细介绍在Vue中引入JS和SCSS的方法。

引入JavaScript

• 在Vue组件中直接引入 在Vue单文件组件（.vue文件）中，可以通过script标签引入外部的JavaScript文件。例如，假设我们有一个名为utils.js的文件，其中包含一些工具函数。在Vue组件中可以这样引入：

<template>
  <div>Vue组件内容</div>
</template>
<script>
import utils from './utils.js';
export default {
  methods: {
    someMethod() {
      utils.someFunction();
    }
  }
}
</script>

这种方式适用于引入一些特定于组件的JavaScript逻辑。

• 全局引入 如果需要在整个Vue项目中都能使用某些JavaScript代码，可以在项目的入口文件（通常是main.js）中引入。例如：

import globalFunction from './global.js';
Vue.prototype.$globalFunction = globalFunction;

这样，在所有的Vue组件中都可以通过this.$globalFunction来访问全局函数。

引入SCSS

• 在Vue组件中引入 在Vue单文件组件中，可以通过style标签引入SCSS文件，并设置lang="scss"来指定使用SCSS语法。例如：

<template>
  <div class="my-component">Vue组件内容</div>
</template>
<style lang="scss">
@import './styles.scss';
.my-component {
  color: $primary-color;
}
</style>

• 全局引入 要在整个项目中应用一些全局的SCSS样式，可以在项目的入口文件中引入全局的SCSS文件。例如，在main.js中：

import './styles/global.scss';

通过以上方法，我们可以在Vue项目中灵活地引入JavaScript和SCSS，实现项目的功能和样式需求。在实际开发中，根据具体情况选择合适的引入方式，能够提高项目的可维护性和开发效率。