The bigger the project is, the bigger it is. This is how I split it

Writing background ：

  A few years ago  Vue  In the reconstruction of the project, the original +H5  In the form of module menu, multiple  Vue  project , Consider the high cost of multi project maintenance when splitting , We will promote the resources used by the public to the project  root  Under the table of contents , Extract subprojects as templates and create each subproject through customized scaffolding to  modules  Next , And support separate packaging 、 Released separately . The advantage of this project structure is to avoid the long loading time of the first screen caused by the huge project , It also avoids the contradiction caused by the conflict of multi person development . Such a project structure now seems to be used in many projects , such as  Vue、Vite  etc. , They are used together  PNPM  Package manager to organize such projects . And I'm here  B  Station found a partner using  PNPM  Built with  PC  front end 、PC  Back end 、H5  Project templates like the front end . Let's do it together ~

PNPM  Introduce ：

PNPM  Characteristics ：

• Save disk space and increase installation speed ;

• Create a non flattened  node_modules  Folder .

PNPM  And  NodeJs  Versioning support ：

The above table is from ：;

PNPM  Compare with other package management functions ：

The above table is from ：;

install  PNPM：

npm install -g pnpm

Quick start command ：

• In the project root Directory installs all dependencies ：
  pnpm install
  ;

• In the project root Directory installation specifies dependencies ：
  pnpm add <pkg>
  ;

• In the project root Directory operation CMD command ：
  pnpm <cmd>
  ;

• Run in a specific subset CMD command ：
  pnpm -F <package_selector> <command>
  ;

Together ：

utilize  [email protected]  Templates to create  root  project ：

pnpm create [email protected]


Define the workspace directory structure

Use  **pnpm ** Managed project support in  **root ** Use... In the directory  

pnpm-workspace.yaml

  File to define the workspace directory

packages:
 # all packages in direct subdirs of packages/
 - 'packages/*'
 # all packages in subdirs of components/
 - 'components/**'
 #  Get data related packages in  apis  Under the table of contents
 - 'apis/**'
 #  The packages related to general tools are  utils  Under the table of contents
 - 'utils/**'


Use  vite  To initialize the common module ：

Use  vite  Built in basic project template creation  apis、utils Two common modules

establish  apis  project ：

yarn create vite


establish  utils  project ：

yarn create vite


adjustment  apis、utils  Project name and version number of ：

Use  vite  To initialize the business module ：

Business modules are created to  packages  Under the table of contents , Create the command as in the previous section , We'll use  vite  Built in  vue-ts  Templates

Create three module project , The overall directory structure is as follows ：

my-workspace 
├─ apis 
│ ├─ src 
│ ├─ package.json 
│ └─ tsconfig.json 
├─ utils 
│ ├─ src 
│ ├─ package.json 
│ └─ tsconfig.json 
├─ packages 
│ ├─ module1 
│ ├─ module2 
│ └─ module3 
├─ public 
├─ src 
├─ env.d.ts 
├─ index.html 
├─ package.json 
├─ pnpm-lock.yaml 
├─ pnpm-workspace.yaml 
├─ README.md 
├─ tsconfig.config.json 
├─ tsconfig.json 
└─ vite.config.ts 


Adjust the name and version number of the three module projects

Use of unified package manager ：

In each module created  

package.json

  Add one

script

, The contents are as follows ：

"preinstall": "npx only-allow pnpm"


Development utils modular ：

Development Clipboard Tool class （ Support mobile terminal and PC There are two prompt styles ）：

Get ready Clipboard Tool class ：

import Clipboard from 'clipboard'

export const handleClipboard = (text: string, event: MouseEvent) => {
 const clipboard = new Clipboard(event.target as Element, {
 text: () => text
 })
 clipboard.on('success', () => {
 clipboard.destroy()
 })
 clipboard.on('error', () => {
 clipboard.destroy()
 });
 (clipboard as any).onClick(event)
}


Configure dependencies ：

• install
  vueuse
  Dependency Library , Monitor screen changes ;

• install
  clipboard
  Dependency Library , Complete the basic functions of the pasteboard ;

• install
  element-plus
  PC Component library style ;

• install
  vant
  Mobile style component library ;

• install
  vue
  Dependency Library , Due to prompt Issues with peer dependencies found, Just install .

