vue-cli 3.0 组件/库 开发实践

[Sandra310]

第一步

按照正常步骤创建项目并开发

第二步

增加组件打包入口文件，通常支持三种引用方式

import IndexList from './components/index-list.vue'
// import方式引入
export { IndexList }
// Vue.use() 全局注册
export default {
  install: function (Vue) {
    Vue.component('index-list', IndexList)
  }
}
// <script src=""> 方式引用
if (typeof window !== 'undefined' && window.Vue) {
  window.Vue.component('index-list', IndexList)
}

第三步

以此作为打包入口增加package.json scripts配置

"component-build": "vue-cli-service build --target lib --name IndexList src/index.js"

编辑name，main入口
此时打包出的结果是4个文件

第四步

如果需要css与js打包在一起，需要在vue.config.js增加配置
详见：https://cli.vuejs.org/zh/config/#css-extract

module.exports = {
  lintOnSave: false,
  css: {
    extract: false
  }
}

通过header中注入字符串形式样式<style type="text/css"></style>

第五步

import { IndexList } from '@xnfe/index-list'

其他

vue-cli 3.0 查看webpack配置 命令行输入，指定将内容输出到aa.js文件中

vue inspect --mode=development -->aa.js