本文介绍: 写在前面你好,我是前端程序员鼓励师岩家兴!去年在另一个项目https://juejin.cn/post/7121736546000044046中,我向读者朋友们介绍结合npm管理工具yarnvue3项目monorepo架构设计今天,在这个风和日丽阳光明媚的钱塘江畔,我心情很好,我打算再写一篇她的姊妹篇——基于Vue3+TS的Monorepo前端项目架构设计实现(pnpm版本

写在前面

你好,我是前端程序员鼓励师岩家兴!去年在另一个项目https://juejin.cn/post/7121736546000044046中,我向读者朋友们介绍了结合npm管理工具yarnvue3项目monorepo架构设计。今天,在这个风和日丽阳光明媚的钱塘江畔,我心情很好,我打算再写一篇她的姊妹篇——基于Vue3+TS的Monorepo前端项目架构设计与实现(pnpm版本)。

额,别看标题起的吓人且正经,像是在搞研究论文一样,其实就那么点东西,炒冷饭,大体上就是把之前是yarn设计的monorepo架构项目,在新的项目里用pnpm一次新的尝试改造,仅此而已,若有不对,供学习交流批评指正!

Vue3介绍

额,vue3是一个前端开发框架生态系统完备,你可以把它理解手动挡小轿车。它区别于Vue2的特性之一是,它是Composition API构造,在这之前Vue2使用的是Option API。还有一个消息,之前Vue2使用的Object.defineProperty数据绑定响应式,而Vue3使用了更为先进的Proxy做这件事,更为优雅了很多。Vue3中还有很多新的语法糖和写法构建工具可以选择比较新的Vite、一些现成的开发框架github上搜element uiant vue designview ui之类的解决方案吧,一些钩子比如antfu大佬的@vueuse之类的。

部分知识就介绍到这里,具体的你如果看得进去文档就去官网文档github源码看,你如果看不进去你就掘金上买点掘金大佬写的掘金小册吧,我看了下Vue2、Vue3好多都有的,买之前建议你看下评价读下章节再买,这个支持七天无理由退款的。

Typescript介绍

Typescript是JavaScript的超集,介绍完毕!

部分知识介绍到这里,如果你看得进去文档建议你去看MDN的Javascript、EcmaScript文档,以及微软公司的Typescript文档;看不进去推荐你去掘金上买掘金大佬写的掘金小册,其它友商的价格虚高,我觉得掘金小册的价格还行,嗯。

推荐的Vue开箱即用项目

这里推荐我的好朋友极客恰恰老师的Vue3开箱即用项目,该项目基于vue3+ElementPlus+Typescript+Vite搭建一套通用的后台管理模板;并基于常见业务场景抽象常见功能组件;包括动态菜单菜单权限登录主题切换国际化个人中心表单页、列表页、复制文本二维码分享等等

地址是:https://github.com/GeekQiaQia/vue3.0-template-admin

开源不易,且forkstar且珍惜,因为是开源的嘛,所以如果你有什么好的想法和实现,也欢迎你去提PR去提ISSUES帮助项目变得更好更强大。

推荐的node版本管理工具

因为你工作不可能说你只开发一个项目,然后很多项目node版本又不一样,难道是要卸载再重装吧,直接nvm吧,具体的请百度自行安装

推荐的npm管理工具

因为你工作不可能说你只开发一个项目就被裁了,然后多个项目不同负责人的包管理工具又千奇百怪,直接用pnpm吧,因为安装快、全局Storehard link管理支持monorepo等。

pnpmworkspace实操

一步,先初始化一个项目

pnpm init

第二步创建pnpmworkspace.yaml

这里分为两个方向,请结合一张图看,第一部分是Web应用程序,它可能一个项目有很多个端和平台,所以放到applications目录,还有一个公共组件样式资源啊钩子函数工具包啊都放到packages下统一维护。

这里为了便于展示,我把node_modules暂时设置展示,读者可以清楚看到层级分明的前端项目解决方案

第三步:各大配置文件

