라이브러리를 Vue2에서 Vue3로 마이그레이션하는 방법

26136 단어 tutorialvuewebdevlibrary
Vue 3 출시 예정홍보는 진실이므로 모든 기존 프로젝트를 새 버전으로 이전하려고 시도할 수 있습니다.이 일을 하기 전에, 나는 간단한 문제로 너를 도와 약간의 고통을 줄일 것이다.
당신의 응용 프로그램은 어느 정도 제3자 라이브러리에 의존합니까(BootstrapVue, Vuetify 등)?
만약 답이 긍정적이라면, 당신은 이 과정을 한동안 멈춰야 할 수도 있습니다.
왜?
글로벌 APIsee reference의 획기적인 변화로 인해 대부분의 Vue 플러그인과 타사 라이브러리(현재)는 Vue3에서 작업할 수 없습니다.
Vue 기여자는 다음과 같습니다.
github thread
이 문서에서는 Vue 2를 마이그레이션하는 방법을 보여 드리겠습니다.x 라이브러리에서 Vue 3까지.x 플러그인, 그래서 만약에 당신이 라이브러리의 소유자이거나 당신이 가장 좋아하는 회전목마 플러그인에 힘을 기여하여 Vue3로 이전하고 싶은 사용자라면 이 강좌는 당신에게 적합합니다.

새로운 글로벌 API


Vue 3에 도입된 주요 혁신적인 변화 중 하나입니다.x는 응용 프로그램을 만드는 방법입니다.2.x 에서 글로벌 API 및 구성이 Vue 동작을 전체적으로 변경합니다.
// main.js
import Vue from 'vue';
import App from './App.vue';

new Vue({
  render: h => h(App),
}).$mount('#app');
예를 들어, vue-toasted 라이브러리를 프로젝트에 추가하려면 Vue.use 를 사용하고 다음 옵션을 사용하여 라이브러리 객체를 전달할 수 있습니다.
// main.js
import Vue from 'vue';
import VueToasted from 'vue-toasted';

Vue.use(VueToasted, { ...options });
백그라운드에서 VueToasted Vue 인스턴스를 확장하고 구성 요소(Vue.component)와 글로벌 객체(Vue.prototype)를 설명합니다.
// vue-toasted/src/index.js

const Toasted = {
  install(Vue, options) {
    if (!options) {
      options = {};
    }

    const Toast = new T(options);
    Vue.component('toasted', ToastComponent);
    Vue.toasted = Vue.prototype.$toasted = Toast;
  },
};
있다x 응용 프로그램 인스턴스는 createApp 를 통해 생성됩니다.
// main.js

import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);
응용 프로그램 인스턴스는 현재 글로벌 API의 하위 집합을 공개했습니다.경험적 법칙은 Vue 동작을 전체적으로 변경하는 모든 API가 현재 이렇게 응용 프로그램 실례로 이동한다는 것이다
const app = createApp(App);

app.component('button-counter', {
  data: () => ({
    count: 0,
  }),
  template: '<button @click="count++">Clicked {{ count }} times.</button>',
});

app.directive('blur', {
  mounted: el => el.blur(),
});
그래서 너는 다음과 같이 생각할 수 있다.
const app = createApp(App);

app.use(VueToasted, { ...options });

Uncaught TypeError: Cannot set property '\$toasted' of undefined
왜?vue-toasted 라이브러리에서 속성이 "Vue"에 추가되었기 때문입니다: Vue.toasted = Vue.prototype.$toasted = Toast;

솔루션


실제로 이것은 간단합니다. 낡은 plugin/index.js 를 삭제하고 플러그인 대상을 만듭니다.
const VueToastedPlugin = {
  install(app, options) {
    if (!options) {
      options = {};
    }
    const Toast = new T(options);
    app.component('toasted', ToastComponent);
    app.config.globalProperties.$toasted = Toast;
  },
};
export default VueToastedPlugin;
당신은 두 가지 미세한 변화를 발견할 수 있습니다.
  • 설치 방법의 매개 변수로 실례를 응용하여 전달하기 때문에 현재 우리는 Vue.component 하지 않고 app.component 한다
  • 전역 속성을 추가하려면Vue.prototype app.config.globalProperties
    • 이제 사용할 수 있습니다 app.use(VueToasted, {...options});.vue-toasted 라이브러리의 특정 상황에서 $toasted 의 this 을 통해 새 toasted 메시지를 만듭니다.
    methods: {
   showToast() {
      this.$toasted.show('How you doing?');
   }
}

    작성 API 사용


    그래서 우리는 Vue 3이 없는 무작위 Vue 라이브러리를 얻었다.x는 새 표준을 지원합니다.앞의 코드는 options API와 잘 어울려 사용할 수 있지만 어떻게 Vue3의 가장 재미있고 최신 기능 중 하나인 합성 API와 함께 사용할 수 있습니까?
    예, this setup() 방법에서는 접근할 수 없습니다. 오늘 많은 라이브러리에서 속성을 주입합니다this.예를 하나 더 들자. 주입this.$route과 this.$router, 그리고 Vue Router 주입this.$store.
    작성된 API를 사용할 때 없음this.플러그인은 내부에서 provide 및 inject 를 사용하고 조합 함수를 공개합니다.우리는 계속해서 vue-toasted를 예로 들었다.
    // useApi.js
