快速开始

更好更快的帮助您初始化前端项目。

前言

关于组件

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

环境准备

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

注意

• Node.js 版本要求18.x以上，因为项目用的是vite6.x
• Git 版本要求2.x以上

工具配置

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

• Iconify IntelliSense - Iconify 图标插件
• windicss IntelliSense - windicss 提示插件
• I18n-ally - i18n 插件
• Vetur - vue 开发必备 （也可以选择 Volar）
• ESLint - 脚本代码检查
• Prettier - 代码格式化
• Stylelint - css 格式化
• DotENV - .env 文件 高亮

代码获取

注意

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

从git上获取

# PC端
git clone https://gitee.com/donymh/vue3-vite6-template.git

# 移动端
git clone https://gitee.com/donymh/vue3-vite6-h5-template.git

# 小程序
git clone https://gitee.com/donymh/vue3-vite6-taro-template.git

脚手架

通过脚手架 hive-create-app 获取

实用模板页下载

通过 实用模板 页面下载模板

安装

安装node

如果您电脑未安装Node.js，请安装它。 验证是否安装Node

# 出现相应npm版本即可
npm -v
# 出现相应node版本即可
node -v

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

已安装nvm

项目中看直接使用nvm use即可切换指定版本

安装依赖

推荐使用pnpm安装，如果需要npm或者yarn，请自行安装配置。

pnpm install

npm script

"scripts": {
  # 运行项目
  "serve": "vite",
  # 构建项目
  "build": "echo please use your env to run build",
  # 分环境构建项目
  "build:PROD": "vite build --mode prod",
  "preview": "vite preview",
  // eslint验证
  "lint": "eslint . --ext .vue,.js,.ts ./",
  // eslint验证修复
  "lint:fix": "eslint . --ext .vue,.js,.ts ./ --fix",
  // stylelint验证
  "stylelint": "stylelint src/**/*.{html,vue,css,scss}",
  // stylelint验证修复
  "stylelint:fix": "stylelint --fix src/**/*.{html,vue,css,scss}",
  // 类型检查
  "typecheck": "vue-tsc --noEmit",
  // 提交前检查
  "postinstall": "simple-git-hooks",
  "preinstall": "npx only-allow pnpm"
}

模板目录说明

.
├── scripts              # 构建相关文件
│   ├── vite           # vite 相关配置
│   │   ├── plugins    # vite 插件配置文件夹
│   │   ├── create-build.ts
│   │   ├── create-css.ts
│   │   └── create-server.ts
│   ├── config.ts       # vite 相关配置变量
├── dist                # 打包输出目录
├── public              # 公共静态文件
├── src                 # 源码
│   ├── api             # 接口请求
│   ├── assets          # webpack打包的资源
│   │   ├── icons       # icon sprite 图标文件夹
│   │   ├── images      # 项目存放图片的文件夹
│   │   ├── styles      # 项目存放样式的文件夹
│   │   └── svg         # 项目存放svg图片的文件夹
│   ├── components      # 公共组件
│   ├── config          # 业务所需配置文件, 是否需要接入APM、满意度等配置
│   ├── directives      # 全局指令
│   ├── hooks
│   ├── layouts         # 全局Layout
│   ├── router          # 路由
│   ├── store           # 全局store管理仓库
│   ├── types           # ts 声明
│   ├── utils           # 全局公共方法
│   ├── views           # 所有业务页面
│   ├── enums           # 全局ts字典
│   ├── constants       # 全局常量
│   ├── App.vue
│   ├── main.ts
│   └── shims-vue.d.ts
├── tests
├── .browserslistrc
├── .env                 # 通用环境变量
├── .env.prod
├── .env.development
├── .eslintignore
├── .eslintrc.cjs
├── .gitignore
├── .stylelintignore
├── .stylelintrc.cjs
├── app.config.js        # 系统布局、主题、字体等配置文件，和业务无关
├── index.html           # html模板文件
├── package.json
├── README.md
├── tsconfig.json  
├── tsconfig.node.json  
└── vite.config.js        # vue vite配置文件