perfect Clipboard Tool classes to support different style prompts ：

utils\src\clipboard.ts

//  Manual import vant Notification component and style file in
import { Notify } from "vant";
import "vant/es/notify/style";

//  Manual import element-plus Notification component and style file in
import { ElMessage } from "element-plus";
import "element-plus/es/components/message/style/css";

//  Import the shear board foundation dependency
import Clipboard from "clipboard";
//  Import vueuse/core  Functions that monitor browser endpoint changes in
import { useBreakpoints, breakpointsTailwind } from "@vueuse/core";

const sm = useBreakpoints(breakpointsTailwind).smaller("sm");

/*  basis sm Value changes to change the use of different notification styles  */
export const clipboardSuccess = () =>
 sm.value
 ? Notify({
 message: "Copy successfully",
 type: "success",
 duration: 1500,
 })
 : ElMessage({
 message: "Copy successfully",
 type: "success",
 duration: 1500,
 });

/*  basis sm Value changes to change the use of different notification styles  */
export const clipboardError = () =>
 sm.value
 ? Notify({
 message: "Copy failed",
 type: "danger",
 })
 : ElMessage({
 message: "Copy failed",
 type: "error",
 });

export const handleClipboard = (text: string, event: MouseEvent) => {
 const clipboard = new Clipboard(event.target as Element, {
 text: () => text,
 });
 clipboard.on("success", () => {
 //  After the copy is successful, you will be prompted with the success notification
 clipboardSuccess();
 clipboard.destroy();
 });
 clipboard.on("error", () => {
 //  Prompt the failure notification content after the copy fails
 clipboardError();
 clipboard.destroy();
 });
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 (clipboard as any).onClick(event);
};


Export the relevant configuration of the tool class ：

• Configure unified export file （
  utils\index.ts
  ）：

export * from "./src/clipboard";


• modify
  package.json
  Of
  main
  Field ：

{
 "main": "index.ts"
}


take utils The module is installed to module1 project ：

• The following command is available at root Directory execution , adopt
  -F
  The position to execute the command is
  @it200/module1
  , The command to be executed is
  add
  .

pnpm -F @it200/module1 add @it200/utils


notes ： When

@it200/utils

After package upgrade , Executive execution

pnpm update

To update the relevant dependent versions .

• The dependency information after successful installation is as follows ：

{
 "dependencies": {
 "@it200/utils": "workspace:^0.0.1"
 }
}


stay module1 Try to use Clipboard function ：

• Add buttons in the template ：

<button @click=&quot;copy&quot;> Copy </button>


• stay
  setup
  Of
  script
  Add corresponding functions in and import
  handleClipboard
  ：

import { handleClipboard } from "@it200/utils";
const copy = (e) => {
 console.log("[ e ] >", e);
 handleClipboard("haha", e);
};


PC Prompt the style after the end copy is successful ：

Prompt the style after the mobile terminal copies successfully ：

Development  apis  modular ：

Development axios Tool class functions ：

Get ready axios Tool class ：

import axios, { AxiosRequestConfig } from "axios";

const pending = {};

const CancelToken = axios.CancelToken;
const removePending = (key: string, isRequest = false) => {
 if (Reflect.get(pending, key) && isRequest) {
 Reflect.get(pending, key)(" Cancel duplicate request ");
 }
 Reflect.deleteProperty(pending, key);
};
const getRequestIdentify = (config: AxiosRequestConfig, isReuest = false) => {
 let url = config.url;
 const suburl = config.url?.substring(1, config.url?.length) ?? "";
 if (isReuest) {
 url = config.baseURL + suburl;
 }
 return config.method === "get"
 ? encodeURIComponent(url + JSON.stringify(config.params))
 : encodeURIComponent(config.url + JSON.stringify(config.data));
};

//  Create a AXIOS example
const service = axios.create({
 baseURL: import.meta.env.VITE_BASE_API, // url = base url + request url
 // withCredentials: true, // send cookies when cross-domain requests
 timeout: 16000, //  request timeout
});

