Vue.js-如何导入脚本和样式

在本文中，我们将介绍Vue.js中使用VUE CLI导入脚本和样式的方法。Vue CLI是一个基于Vue.js进行快速开发的全面的系统工具。

Vue CLI简介

Vue CLI是一个提供了开发、构建和部署Vue.js项目所需的核心构建工具的命令行界面。它集成了各种常用的插件和工具，可以方便地创建和管理Vue项目，大大提高了开发效率。

导入外部脚本

Vue CLI支持在Vue项目中导入外部脚本文件，可以通过配置文件进行相关设置。首先，在Vue项目根目录下找到vue.config.js文件，如果没有则手动创建一个。然后，在该文件中添加以下代码来导入外部脚本：

module.exports = {
  configureWebpack: {
    plugins: [],
    externals: {
      'jquery': 'jQuery',
      'axios': 'axios'
    },
    resolve: {
      alias: {
        'vue$': 'vue/dist/vue.esm.js'
      }
    }
  }
}

上述代码中，通过configureWebpack属性配置webpack相关选项。plugins属性用于配置webpack插件，externals属性用于配置外部脚本，可以将需要引用的库文件设置为externals的key，value为全局变量名。resolve属性用于配置别名，可以将vue的默认导出设置为vue.esm.js。

导入外部脚本之后，可以直接在Vue组件中使用该脚本的功能，无需再次引入。

导入外部样式

Vue CLI也支持在Vue项目中导入外部样式文件。和导入脚本类似，在vue.config.js文件中添加以下代码来导入外部样式：

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        prependData: `@import "@/styles/_variables.scss";`
      }
    }
  }
}

上述代码中，通过css属性配置样式选项，loaderOptions属性用于配置css预处理器的loader选项。prependData属性用于导入外部样式文件，可以设置为@import语句，引入需要的样式文件路径。

在Vue组件中，可以直接使用导入的样式文件中定义的样式，无需再次引入。

示例说明

下面以导入jQuery和Bootstrap为例，演示如何在Vue CLI中导入外部脚本和样式。

导入jQuery脚本：

首先，在vue.config.js文件中添加以下代码：

module.exports = {
  configureWebpack: {
    externals: {
      'jquery': 'jQuery'
    }
  }
}

然后，在需要使用jQuery的Vue组件中，可以直接使用$或jQuery对象，无需再次引入jQuery脚本：

export default {
  mounted() {
    $(document).ready(function() {
      // 使用jQuery的相关功能
    });
  }
}

导入Bootstrap样式：

首先，在vue.config.js文件中添加以下代码：

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        prependData: `@import "@/styles/bootstrap.scss";`
      }
    }
  }
}

然后，在需要使用Bootstrap样式的Vue组件中，可以直接使用Bootstrap中定义的样式类名，无需再次引入Bootstrap样式文件：

<template>
  <div class="container">
    <h1>示例标题</h1>
    示例内容
  </div>
</template>

<style>
.container {
  margin: 20px;
  padding: 20px;
  background-color: #f0f0f0;
}
h1 {
  font-size: 24px;
  color: #333;
}
p {
  font-size: 16px;
  color: #666;
}
</style>