vuecli封装组件并上传至npm过程

效果图和组件结构图

效果图

组件结构

el-table组件二次封装过程

table主文件：index.vue

各个类型组件：/src/components/table/control/text/index.vue

入口引用文件：/src/views/content/index.vue

将组件包上传至npm

1、注册账号： 链接： https://www.npmjs.com/ （账号、邮箱（密码找回）、密码）

2、包准备

在项目里创建一个文件夹存放所有的封装组件，并将封装的组件整个文件夹（table）放置在package文件夹内并创建一个组件注册入口文件index.js，如：

package组件注册入口文件 /package/index.js

/*
 * @Descripttion: 
 * @version: v.1
 * @Author: 吴泽豪
 * @Date: 2023-02-03 10:22:24
 * @LastEditors: 吴泽豪
 * @LastEditTime: 2023-02-04 13:13:01
 */
//所有组件注册入口，批量注册
import aTable from "../package/table/index.vue"
const coms = [aTable]

const install = function(Vue){
    coms.forEach(com=>{
        Vue.component(com.name, com)
    })
}

export default install

3、打包

在总项目 /package.json创建打包命令package

  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "package": "vue-cli-service build --target lib ./src/package/index.js --name t-table --dest a-table"
  },
—target lib 指定打包目录
—name 打包后的文件名字
—dest 打包后的文件夹名称

运行 npm run package 生成包，如图：

待上传至npm

4、上传准备条件，创建/a-table/package.json，对应写名称（唯一）

{
  "name": "wzh-table",
  "version": "1.0.1",
  "description": "",
  "main": "t-table.common.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

5、上传(将 npm 包 切换到官网源，不要用淘宝源)

登录时会提示打开浏览器登录，登陆后就会把Access Tokens加入npm

6、之后执行 npm publish

7、下载使用命令

npm i wzh-table --legacy-peer-deps 

8、引入使用

/*
 * @Descripttion: 
 * @version: v.1
 * @Author: 吴泽豪
 * @Date: 2023-02-01 17:16:34
 * @LastEditors: 吴泽豪
 * @LastEditTime: 2023-02-04 12:54:37
 */
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import hasPermiss from '@/utlis/permission'
// 引入
import wzhtable from 'wzh-table'

Vue.config.productionTip = false
Vue.use(ElementUI)
//注册
Vue.use(wzhtable)
//自定义的指令插件
Vue.use(hasPermiss)
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')