vue组件库开发

骑猪看日落 2023-06-20 09:16 25阅读 0赞

##### 开发流程 #####

1.创建项目，(vue-cli/公司现有架构)
    2.调整项目静态目录结构
    3.使用webpack相关库模式打包编译
    4.使用npm或者公司源地址发布到你需要的平台

##### 步骤 #####

1.  创建项目，省略；
2.  调整项目静态目录结构
    
    > 在项目同级目录下创建lib文件夹 => assets / components / css / utils / index.js / UploadUi.vue (依据自己喜好而定)  
    > lib => 存放组件相关依赖  
    > src => main.js 我们本地调试组件入口  
    > src => App.vue 我们本地调试组件使用地
    
        ├─build
        │      build.js  // 用于执行构建
        │      webpack.base.conf.js   // 通用配置
        │      webpack.dev.conf.js   // 开发环境
        │      webpack.prod.conf.js // 用于生成library的代码 -- upload-ui.js
        │
        ├─dist
        │     upload-ui.js // library 文件
        │
        ├─lib    // example目录
        │   └─ assets // 静态文件
        │	└─ components  // 公共组件
        │	└─ css // 组件内部公共样式依赖
        │	└─ utils // 组件依赖公共方法
        │      index.js // 全量引入公共组件，并暴露出来，包含install方法可供vue引入使用该插件
        │      UploadUi.vue
        │
        ├─src
        │  │  App.vue  
        │  └─ main.js // 组件本地调试入口
        │
        ├─package.json  // 项目包依赖

##### 开发 #####

1.  在lib文件下的UploadUi.vue文件开始开发
    
        <template>
        	<div class="upload-card-entry">我是upload-ui组件编写入口</div>
        </template>
        <script>
        	export default { 
        		name: 'UploadUI' // 与组件注册名字必须保持一致
        	}
        </script>
2.  在lib文件下的index.js文件进行注册组件或批量注册组件，暴露出去，
    
        // 存在组件间循环引用的场景，因此在外部统一注册
        import UploadUI from './UploadUI.vue';
        
        const install = (Vue) => { 
          Vue.component(UploadUI.name, UploadUI)
        }
        
        export default { 
          install,
          version: '1.0.0'
        }
3.  在src下的main.js文件引入我们的组件，在src/App.vue中使用进行本地测试是否成功
    
        import Vue from 'vue'
        import App from './App.vue'
        import UploadUi from '../lib/index';
        
        Vue.use(UploadUi);
        
        new Vue({ 
          el: '#app',
          render: h => h(App)
        })
4.  使用webpack相关库模式打包编译
    
    > 修改打包入口、package.json文件;涉及到打包输入输出，编译上传发布
    
        const webpackConfig = merge(baseWebpackConfig, { 
          mode: 'production',
          module: { 
            rules: cssLoader.styleLoaders({ 
              sourceMap: config.cssSourceMap
            })
          },
          devtool: false,
          
          entry: path.resolve(__dirname, '../lib/index.js'), // 打包入口文件地址
        
          output: { 
            path: path.resolve(__dirname, '../dist'),
            filename: 'upload-ui.js',
            library: 'upload-ui', //模块名称
            libraryTarget: 'umd', //输出格式
            umdNamedDefine: true //是否把模块名作为AMD输出的命名空间
          },
        
          externals: {  // Vue组件库只提供组件，Vue文件自身需要组件库使用者在项目中自行引入，库中无需打包。所以我们可以把Vue加到externals中。
            vue: 'vue'
          },
        
          plugins: [
            // 设置默认环境变量
            new webpack.DefinePlugin({ 
              'process.env': env_build
            }),
          ]
        })
    
    > package.json 文件配置，只显示了部分重要的
    
        { 
          "name": "vue-upload-ui",
          "version": "1.1.5", // 注意每次发布npm，版本号不能重复
          "description": "上传upload-ui层组件",
          "author": "",
          "private": false, // 是否私有，必须指定为false才能发布到npm
          "main": "./dist/upload-ui.js", // 编译后包的入口文件
          "scripts": { 
            "dev": "webpack-dev-server --open 'Google Chrome' --inline --progress --config build/webpack.dev.conf.js",
            "build": "node build/build.js build"
          },
          "dependencies": {  // 业务依赖
          },
          "files": [ // 发布需上传的文件
            "lib",
            "dist"
          ],
          "devDependencies": {  // 开发依赖
          },
        }
5.  发布到npm上
    
        # 设置要发布的源，我发布的是公司搭建的私库
        npm config set registry http://registry.npmjs.org
        # 登录
        npm login
        # 发布
        npm publish