vue组件库开发

前端登顶之巅–全方位为你梳理前端进阶之路、最全前端知识/面试点总结

开发流程

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