>source

다음 명령을 사용하여 최신 vue CLI (vue 3.5.1)에 의해 생성 된 vue 앱이 있습니다. 줄 :

vue ui

이것은 내 폴더 구조입니다 :

app_vue :
|-node_modules
|-공개
|-src :
| ---- 자산
| ---- 구성 요소 :
| ---------List.vue
| ---- libs :
| ---------페이지 매김:
| ------------- CSS :
| -----------------pagination.css
| ------------- js :
| -----------------pagination.js
| ...

수동으로 방금 생성하기 전에libs폴더가 없습니다.

또한 manullyvue.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

어떻게 할 수 있을까요?

  • 답변 # 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>
    
    

    위의 예는 모든 스타일을 전체 응용 프로그램에 공개합니다. 범위가 지정된 스타일 태그에 스타일을 넣으면 해당 구성 요소 나보기에 범위가 지정됩니다.

  • 답변 # 2

    이 라이브러리를 가져오고 ES6 또는 다른 모듈 인 경우 chainWebpack을 사용할 수 있습니다 옵션을 정의하고

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

    예를 들어 여기에서보고 싶을 수도 있습니다

  • 답변 # 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>
    
    

  • 이전 sql - 여러 열에서 필터링 된 가장 최근 행 선택
  • 다음 python - 사전 훈련 된 단어 임베딩을 메모리에 완전히로드하는 대안이 있습니까?