vue-demi 单文件组件模板库

• github.com/imal1/vue-d…
• zhuanlan.zhihu.com/p/597334820

变更

安装插件unplugin-vue2-script-setup，编写组件的时候就可以使用setup语法糖，且打包后被Vue2.x项目支持

• 1. vue2-playground/package.json 安装 "unplugin-vue2-script-setup"

"unplugin-vue2-script-setup": "^0.11.3",

• 2. vue2-playground/vite.config.ts 使用unplugin-vue2-script-setup/vite

import ScriptSetup from 'unplugin-vue2-script-setup/vite'

export const viteVue2Config = defineConfig({
  plugins: [vue2(), ...getSharedPlugins('v2'), ScriptSetup({}), fixCjsCompositionApi()],
  })

• 3.scripts/postinstall.js

const path = require('path') // 兼容低版本webpack项目引入path

exports:{
  [`./dist/style.css`]: `./${distDir}/style.css`, // Vue2.7 及更高版本引入css import 'gafc-signature/dist/style.css'

}

流程

• 1.安装项目包，运行项目

pnpm install
npm run dev:3

• 2.src目录下编写公用组件 + index.ts提供注册组件的install

// src/Demo.vue

// src/index.ts
import Demo from './Demo.vue'

export default {
  install(app: any, options?: Record<string, unknown>) {
    app.component('Demo', Demo)
  },
}

• 3.在vue3-playground 或 vue2-playground中引入组件，验证组件没问题后再打包

// vite.base.config.ts 打包的入口 + 出口
outDir
entry: path.resolve(__dirname, 'src/index.ts'),

• 4.打包: 打3个版本的包 v2 v2.7 v3

npm run build

• 5. 发包前检查 name，变更version

// dist产物
// package.json 版本 + 公有化 + publishConfig

"name": "aa-bb",
"version": "1.0.3",
"publishConfig": {
   "registry": "http://xxx"
},

• 6.上传包到npm 或者 私有服务器

// 登录源
npm login --registry=http://xxx

// 输入用户名 密码 邮箱
npm adduser 

// 看有无登录成功
npm who am i 

// 发布打包产物dist
npm publish

• 7.包服务器查看包有无发布成功，同时查看包的版本
• 8.安装远程包 【版本号若和上次一致，注意先删除yarn.lock || package-lock.json文件中该包的相关信息，再安装】

npm config set registry=https://registry.npmmirror.com

// 变更为包服务器地址
npm config set registry=http://xxx

// 安装包
npm install aa-bb@1.0.3

• 9.安装成功后，且无任何报错，再使用包

// main.js
import AaBb from 'aa-bb' // 会找到/node_modules/aa-bb/package.json中exports的导出内容
import 'aa-bb/dist/style.css'

app.use(AaBb) // 注册aa-bb项目暴露的所有组件