Vue.js VueJs CLI 3-如何添加外部库

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

虚拟用户界面

这是我的文件夹结构：

应用程序：
|-节点\u模块
|-公共
|-src:
|----资产
|----组件：
|---------列表.vue
|----libs:
|---------分页：
|-------------css:
|-----------------分页.css
|-------------js:
|-----------------分页.js
| ...

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

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

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

My List.vue：

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

...
//如何使用pagination.js？？？
导出默认值{
...
}
//如何使用pagination.css？？？
...

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

libs/pagination/pagination.css

不

../../libs/pagination/pagination.css

---

如何操作。

如果您只想在组件/视图中使用文件，请将所需内容导入到需要它们的文件中：从“./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>

@进口”https://cdn.materialdesignicons.com/2.5.94/css/materialdesignicons.min.css";
@进口”https://fonts.googleapis.com/css?family=Roboto:100，300400500700900 |材质+图标”；
#应用程序{
字体系列：“Hilda常规”，Helvetica，Arial，无衬线；
-webkit字体平滑：抗锯齿；
-moz osx字体平滑：灰度；
}

---

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

如果您只想在组件/视图中使用文件，请将所需内容导入到需要它们的文件中：从“./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>

@进口”https://cdn.materialdesignicons.com/2.5.94/css/materialdesignicons.min.css";
@进口”https://fonts.googleapis.com/css?family=Roboto:100，300400500700900 |材质+图标”；
#应用程序{
字体系列：“Hilda常规”，Helvetica，Arial，无衬线；
-webkit字体平滑：抗锯齿；
-moz osx字体平滑：灰度；
}

---

上面的示例将向整个应用程序公开所有样式。如果将任何样式放入样式标记中，它们的范围将限定到该组件或视图。

如果要导入此库，并且它是ES6或其他模块，则可能需要使用选项并定义类似的内容

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

---

有关更多示例，您可能希望查看

，如果您希望导入此库，并且它是ES6或其他模块，那么您可能希望使用选项并定义如下内容

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

---

有关更多示例，您可能希望查看以下解决方案

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>

从“libs/Pagination/js/Pagination.js”导入{Pagination}
导入'libs/pagination/css/pagination.css'
导出默认值{
...
安装的（）
{
console.log（新分页（“分页”））
}
...
}

以下解决方案适合我

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>

从“libs/Pagination/js/Pagination.js”导入{Pagination}
导入'libs/pagination/css/pagination.css'
导出默认值{
...
安装的（）
{
console.log（新分页（“分页”））
}
...
}

这不是导入JS的方式：对不起，我想用文件夹aliasAh说导入'@/libs/pagination/JS/pagination.JS'，是的，你可以这样做！@是src目录的别名，我想这不是导入JS的方式：抱歉，我想使用文件夹aliasAh说import'@/libs/pagination/JS/pagination.JS'，是的，你可以这样做！@是src目录的别名