Question

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

vue ui

这是我的文件夹结构：

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

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

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

libs / pagination / pagination.css

不是

../../ libs / 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>

VueJs CLI 3-如何添加外部库

3 个答案: