VueJs CLI 3 - 如何添加外部库

Question

我有一个由最新的vue CLI（vue 3.5.1）使用以下命令行创建的vue应用程序：

查看ui

这是我的文件夹结构：

app_vue： | - node_modules | - 公众 | - src： | ----资产 | ----组件： | --------- List.vue | ---- libs： | ---------分页： | ------------- css： | ----------------- pagination.css | ------------- js： | ----------------- pagination.js | ...

在我刚刚手动创建之前，libs文件夹不存在。

我也创建了manully vue.config.js文件，但我不知道我应该在这里添加什么。

const path = require('path')
module.exports = {}

我的List.vue：

<template>
  <div>
     ...
     <div id="pagination"></div> 
  </div>
</template>
<script>
  // how use pagination.js ???
  export default {
   ...
  }
</script>
<style>
  //how use pagination.css ???
  ...
<..style>

我想在List.vue组件中使用分页库。 我想用这样的东西：

库/分页/ pagination.css

不

../../礼拜四/pagination/pagination.CSS

我怎么做

Answer 1

如果您只想在组件/视图中使用这些文件，可以将所需内容导入到需要它们的文件中：从“../path/to/libs”导入MyLib;就是一个例子。

但是，如果您想要全局添加某些内容，可以在非范围样式标记中将它们添加到App.vue（或您的基本Vue组件）中：

<style>
@import "https://cdn.materialdesignicons.com/2.5.94/css/materialdesignicons.min.css";
@import "https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons";

#app {
  font-family: "Hilda-Regular", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</style>

上面的示例将向您的整个应用程序公开所有样式。如果将任何样式放在scoped样式标记中，它们将作用于该组件或视图。

Answer 2

如果你想导入这个库，它是ES6或其他模块，那么你可能想要使用chainWebpack选项并定义像

 module.exports = (api, options) => {
   api.chainWebpack(webpackConfig => {
     webpackConfig.resolve
      .alias
      .set('~', api.resolve('lib'))
   }
}

有关更多示例，您可能需要查看here

Answer 3

以下解决方案适合我。

vue.config.js

const path = require('path')

module.exports = {
    chainWebpack: config => {
        config.resolve.alias
            .set('libs', path.resolve(__dirname, 'src/libs/'))
    }
}

List.vue

<script>
   import { Pagination } from "libs/pagination/js/Pagination.js"
   import 'libs/pagination/css/pagination.css'

   export default {
       ...
       mounted()
       {
           console.log(new Pagination("#pagination"))
       }
       ...
   }
</script>