Vue项目中引入外部文件的方法（css、js、less）

Vue项目中引入外部文件的方法主要有以下几种：

1. 使用link和script标签引入外部css和js文件

我们可以通过在Vue项目的index.html文件中使用link和script标签来引入外部的css和js文件。

在html文件中，我们使用link标签引入外部css文件。例如：

<link href="./assets/css/style.css" rel="stylesheet">

同样，我们使用script标签引入外部js文件。例如：

<script src="./assets/js/jquery.min.js"></script>

1. 使用Vue的vue.config.js配置文件引入外部文件

Vue提供了配置文件vue.config.js，我们可以通过该文件配置引入外部文件的方法，具体操作如下：

在项目根目录下新建vue.config.js文件，并添加以下内容：

module.exports = {
  chainWebpack: config => {  
    // 添加 less 规则，支持less文件的引入
    config.module
      .rule('less')
      .test(/\.less$/)
      .use('less-loader')
      .loader('less-loader')
      .end()

    // 添加 jQuery 和 bootstrap 的引入
    config
      .plugin('provide')
      .use(require('webpack').ProvidePlugin, [{
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery',
        Popper: ['popper.js', 'default'],
        Tether: 'tether'
      }])
  },
  // 添加需要全局引入的 css 和 js
  css: {
    loaderOptions: {
      sass: {
        data: `
          @import "@/assets/css/style.scss";
        `
      }
    }
  },
  configureWebpack: {
    entry: {
      app: ['./src/main.js', 'babel-polyfill']
    },
    externals: {
      'AMap': 'AMap'
    }
  }
}

在上例中，我们使用了webpack的ProvidePlugin插件来提供全局变量的引入。同时，我们也可以在css中添加全局引入的样式文件。

示例1：在Vue项目中引入less文件

我们可以通过配置vue.config.js，在Vue项目中引入less文件，具体操作如下：

1. 安装less和less-loader

npm install less less-loader --save-dev

1. 在vue.config.js中添加less配置

module.exports = {
  chainWebpack: config => {  
    // 添加 less 规则，支持less文件的引入
    config.module
      .rule('less')
      .test(/\.less$/)
      .use('less-loader')
      .loader('less-loader')
      .end()
  }
}

1. 在.vue文件中引入less文件

<style lang="less">
  @import './assets/less/style.less';
</style>

1. 在style.less文件中编写样式

.box {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
  background-color: blue;
}

示例2：在Vue项目中引入第三方插件jQuery和Bootstrap

在Vue项目中，我们可以使用webpack的ProvidePlugin插件来引入第三方库jQuery和Bootstrap。

1. 安装jQuery和Bootstrap

npm install jquery bootstrap --save

1. 在vue.config.js中添加ProvidePlugin配置

module.exports = {
  chainWebpack: config => {  
    // 引入 providePlugin 插件
    config
      .plugin('provide')
      .use(require('webpack').ProvidePlugin, [{
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery',
        Popper: ['popper.js', 'default'],
        Tether: 'tether'
      }])
  },
  ...
}

1. 在需要使用jQuery和Bootstrap的.vue文件中添加引入

<script>
  // 使用jQuery和Bootstrap
  $(function () {
    $('[data-toggle="tooltip"]').tooltip()
    // do something ...
  })
</script>

引入方式如上述所示。

以上就是在Vue项目中引入外部文件（css、js、less）的完整攻略，希望对你有所帮助。