VueJs CLI 3 - как добавить внешнюю библиотеку - PullRequest
Новая
       4

VueJs CLI 3 - как добавить внешнюю библиотеку

1 голос
/ 18 марта 2019

У меня есть приложение vue, созданное последним vue CLI (vue 3.5.1) с использованием следующей командной строки:

vue ui

Это структура моей папки:

app_vue:
| - node_modules
| - public
| - src:
| ---- assets
| ---- компоненты:
| --------- List.vue
| ---- libs:
| --------- нумерация страниц :
| ------------- css:
| ----------------- нумерация страниц.css
| ------------- js:
| ----------------- нумерация страниц.JS
|...

Папка libs не существует до того, как я просто создал ее вручную.

Я также создаю вручную vue.config.js *Файл 1040 *, но я не знаю, что мне здесь добавить. 

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>

Я хочу использовать нумерацию страниц libsв List.vue компонент.
Я хочу использовать что-то вроде этого:

libs / pagination / pagination.css

не

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

Как я могу это сделать.

Ответы [ 3 ]

0 голосов
/ 18 марта 2019

Если вы хотите импортировать эту библиотеку, а это ES6 или другой модуль, то вы можете использовать опцию chainWebpack и определить что-то вроде 

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

В качестве дополнительного примера вы можете посмотреть здесь

0 голосов
/ 19 марта 2019

У меня работает следующее решение.

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>
0 голосов
/ 18 марта 2019

Если вы хотите использовать файлы только в ваших компонентах / представлениях, вы импортируете то, что вы хотите, в те файлы, которые им нужны: импортируйте MyLib из "../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 , они будут применены к этому компоненту или представлению.

...