//  Request interceptor
service.interceptors.request.use(
 (config: AxiosRequestConfig) => {
 //  Block duplicate requests ( That is, the same request currently in progress )
 const requestData = getRequestIdentify(config, true);
 removePending(requestData, true);

 config.cancelToken = new CancelToken((c: any) => {
 Reflect.set(pending, requestData, c);
 });

 //  Preprocessing before request sending ( Such as : obtain token etc. )
 // if (store.getters.token) {
 // // let each request carry token
 // // ['X-AUTH-TOKEN'] is a custom headers key
 // // please modify it according to the actual situation
 // config.headers['X-AUTH-TOKEN'] = getToken()
 // }
 return config;
 },
 (error: any) => {
 // do something with request error
 console.log(error); // for debug
 return Promise.reject(error);
 }
);

// response interceptor
service.interceptors.response.use(
 (response: { config: AxiosRequestConfig; data: any }) => {
 //  Transfer completed requests from  pending  Remove
 const requestData = getRequestIdentify(response.config);
 removePending(requestData);
 const res = response.data;
 return res;
 },
 (error: {
 message: string;
 config: { showLoading: any };
 response: { status: any };
 request: any;
 }) => {
 console.log(error.message);
 if (error) {
 if (error.response) {
 switch (error.response.status) {
 case 400:
 error.message = " Wrong request ";
 break;
 case 401:
 error.message = " unauthorized , Please login again ";
 break;
 default:
 error.message = ` Connection error ${error.response.status}`;
 }
 const errData = {
 code: error.response.status,
 message: error.message,
 };
 console.log(" Unified error handling : ", errData);
 } else if (error.request) {
 console.log(" Unified error handling : ", " Network error , Please try again later ");
 }
 }
 return Promise.reject(error);
 }
);

export default service;


Configure dependencies ：

• install
  axios
  Dependency Library , Complete the sending and processing of data requests ;

• install
  vant
  Dependency Library , Status prompt after completing the request data .

explain ： stay

apis

In the module, the mobile terminal and PC The style of the end is switched ;

perfect axios Tool class ：

apis\src\axios.ts, Some logic has deletion , Only basic functions are guaranteed

import { Dialog } from "vant";
import "vant/es/dialog/style";

import { Toast } from "vant";
import "vant/es/toast/style";

import axios, { AxiosRequestConfig } from "axios";

const pending = {};

const CancelToken = axios.CancelToken;
const removePending = (key: string, isRequest = false) => {
 if (Reflect.get(pending, key) && isRequest) {
 Reflect.get(pending, key)(" Cancel duplicate request ");
 }
 Reflect.deleteProperty(pending, key);
};
const getRequestIdentify = (config: AxiosRequestConfig, isReuest = false) => {
 let url = config.url;
 const suburl = config.url?.substring(1, config.url?.length) ?? "";
 if (isReuest) {
 url = config.baseURL + suburl;
 }
 return config.method === "get"
 ? encodeURIComponent(url + JSON.stringify(config.params))
 : encodeURIComponent(config.url + JSON.stringify(config.data));
};

//  Create a AXIOS example
const service = axios.create({
 baseURL: import.meta.env.VITE_BASE_API, // url = base url + request url
 // withCredentials: true, // send cookies when cross-domain requests
 timeout: 16000, //  request timeout
});

//  Request interceptor
service.interceptors.request.use(
 (config: AxiosRequestConfig) => {
 //  Block duplicate requests ( That is, the same request currently in progress )
 const requestData = getRequestIdentify(config, true);
 removePending(requestData, true);

 config.cancelToken = new CancelToken((c: any) => {
 Reflect.set(pending, requestData, c);
 });

 //  Open or not loading
 if (config.showLoading) {
 Toast.loading({
 duration: 0,
 mask: true,
 forbidClick: true,
 message: " Loading ...",
 loadingType: "spinner",
 });
 }

 //  Preprocessing before request sending ( Such as : obtain token etc. )
 // if (store.getters.token) {
 // // let each request carry token
 // // ['X-AUTH-TOKEN'] is a custom headers key
 // // please modify it according to the actual situation
 // config.headers['X-AUTH-TOKEN'] = getToken()
 // }
 return config;
 },
 (error: any) => {
 // do something with request error
 console.log(error); // for debug
 Toast.loading({
 message: " Network error , Please try again ",
 duration: 1500,
 type: "fail",
 });
 return Promise.reject(error);
 }
);

