Nx monorepo 初体验

最近使用了Nx来做 monorepo 项目管理，然后发现网上的资料属实是有点少，写个文记录一下

以下以vite + vue3为例子创建须弥座

环境跟安装

• "node": "18.19.1",
• "npm": "10.2.4"

npm i nx 

安装教程看官方文档，安装完成之后的目录应该是这样的

所有的项目都会存放到apps这个目录里面。

安装可视化工具NxConsole

在编辑器的扩展里面安装就行了，我用的是webstorm，vscode的安装也一样，但是操作起来会有所不同，需要自己摸索

安装之后鼠标右键就可以可视化进行nx的一些操作

创建一个vue-test项目

鼠标在apps目录上右键，选中Nx Generate，会弹出个界面，输入vue之后选中@nx/vue - application Create a Vue application.，然后出现以下界面

选完之后，apps目录下会多出一个vue-test文件夹

创建js项目的坑

然后这里如果选择创建的是JS项目，就会有一个坑，Nx也不知道怎么回事，即使创建的是JS项目，他在index.html里面还是会选择导入/src/main.ts，这个时候去运行，vite就会一直报错找不到main.ts，需要将他改回来才行

创建一个共享库

这里以创建一个组件为例，在根目录下创建一个libs的文件夹，然后执行命令

npx nx generate @nx/vue:lib libs/v-header

其实我不是很能理解为什么我选择生成了一个vue组件的组件库但是会不给我生成index.vue反而是生成了index.ts。所以这里还要再创建一个index.vue。 然后还需要在根目录下的tsconfig.base.json文件将自动生成的别名给改一下

在项目内使用

<script setup lang="ts">
import vHeader from "@nx-monorepo-test/v-header";
</script>

<template>
  <div>
    <vHeader/>
  </div>
</template>

<style scoped lang="scss">
header {
  line-height: 1.5;
  max-width: 100vw;
}

nav > a {
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 768px) {
  header {
    display: flex;
    place-items: center;
    padding-right: calc(var(--section-gap) / 2);
    margin-left: auto;
    margin-right: auto;
    max-width: 768px;
  }

  nav {
    text-align: left;
    font-size: 1rem;

    padding: 1rem 0;
    margin-top: 1rem;
  }
}
</style>