动漫在线制作网站,南宁seo结算,一个网站有个前端后端怎么做,洛阳网站建设学校组件库开发
环境搭建
menorepo
pnpmpnpm-workspacelerna 7.4.2 #xff08;已全局安装lerna#xff09;
1、初始化
1.1 新建项目目录root
1.2 在目录root中使用pnpm初始化packages.json文件#xff0c;新建 pnpm-workspace.yaml文件#xff0c; packages/文件夹
pnp…组件库开发
环境搭建
menorepo
pnpmpnpm-workspacelerna 7.4.2 已全局安装lerna
1、初始化
1.1 新建项目目录root
1.2 在目录root中使用pnpm初始化packages.json文件新建 pnpm-workspace.yaml文件 packages/文件夹
pnpm-workspace.yaml有这个文件表示开启工作区。
文件内容如下
// root/pnpm-workspace.yamlpackages:- packages/*
// root/lerna.json{version: 0.0.0,npmClient: pnpm
}1.3 在root/packages/文件夹中新增子项目使用lerna create button创建button子项目。
或直接新建对应文件夹以及其中的文件…
使用lerna create button创建的button子项目内容如下
root/||packages/||button/|__test__/ 测试文件存放|src/ 项目代码|index.vue|index.js 入口文件|packages.json|READEME.mdroot/ packages/ button/ src/ index.vue 文件写入内容
templateh1this button component 123/h1
/templatescript
export default {name: ls-button,setup() {}
}
/scriptroot/ packages/ button/ index.js 文件写入内容
import Button from ./src/index.vueButton.install function (app) {app.component(Button.name, Button)
}export default Button导出该项目中的各组件。
root/ packages/ button/ packages.json 文件写入内容
{name: liindata/ls-button, // 注意这里的名字下边要用的version: 0.0.0,description: TODO: description,author: zhangxm zxumei.com,homepage: ,license: ISC,main: index.js,directories: {lib: src,test: __tests__},files: [src],scripts: {test: node ./__tests__/button.test.js}
}1.4 新建 root/play/文件夹。这里用来启动服务来测试组件或在这里编写组件库的示例文档等等等等
这里使用 vite 来配置开发环境
root/play/|src/|App.vue|main.js|index.html|vite.config.js root/ play/ src/ App.vue 文件写入内容
templateh1monorepo demo 1/h1lsbutton/lsbutton
/template
script setupimport Lsbutton from liindata/ls-button // 这里引入我的/script
root/ play/ main.js 文件写入内容
import {createApp} from vue
import App from ./App.vueconst app createApp(App)app.mount(#app)root/ play/ vite.config.js 文件写入内容
import { defineConfig } from vite
import vue from vitejs/plugin-vueexport default defineConfig({plugins: [vue()]
})这时候准备工作已经ok
2、依赖安装
经过第一步肯定有很多疑问比如使用了 vue、vite 但没有引入。 这里建议思考一下都要安装那些依赖以及如何启动vite 2.1 安装依赖
安装 vite
pnpm add vite -w
pnpm add vitejs/plugin-vue -w -D
安装 vue
pnpm add vue -w
进入root/packages/button/中 执行命令, 把button 包软链到根目录。以便其它包使用…
pnpm link --dit ../../执行后在根目录 root/package.json 中
会自动添加 liindata/ls-button: link:D:/work/liindata-ui-pnpm/packages/button
完整内容如下。
{name: liindata/root,scripts: {play: vite serve ./play 这里配置root/play 为根目录启动vite},dependencies: {liindata/ls-button: link:D:/work/liindata-ui-pnpm/packages/button,lerna: 7.4.1,vue: ^3.3.7},devDependencies: {vitejs/plugin-vue: ^4.4.0,vite: ^4.5.0}
}
pendencies: { “liindata/ls-button”: “link:D:/work/liindata-ui-pnpm/packages/button”, “lerna”: “7.4.1”, “vue”: “^3.3.7” }, “devDependencies”: { “vitejs/plugin-vue”: “^4.4.0”, “vite”: “^4.5.0” } }
执行 pnpm play 即可启动vite