// response interceptor
service.interceptors.response.use(
 (response: { config: AxiosRequestConfig; data: any }) => {
 //  Transfer completed requests from  pending  Remove
 const requestData = getRequestIdentify(response.config);
 removePending(requestData);

 if (response.config.showLoading) {
 Toast.clear();
 }

 const res = response.data;
 return res;
 },
 (error: {
 message: string;
 config: { showLoading: any };
 response: { status: any };
 request: any;
 }) => {
 console.log(error.message);
 if (error) {
 if (error.config && error.config.showLoading) {
 Toast.clear();
 }
 if (error.response) {
 switch (error.response.status) {
 case 400:
 error.message = " Wrong request ";
 break;
 case 401:
 error.message = " unauthorized , Please login again ";
 break;
 default:
 error.message = ` Connection error ${error.response.status}`;
 }
 const errData = {
 code: error.response.status,
 message: error.message,
 };
 console.log(" Unified error handling : ", errData);
 Dialog({ title: " Tips ", message: errData.message || "Error" });
 } else if (error.request) {
 Toast.loading({
 message: " Network error , Please try again later ",
 duration: 1500,
 type: "fail",
 });
 }
 }
 return Promise.reject(error);
 }
);

export default service;


To write userApi class , Summary about user Object data reading ：

apis\src\user.ts

import service from "./axios";

export const UserApi = {
 getUsers: () => service.get<any>(&quot;/users&quot;),
};


export userApi Class ：

• Configure unified export file （
  apis\index.ts
  ）：

export * from "./src/user";


• modify
  package.json
  Of
  main
  Field ：

{
 "main": "index.ts"
}


stay module2 Try to use userApi class ：

• Define templates ：

<template>
 <button @click=&quot;getUserList&quot;> Get the list of users </button>
 <ul>
 <li v-for=&quot;user in users&quot; :key=&quot;user.id&quot;>
 {{ user.name }}、{{ user.age }}
 </li>
 </ul>
</template>


• install 、 Import 、 Write logic ：

pnpm -F @it200/module2 add @it200/apis

<script setup lang=&quot;ts&quot;>
import { UserApi } from &quot;@it200/apis&quot;;
import { ref } from &quot;vue&quot;;
const users = ref();
const getUserList = async () => {
 const resp = await UserApi.getUsers();
 users.value = resp;
};
</script>


Use

Mockend

Come on Mock data ：

• Choose a plan that suits you ：

• Select the public project warehouse to install ,Github Organizations do not support free （ Just for a screenshot ）：

• In the project root New directory
  .mockend.json
  file ：

{
 "User": {
 "name": {
 "string": {}
 },
 "avatarUrl": {
 "regexp": "https://i\\.pravatar\\.cc/150\\?u=[0-9]{5}"
 },
 "statusMessage": {
 "string": [
 "working from home",
 "watching Netflix"
 ]
 },
 "email": {
 "regexp": "#[a-z]{5,10}@[a-z]{5}\\.[a-z]{2,3}"
 },
 "color": {
 "regexp": "#[0-9A-F]{6}"
 },
 "age": {
 "int": {
 "min": 21,
 "max": 100
 }
 },
 "isPublic": {
 "boolean": {}
 }
 }
}


• adopt  
  https://mockend.com/OSpoon/data-mock/users
    I can get it mock Data. ;

• Please refer to .

Development  Components  modular ：

Development Card Components , And applied to module3 In the project ：

Use pnpm create [email protected] To create a project template , Modify the project name and version number ：

Create as follows card Component directory structure ：

components 
├─ card 
│ ├─ src 
│ │ ├─ card.scss 
│ │ └─ index.vue 
│ └─ index.ts 


Component template and configuration ：

The component name passes defineComponent Function import , Read and use when registering components

<script lang=&quot;ts&quot;>
import { defineComponent } from &quot;vue&quot;;
export default defineComponent({
 name: &quot;it-card&quot;,
});
</script>
<script setup lang=&quot;ts&quot;>
const props = defineProps({
 shadow: {
 type: String,
 default: &quot;always&quot;,
 },
 bodyStyle: {
 type: Object,
 default: () => {
 return { padding: &quot;20px&quot; };
 },
 },
});
console.log(&quot;[ props ] >&quot;, props);
</script>

