VueJs CLI 3 - 如何添加外部库答案

【问题标题】：VueJs CLI 3 - how add external libVueJs CLI 3 - 如何添加外部库
【发布时间】：2019-03-18 19:13:07
【问题描述】：

我有一个由最新的vue CLI (vue 3.5.1) 使用以下命令行创建的 vue 应用：

vue 界面

这是我的文件夹结构：

app_vue:
|- 节点模块
|- 公开
|- 来源：
|---- 资产
|---- 组件：
|---------List.vue
|---- 库：
|--------- 分页:
|------------- css:
|----------------- pagination.css
|------------- js:
|----------------- pagination.js
| ...

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

我还手动创建了 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 库。
我想使用类似的东西：

libs/pagination/pagination.css

不是

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

我该怎么做。

【问题讨论】：

标签： vue.js vue-cli-3

【解决方案1】：

如果你只想在你的组件/视图中使用这些文件，你可以将你想要的导入到需要它们的文件中： import MyLib from "../path/to/libs";就是一个例子。

但是，如果您想在全局范围内添加某些内容，您可以将它们添加到您的 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 样式标记中，它们将被限定为该组件或视图。

【讨论】：

这不是你导入 JS 的方式：MDN Import JS
对不起，我想说 import '@/libs/pagination/js/pagination.js' 使用文件夹别名
啊，是的，你可以做到！ @ 是我认为的 src 目录的别名

【解决方案2】：

如果你想导入这个库并且它是 ES6 或其他模块，那么你可能想使用chainWebpack 选项并定义类似的东西

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

更多例子你可能想看看here

【讨论】：

【解决方案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>

【讨论】：