eslint语法规约
module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  plugins: ['prettier'],
  extends: ['@antfu', 'plugin:prettier/recommended', 'eslint-config-prettier', 'prettier'],
  rules: {
    // 生产环境不允许打出log
    'no-console': process.env.NODE_ENV === 'production' ? 2 : 0,
    // 关闭catch捕获err处理
    'n/handle-callback-err': 0,
    // 关闭未使用的ts变量声明
    '@typescript-eslint/no-unused-vars': 0,
    // 关闭vue不用有重复key
    'vue/no-dupe-keys': 0,
    // 关闭没有声明emits
    'vue/require-explicit-emits': 0,
    // 关闭变量在上级作用域定义
    'vue/no-template-shadow': 0,
    'vue/valid-v-slot': 0,
  },
}
editorconfig抹平编辑器差异
[*.{js,jsx,ts,tsx,vue}]
# 缩进使用空格
indent_style = space
# 缩进2个字符
indent_size = 2
# 行结尾使用 lf !!!!
end_of_line = lf
# 删除行尾空格
trim_trailing_whitespace = true
# 文件结尾添加一个空行
insert_final_newline = true
# 行最大长度
max_line_length = 120
prettier书写规范
module.exports = {
  printWidth: 120,
  tabWidth: 2,
  useTabs: false,
  semi: false,
  singleQuote: true,
  quoteProps: 'as-needed',
  bracketSpacing: true,
  jsxSingleQuote: true,
  arrowParens: 'always',
  endOfLine: 'lf',
  htmlWhitespaceSensitivity: 'ignore',
  overrides: [
    {
      files: '*.json',
      options: {
        printWidth: 200,
      },
    },
  ],
}

第四步:配置git提交钩子

执行楼下命令

pnpm install -wD commitizen cz-conventional-changelog

pnpm install -wD @commitlint/cli @commitlint/config-conventional husky

commitlint.config.js提交规范约束集合husky钩子触发

module.exports = {
  extends: ['@commitlint/config-conventional'],
  // 自定义提交消息规则
  rules: {
    'body-leading-blank': [2, 'always'],
    'footer-leading-blank': [1, 'always'],
    'header-max-length': [2, 'always', 108],
    'subject-empty': [2, 'never'],
    'type-empty': [2, 'never'],
    'type-enum': [
      2,
      'always',

      // Git提交信息开头引用以下这些类型
      [
        // 功能方面的提交
        'feat',

        // Bug方面的提交
        'fix',

        // 性能方面的提交
        'perf',

        // 针对代码样式提交(不是CSS样式)
        'style',

        // 文档方面的提交
        'docs',

        // 数据方面的提交
        'data',

        // 测试方面的提交
        'test',

        // 重构方面的提交
        'refactor',

        // 编译打包方面的提交
        'build',

        // 持续集成方面的提交
        'ci',

        // 持续部署方面的提交
        'cd',

        // 数据库方面的提交
        'db',

        // 其他修改比如构建流程依赖管理
        'chore',

        // 回滚方面的提交
        'revert',

        // 工作流方面的提交
        'workflow',

        // 定义TS类型方面的提交
        'types',

        // 配置方面的提交
        'config',

        // 优化方面的提交
        'refine',

        // 清除废弃多余无用代码文件的提交
        'clean',

        // 整理代码文件方面的提交
        'organize',

        // 依赖管理方面的提交
        'dependency',
        // 分支合并方面的提交
        'merge',
      ],
    ],
  },
}

需要把这些写到根目录package.json文件

第五步:润 润 润!

人和项目有一个能跑就好,我试试把项目跑起来

成功!教程就介绍到这里,若有那部分理解的,欢迎通过羽雀相关信息找到我!

pnpm workspace相关命令

额,为了便于读者理解,我这边直接代入一个具体的包做讲解,你在使用的时候只要注意下改成你自己的包就好。

最后

感谢阅读,因为之前也写过类似的,所以一些细节请参见她的姊妹篇https://juejin.cn/post/7121736546000044046

简单地说下优点:高可复用逻辑思路简洁明了,公共的抽离出来便于单独维护升级

这里简单地讲下我的偷懒吧,我不高兴打那么长的字母,我给它阉割了一些字母,具体的如下

这样子比如你要运行一个项目pnpm pl:dev就好了,少打了好多个字母可以摸鱼了,2333333333。

原文地址:https://blog.csdn.net/weixin_45769444/article/details/129153744

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任

如若转载,请注明出处:http://www.7code.cn/show_36660.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注