<template>
 <div class=&quot;it-card&quot;>
 <div :class=&quot;`is-${shadow}-shadow`&quot;></div>
 <div class=&quot;it-card__body&quot; :style=&quot;bodyStyle&quot;>
 <slot></slot>
 </div>
 </div>
</template>

<style lang=&quot;scss&quot; scoped></style>


Component style file ：

.it-card {
 border-radius: 4px;
 border: 1px solid #ebeef5;
 background-color: #fff;
 overflow: hidden;
 color: #303133;
 transition: 0.3s;

 .it-card__body {
 padding: 20px;
 }

 .is-always-shadow {
 box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
 }

 .is-hover-shadow:hover {
 box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
 }

 .is-never-shadow {
 box-shadow: none;
 }
}


Component installation plug-in ：

import type { App } from "vue";
import Card from "./src/index.vue";

export default {
 install(app: App) {
 app.component(Card.name, Card);
 },
};


stay Components Try to use Card Components ：

• Import component related configurations and install ,
  components\src\main.ts

import Card from "./components/card/index";
import "./components/card/src/card.scss";

app.use(Card);


• stay
  App.vue
  Used in components ：

<template>
 <it-card style=&quot;width: 235px&quot; :body-style=&quot;{ padding: '0px' }&quot;>
 <img
 src=&quot;https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png&quot;
 class=&quot;image&quot;
 />
 <div style=&quot;padding: 14px&quot;>
 <span> Delicious hamburger </span>
 <div class=&quot;bottom&quot;>
 <time class=&quot;time&quot;>&quot;2022-05-03T16:21:26.010Z&quot;</time>
 </div>
 </div>
 </it-card>
</template>


Prepare to import the relevant configuration of components ：

• Configure unified export file ：

import Card from "./src/components/card/index";
export default {
 Card,
};


• modify
  package.json
  Of
  main
  Field ：

{
 "main": "index.ts"
}


install 、 Import to module3：

• install
  components
  The component package ：

pnpm -F @it200/module3 add @it200/components


• Import
  components
  The component package ：

import Comps from "@it200/components";
import "@it200/components/src/components/card/src/card.scss";

app.use(Comps.Card);


• Use the same way Components Verification in the project , The effect is the same , I don't want to show it anymore .

Expand （Changesets Release changes ）：

Add related configuration ：

• install
  changesets
  To the workspace root directory ：

pnpm add -Dw @changesets/cli


• perform
  changesets
  Initialization command ：

pnpm changeset init


Generate a new changesets：

pnpm changeset


Be careful ： Please check before the first operation

git

Branch name and

.changeset\config.json

Medium

baseBranch

Is it consistent .

Generate examples ：

PS xxx> pnpm changeset
 Which packages would you like to include? · @it200/module3
 Which packages should have a major bump? · No items were selected
 Which packages should have a minor bump? · @it200/module3
 Please enter a summary for this change (this will be in the changelogs).
 (submit empty line to open external editor)
 Summary ·  increase components Configuration and use of modules

 === Summary of changesets ===
 minor: @it200/module3

 Note: All dependents of these packages that will be incompatible with
 the new version will be patch bumped when this changeset is applied.

 Is this your desired changeset? (Y/n) · true
 Changeset added! - you can now commit it

 If you want to modify or expand on the changeset summary, you can find it here
 info D:\daydayup\my-workspace\.changeset\purple-dodos-check.md


Release changes ：

Carry out orders , Based on the previously generated change set, the corresponding

package

Generate the corresponding

CHANGELOG.md

And improve the

version

, Version upgrading also needs to comply with the requirements of semantic version specification ：

pnpm changeset version


The next steps need to be considered according to the actual situation of the project , Here, the change log is generated 、 After the version number is upgraded, it will come to an end ~

summary ：

  The concept of workspace is used here to realize the splitting of large projects , Each individual module 、 Projects can be maintained independently 、 test 、 structure , At the same time  pnpm  Of  node_modules  Under the management mode, the disk space is saved and the installation speed is improved . It's just a small test here , More features have not been reflected , Need follow-up learning . There is no special agreement on the splitting and construction of the project, and what to do is exactly the same , The consideration in line with the actual situation is the best .