前端开发框架
当前页

如何使用 ​

开始 ​

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

前言 ​

关于组件

项目虽然二次封装了一些组件，但是不可能所有的要求。所以，如果组件不满足你的要求，完全可以不用，甚至删除相关组件代码，本工程不限制对ElementPlus的使用，不必坚持使用项目自带的组件。

环境准备 ​

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

注意

  • 建议使用pnpm进行依赖安装
  • Node.js 版本要求16.x以上。
  • 支持使用npm，npm的方式已经在Devops流水线中顺利运行

工具配置 ​

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

  • VSCode
  • Vue3 snippets vue 提示
  • Volar
  • EsLint
  • StyleLint 样式顺序
  • koroFileHeader 文件头注释
  • GitLens 查看代码行提交记录

代码获取 ​

注意

注意存放代码的目录及所有父级目录不能存在中文、韩文、日文以及空格，否则后续使用过程中可能会遇到一些未知问题。

在低代码平台，使用对应的CPVF V2.4.2 前端模板创建项目后，同步到公司内部git或直接下载代码包

安装 ​

安装 Node.js ​

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

验证

bash
# 出现相应npm版本即可 
npm -v
# 出现相应node版本即可 建议 node 版本16.x 以上
node -v

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

安装依赖 ​
pnpm 安装 ​

建议使用pnpm进行依赖安装（pnpm速度更快，占用空间更少）。

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

bash
# 全局安装yarn
npm i -g pnpm
# 验证
pnpm -v # 出现对应版本号即代表安装成功
项目使用 ​

在项目根目录下，打开命令窗口执行

bash
- 1. 安装依赖 `pnpm install`
- 2. 运行 `pnpm dev`
- 3. 打包 `pnpm build`
npm script ​
bash
"scripts": {
  # 安装依赖
  "bootstrap": "pnpm install",
  # 运行项目
  "dev": "vite",
  # 构建项目
  "build": "cross-env REPORT=true vite build --mode production",
  # 构建子应用
  "build-micro": "cross-env REPORT=true vite build --mode micro",
  # 进行本地预览
  "serve": "vite preview --host",
  # 预览打包后的内容（先打包在进行预览）
  "preview": "pnpm build && vite preview",
  # 直接预览本地 dist 文件目录
  "preview:dist": "vite preview",
  # 类型检查
  "type:check": "vue-tsc --noEmit --skipLibCheck",
  "prepare": "husky install",
  # 执行 eslint 校验，并修复部分问题
  "lint": "eslint --fix",
  # 使用lint-staged进行格式检查
  "lint:lint-staged": "lint-staged",
  # 执行 stylelint 格式检查
  "stylelint": "stylelint **/*.{html,vue,css,sass,scss,less}"
},

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

结构说明 ​
bash
- .huskey 提交 git 进行 lint-stage 校验
- build 配置了部分打包插件，hmr 热更新、proxy 代理
- mock 配置 mock 模拟数据
- public 图片类的公共资源
- types 类型文件
- .env 默认标题和工程简称
- .env.development 开发环境下的配置
- .env.production 生产环境下的配置
- .env.micro 生产环境下微应用打包的配置
- Dockerfile Docker 部署文件
- nginx.conf nginx部署文件
- src
  - api 基础框架的一些请求 api
  - assets 静态文件
  - components 通用组件
  - directives 指令
  - enums 枚举
  - hooks
  - layouts 布局
  - router 路由
  - setting 项目配置
  - stores 状态管理
  - styles 样式代码
  - utils 工具类
    - axios 请求封装
    - i18n 多语言配置
    - operate dom 操作、url 处理
    - storage 前端缓存
    - cipher.ts 加密相关
    - emitter.ts 事件管理
    - is.ts 对象判断
  - views 业务代码
    - xxx   业务模块
      - api 业务模块api接口
      - common
        - http  继承系统axios，降低耦合，提供给当前业务块进行网络请求
        - utils 当前业务模块工具类
      - components  当前业务模块共享组件 
      - pages 前端路由文件
        - abc
          - index.vue 路由 /xxx/abc
          - xyz.vue   路由 /xxx/abc/xyz