vue-demi 单文件组件模板库

变更

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

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

js 复制代码

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

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

js 复制代码

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

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

流程

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

js 复制代码

pnpm install
npm run dev:3

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

html 复制代码

// 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中引入组件，验证组件没问题后再打包

js 复制代码

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

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

js 复制代码

npm run build

1. 发包前检查 name，变更version

js 复制代码

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

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

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

less 复制代码

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

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

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

// 发布打包产物dist
npm publish

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

js 复制代码

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

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

// 安装包
npm install [email protected]

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

js 复制代码

// 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项目暴露的所有组件