摸鱼低代码 mfish-nocode

切换深浅模式

当前页

开始 ​

本文会帮助你从头启动前端项目

前言 ​

关于组件

项目虽然二次封装了一些组件，但是可能不能满足大部分的要求。所以，如果组件不满足你的要求，完全可以不用甚至删除代码自己写，不必坚持使用项目自带的组件。

环境准备 ​

本地环境需要安装 pnpm、Node.js 和 Git

注意

  • 推荐使用pnpm，否则依赖可能安装不上。
  • Node.js 版本要求16.x以上，如果其他项目需要使用到低版本node，建议安装Nvm进行版本管理。

工具配置 ​

如果您使用的 IDE 是vscode(推荐)的话，可以安装以下工具来提高开发效率及代码格式化

代码获取 ​

注意

注意存放代码的目录及所有父级目录不能存在中文、韩文、日文以及空格，否则安装依赖后启动会出错。

从 GitHub 获取代码 ​

bash
# clone 代码
git clone https://github.com/mfish-qf/mfish-nocode-view

从 Gitee 获取代码 ​

如果从 github clone 代码较慢的话，可以尝试用 Gitee 同步代码到自己的仓库，再 clone 下来即可。

也可以通过下方地址进行 clone

bash
git clone https://gitee.com/qiufeng9862/mfish-nocode-view

注意

Gitee的代码可能不是最新的

安装 ​

安装 Node.js ​

注意

Node版本必须>=16.x

如果您电脑未安装Node.js，请安装它。

验证

bash
# 出现相应npm版本即可
npm -v
# npm 设置阿里镜像
npm config set registry https://registry.npmmirror.com
# 出现相应node版本即可
node -v

如果你需要同时存在多个 node 版本，可以使用 Nvm 或者其他工具进行 Node.js 进行版本管理。

pnpm 安装 ​

必须使用 pnpm进行依赖安装（若其他包管理器安装不了需要自行处理）。

如果未安装pnpm，可以用下面命令来进行全局安装

bash
# 全局安装yarn
npm install -g pnpm
# 验证
pnpm -v # 出现对应版本号即代表安装成功
# 设置国内镜像
pnpm config set registry https://registry.npmmirror.com

依赖安装命令 ​

在项目根目录下，打开命令窗口执行，耐心等待安装完成即可

bash
# 安装依赖
pnpm i

重新安装依赖 ​

该命令会先删除 node_modules、yarn.lock、package.lock.json 后再进行依赖重新安装（安装速度会明显变慢）。

接下来你可以修改代码进行业务开发了。我们内建了模拟数据、HMR 实时预览、状态管理、国际化、全局路由等各种实用的功能辅助开发，请阅读其他章节了解更多。

imagemin 依赖安装失败解决方法 ​

由于 imagemin 在国内安装困难，提供以下几个解决方案：

  1. 使用 yarn 在 package.json 内配置(推荐，项目内已集成，前提是必须使用 yarn)
json
"resolutions": {
  "bin-wrapper": "npm:bin-wrapper-china"
}
  1. 使用 npm，在电脑 host 文件加上如下配置即可
bash
199.232.4.133 raw.githubusercontent.com

安装依赖时 husky 安装失败

请查看你的源码是否从 github 直接下载的，直接下载是没有 .git 文件夹的，而 husky 需要依赖 git 才能安装。此时需使用 git init 初始化项目，再尝试重新安装即可。

运行 ​

开发环境运行 ​

注意

如果无后台环境，可以将.env.development中的VITE_PROXY和VITE_GLOB_OAUTH2_URL修改为我演示后台环境

bash
VITE_PROXY = [["/api","http://app.mfish.com.cn:11116"]]
VITE_GLOB_OAUTH2_URL = http://app.mfish.com.cn:11116/oauth2/authorize
bash
pnpm run dev

npm script ​

bash
"scripts": {
    "dev": "vite",
    "bootstrap": "pnpm install",
    "build": "cross-env NODE_ENV=production vite build && esno ./build/script/RunBuild.ts",
    "build:test": "cross-env vite build --mode test && esno ./build/script/RunBuild.ts",
    "build:no-cache": "pnpm clean:cache && npm run build",
    "report": "cross-env REPORT=true npm run build",
    "type:check": "vue-tsc --noEmit --skipLibCheck",
    "preview": "npm run build && vite preview",
    "preview:dist": "vite preview",
    "test:unit": "vitest --environment jsdom",
    "build-only": "vite build",
    "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
    "clean:cache": "rimraf node_modules/.cache/ && rimraf node_modules/.vite",
    "clean:lib": "rimraf node_modules",
    "lint:eslint": "eslint --cache --max-warnings 0  \"{src,mock}/**/*.{vue,ts,tsx}\" --fix",
    "lint:prettier": "prettier --write  \"src/**/*.{js,json,tsx,css,less,scss,vue,html,md}\"",
    "lint:stylelint": "stylelint --cache --fix \"**/*.{vue,less,postcss,css,scss}\" --cache --cache-location node_modules/.cache/stylelint/",
    "lint:lint-staged": "lint-staged",
    "gen:icon": "esno ./build/generate/icon/index.ts"
  }

生成图标集 ​

该命令会生成所选择的图标集，提供给图标选择器使用。具体使用方式请查看 图标集生成

目录说明 ​

yml
├── build # 打包脚本相关
│   ├── config # 配置文件
│   ├── generate # 生成器
│   ├── script # 脚本
│   └── vite # vite配置
├── mock # mock文件夹
├── public # 公共静态资源目录
├── src # 主目录
│   ├── api # 接口文件
│   ├── assets # 资源文件
│   │   ├── icons # icon sprite 图标文件夹
│   │   ├── images # 项目存放图片的文件夹
│   │   └── svg # 项目存放svg图片的文件夹
│   ├── components # 公共组件
│   ├── design # 样式文件
│   ├── directives # 指令
│   ├── enums # 枚举/常量
│   ├── hooks # hook
│   │   ├── component # 组件相关hook
│   │   ├── core # 基础hook
│   │   ├── event # 事件相关hook
│   │   ├── setting # 配置相关hook
│   │   └── web # web相关hook
│   ├── i18n # 多语言
│   ├── layouts # 布局文件
│   │   ├── default # 默认布局
│   │   ├── iframe # iframe布局
│   │   └── page # 页面布局
│   ├── logics # 逻辑
│   ├── router # 路由配置
│   ├── settings # 项目配置
│   │   ├── componentSetting.ts # 组件配置
│   │   ├── designSetting.ts # 样式配置
│   │   ├── encryptionSetting.ts # 加密配置
│   │   ├── localeSetting.ts # 多语言配置
│   │   ├── projectSetting.ts # 项目配置
│   │   └── siteSetting.ts # 站点配置
│   ├── store # 数据仓库
│   ├── utils # 工具类
│   ├── views # 页面
│   ├── App.vue # VUE入口
│   └── main.ts # 主入口
├── types # 类型文件
├── vite.config.ts # vite配置文件
└── windi.config.ts # windcss配置文件