Vue.use() 혹해

재인쇄: https://www.jianshu.com/p/89a05706917a

많은 사람들이 Vue를 사용하여 다른 사람의 컴포넌트를 사용할 때 이를 사용합니다 Vue.use(). 예: Vue.use(VueRouter), Vue.use(MintUI). 하지만 사용할 axios때는 사용할 필요가 없으며 Vue.use(axios)직접 사용할 수 있습니다. 왜?

axios 없기  때문에 install

그게 무슨 뜻이에요? Vue.use() 다음으로 필수 구성 요소, 즉 install 일부 구성 요소를 사용자 정의합니다  . 이 내용을 읽고 나면 이해하게 될 것입니다.

구성 요소 정의

生成模版 vue init webpack-simple custom-global-component
custom-global-component 为新建的文件夹名称
然后一路回车
cd custom-global-component 进入该文件夹
npm install 安装本次需要的模块
npm run dev 运行项目
如果能正常打开，进行下一步

현재 프로젝트 디렉터리는 다음과 같습니다.

1. 아래와 같이 폴더와 파일을 생성합니다.

2. Loading.vue에서 구성 요소를 정의합니다.

<template>
    <div class="loading-box">
        Loading...
    </div>
</template>

 3.index.js에 Loading.vue를 도입하고 내보내기

// 引入组件
import LoadingComponent from './loading.vue'
// 定义 Loading 对象
const Loading={
    // install 是默认的方法。当外界在 use 这个组件的时候，就会调用本身的 install 方法，同时传一个 Vue 这个类的参数。
    install:function(Vue){
        Vue.component('Loading',LoadingComponent)
    }
}
// 导出
export default Loading

4.main.js의 로딩 파일 아래에 인덱스를 추가합니다.

// 其中'./components/loading/index' 的 /index 可以不写，webpack会自动找到并加载 index 。如果是其他的名字就需要写上。
import Loading from './components/loading/index'
// 这时需要 use(Loading)，如果不写 Vue.use()的话，浏览器会报错，大家可以试一下
Vue.use(Loading)

5. App.vue에 정의된 구성 요소 태그를 작성합니다. <Loading></Loading> 

<template>
  <div id="app">
    <h1>vue-loading</h1>
    <Loading></Loading>
  </div>
</template>

6. 이거 보시고 다들 아시겠지만 를 사용할 axios때 Vue.use(axios)하지 않고 바로 사용할 수 있는 이유는 개발자가 Encapsulation할 때 이 단계를 axios작성하지 않았기 때문입니다. install왜 기록되지 않았는지에 대해서는 알 수 없습니다.