在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>