Vue-cli3搭建一个简单入门的UI组件，发布上线

为方便学习，已放github

项目文件

• 下载模板

vue create vue-own-ui

• 修改文件

mv src examples // 示例应用，本地检测是否成功
mkdir packages // 存放自己写的组件代码

跑一下试试

能跑通，你牛逼

需要如下配置

touch vue.config.js

const path = require('path')

module.exports = {
    // 修改路口
    pages:{
        index:{
            entry:'examples/main.js',
            template:'public/index.html',
            filename:'index.html'
        }
    },

    // 扩展webpack配置,加入编译
    chainWebpack:config => {
        config.resolve.alias
        .set('@',path.resolve(('examples')))
        .set('~',path.resolve('packages'))
        
        config.module
        .rule('js')
        .include.add(/examples/).end()
        .include.add(/packages/).end()
        .use('babel')
        .loader('babel-loader')
        .tap(options => {
            return options
        })
    }
}

npm run serve

配置文件入口，操作成功

编写自己的UI文件

packages/yp/src/yp.vue

<!-- yp -->
<template>
  <div>
      <ul>
          <li>测试一</li>
          <li>测试二</li>
          <li>测试三</li>
          <li>测试四</li>
          <li>测试五</li>
          <li>测试六</li>
      </ul>
  </div>
</template>

<script>
export default {
  name:"Yptest",  //标签名
  data () {
    return {
    };
  },

 created(){},

  components: {},

  computed: {},

  mounted(){},

  methods: {}
}

</script>
<style lang='scss' scoped>
</style>

packages/yp/index.js

import Yptest from './src/yp'

Yptest.install = Vue => {         // Vue.use() 使用的都是其内置的install方法
     //定义一个新的vue组件
    Vue.component(Yptest.name,Yptest)
}

export default Yptest

packages/index.js

import Yptest from './yp/index.js'

const components = [
    Yptest
]

// 定义install方法，接受一个vue为参数
const install = function (Vue){
    // 判断这个组件是不是安装了，如果安装了我就return
    if(install.installed) return
    install.installed = true

    // 遍历所有的组件
    components.map(component=>Vue.use(component))


    if(typeof window !== 'undefined' && window.Vue){
        install(window.Vue)
    }

}

export default {
    install,
    //所有组件必须要有install方法，才能Vue.use()
    ... components,
}

本地测试

main.js

import Vue from 'vue'
import App from './App.vue'
import Yptest from '../packages' // 引入

Vue.use(Yptest)

Vue.config.productionTip = false

new Vue({
  render: h => h(App)
}).$mount('#app')

HelloWorld.vue

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

  </div>
</template>

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

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

npm run serve

完成

发布至NPM

打包 库模式

vue-cli-service build --target lib --name lib

// target默认的构建工具，lib库模式（没有vue）

vue-cli-service build --target lib --name xxx --dest lib packages/index.js

vue-cli-service 不是全局环境

npx vue-cli-service build --target lib --name xxx --dest lib packages/index.js

出现 lib 文件夹

把包发布到npm去

lib新建package.json

{
    "name": "ypsoul",
    "version": "0.1.0",
    "main":"yp.umd.js", // js入口
    "license": "MIT"
}
  

NPM 官网 链接

注册账号 需要去邮箱验证，不然就会出现下面的报错

npm login

npm publish

完成

线上测试

可以新建一个纯净的项目 npm i ypsoul -S

main.js

import Vue from 'vue'
import App from './App.vue'


import ypsoul from 'ypsoul'

Vue.use(ypsoul)

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

HelloWorld.vue

<template>
  <div class="hello">
    <h1>{{ msg }} ypsoul</h1>
    <Yptest></Yptest>
    <p>
      For a guide and recipes on how to configure / customize this project,<br>
      check out the
      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
    </p>
    <h3>Installed CLI Plugins</h3>
    <ul>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
    </ul>
    <h3>Essential Links</h3>
	// ''''
  </div>
</template>

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

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

OK,一个简单的组件就生成了

git地址：链接