import { inject } from 'vue';

export const VueToastedSymbol = Symbol();

export function useToasted() {
  const VueToasted = inject(VueToastedSymbol);
  if (!VueToasted) throw new Error('No VueToasted provided!!!');
  return VueToasted;
}
    그리고 우리는 응용 프로그램 실례에서 -->app.provide(VueToastedSymbol, Toast);을 제공한다
    import { Toasted as T } from './js/toast';
import ToastComponent from './toast.vue';
import { VueToastedSymbol } from './useApi';
export * from './useApi';

const VueToastedPlugin = {
  install(app, options) {
    if (!options) {
      options = {};
    }
    const Toast = new T(options);
    app.component('toasted', ToastComponent);
    app.config.globalProperties.$toasted = Toast;
    app.provide(VueToastedSymbol, Toast);
  },
};

export default VueToastedPlugin;
    이제 모든 설정 방법이나 합성 함수에서 우리는 할 수 있다.
    
import { useToasted }  from 'vue-toasted`;

const Component = {
  setup() {
    const toasted = useToasted();

    toasted.success('Composition API BABYYY!', {
      position: 'bottom-right',
      duration: 5000,
    });
  },
};

    Vuex 회사 결론


    너는 왜 플러그인 작가가 아직 이렇게 하지 않았는지 생각할 것이다🤔? 대부분의 핵심 라이브러리, 예를 들어 Vue-router과Vuex는 이미 /next 지점과beta 버전이 있고, vue3를 지원하며, 심지어는 기본적으로 Typescript를 사용하지만, 나머지 제3자 라이브러리는 모두 원본입니다. 또한 다른 개발자의 도움이 없으면 라이브러리를 스스로 업데이트하기 어려울 것이라고 믿습니다.
    그럼, 토스트 메시지에서 사용한 좋은 라이브러리가 vue3에 적용되지 않는 것을 발견했습니까?저 가 도서관에서 한 것처럼 오늘 배운 것으로 홍보를 하세요.그것은 플러그인 작성자의 극찬을 받을 뿐만 아니라, 당신에게 더욱 높은 수준의 Vue 지식을 제공할 것입니다.너는 지역 사회를 위해 공헌할 것이다😊.

    여기 있다


    WIP: new global api install + composition provide + update deps #180

    발표 날짜 alvarosaburido
    안녕하세요.
    이 PR은 Vue 3에서 사용할 라이브러리를 마이그레이션하는 데 사용됩니다.x(진행 중), PR은 basemaster로 설정되었지만, base의 /next 지점을 대상으로 2.x와 3.x 해결 방안이 같은 환매에서 공존할 수 있도록 해야 한다.이 지점을 만들면 PR의 목표를 변경합니다.
    기본 변경 사항:vue-toasted/index.js :
    import { Toasted as T } from './js/toast';
import ToastComponent from './toast.vue';
import { VueToastedSymbol } from './useApi';
export * from './useApi';

const VueToastedPlugin = {
  install(app, options) {
    if (!options) {
      options = {};
    }
    const Toast = new T(options);
    app.component('toasted', ToastComponent);
    app.config.globalProperties.$toasted = Toast;
    app.provide(VueToastedSymbol, Toast);
  },
};

export default VueToastedPlugin;

    Now instead of Vue, the app instance is passed so it will work with the new createApp, and the global property will be available on this by using app.config.globalProperties.$toasted reference

    const app = createApp(App);

app.use(VueToasted, { ...options });

    In Vue 3.x plugins will leverage provide and inject internally and expose a composition function.

    To do that I add a useApi.js for the use of the library along with the Composition API reference:

    // useApi.js

export const VueToastedSymbol = Symbol();

export function useToasted() {
  const VueToasted = inject(VueToastedSymbol);
  if (!VueToasted) throw new Error('No VueToasted provided!!!');

  return VueToasted;
}

    So now, in any setup method or composition function we can do:

    import { useToasted }  from 'vue-toasted`;

const Component = {
  setup() {
    const toasted = useToasted();

    toasted.success('Composition API BABYYY!', {
      position: 'bottom-right',
      duration: 5000,
    });
  },
};

    To support the last release candidate vue 3.0.0-rc.9 I needed to update several packages from the package.json, this is causing errors in the webpack build process, especially with the uglify plugin:

    cross-env NODE_ENV=production webpack --config ./build/webpack.release.js --progress --hide-modules

/Users/alvarosaburido/as/github/as-vue-toasted/node_modules/webpack-cli/bin/cli.js:93
                                throw err;
                                ^

Error: webpack.optimize.UglifyJsPlugin has been removed, please use config.optimization.minimize instead.
    at Object.get [as UglifyJsPlugin] (/Users/alvarosaburido/as/github/as-vue-toasted/node_modules/webpack/lib/webpack.js:189:10)
    만약 핵심 팀 중 누군가가 나를 도와 이 문제를 해결할 수 있다면, 나는 이미 사용할 수 있다고 생각한다.
    필요하면 직접 연락 주세요.
    즐거움 코드

    이게 다야, 계속 록하자.
    View on GitHub
    GIT 요약
    통신 프로토콜 및 단순 채팅방 구축

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage