欢迎点击领取 -《前端开发面试题进阶秘籍》:前端登顶之巅-最全面的前端知识点梳理总结
开发流程
1.创建项目,(vue-cli/公司现有架构)
2.调整项目静态目录结构
3.使用webpack相关库模式打包编译
4.使用npm或者公司源地址发布到你需要的平台
步骤
- 创建项目,省略;
- 调整项目静态目录结构
在项目同级目录下创建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 // 项目包依赖
开发
-
在lib文件下的UploadUi.vue文件开始开发
<template> <div class="upload-card-entry">我是upload-ui组件编写入口</div> </template> <script> export default { name: 'UploadUI' // 与组件注册名字必须保持一致 } </script>
-
在lib文件下的index.js文件进行注册组件或批量注册组件,暴露出去,
// 存在组件间循环引用的场景,因此在外部统一注册 import UploadUI from './UploadUI.vue'; const install = (Vue) => { Vue.component(UploadUI.name, UploadUI) } export default { install, version: '1.0.0' }
-
在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) })
-
使用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": { // 开发依赖 }, }
-
发布到npm上
# 设置要发布的源,我发布的是公司搭建的私库 npm config set registry http://registry.npmjs.org # 登录 npm login # 发布 npm publish