在NPM發佈自定義組件

在NPM發佈自定義組件

發佈流程

1、首先登錄 npm官網 註冊個賬戶並登錄

2、自己先創建一個文件夾執行 npm init --yes

3、執行npm publish

案例

新建一個vue項目

vue create my-project

cd my-project

npm run serve

修改文件目錄

1、在src目錄下新建components文件夾然後在此文件夾下新建Main.vue

Main.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'Main',
  props: {
    msg: String
  }
}
</script>

2、修改App.vue

<template>
  <div id="app">
    <Main :msg="msg"/>
  </div>
</template>

<script>
import Main from './components/Main.vue'

export default {
  name: 'app',
  components: {
    Main
  },
  data () {
    return {
      msg: 'Hello World!'
    }
  }
}
</script>

3、在根目錄新建index.js文件

發佈到NPM

npm publish

使用方法

1、npm install <組件名>

2、在使用的地方

<template>
  <div>
    <component1 msg="Hello Vue" />
  </div>
</template>
<script>
import component1 from '<組件名>'
export default {
  components: {
    component1
  }
}
</script>