开始
本文会帮助你从头启动项目
前言
关于组件
项目虽然二次封装了一些组件,但是可能不能满足大部分的要求。所以,如果组件不满足你的要求,完全可以不用甚至删除代码自己写,不必坚持使用项目自带的组件。
环境准备
你的本地环境需要安装 Yarn1.x、Node.js 和 Git
工具配置
如果您使用的 IDE 是vscode(推荐)的话,可以安装以下工具来提高开发效率及代码格式化
- Iconify IntelliSense - Iconify 图标插件
- windicss IntelliSense - windicss 提示插件
- I18n-ally - i18n 插件
- Vetur - vue 开发必备 (也可以选择 Volar)
- ESLint - 脚本代码检查
- Prettier - 代码格式化
- Stylelint - css 格式化
- DotENV - .env 文件 高亮
.vscode\extensions.json
{
"recommendations": [
"antfu.iconify",
"voorjaar.windicss-intellisense",
"lokalise.i18n-ally",
"octref.vetur",
"dbaeumer.vscode-eslint",
"esbenp.prettier-vscode",
"stylelint.vscode-stylelint",
"mikestead.dotenv"
]
}
代码获取
TIP
注意存放代码的目录及所有父级目录不能存在中文、韩文、日文以及空格。否则安装依赖后启动会出错。
从 GitHub 获取代码
# clone 代码
git clone https://github.com/anncwb/vue-vben-admin
从 Gitee 获取代码
如果从 github clone 代码较慢的话,可以尝试用 Gitee 同步代码到自己的仓库,再 clone 下来即可。
也可以通过下方地址进行 clone
git clone https://gitee.com/annsion/vue-vben-admin
注意
Gitee的代码可能不是最新的
安装
安装 Node.js
如果您电脑未安装Node.js,请安装它。
验证
# 出现相应npm版本即可
npm -v
# 出现相应node版本即可
node -v
如果你需要同时存在多个 node 版本,可以使用Nvm或者其他工具进行 Node.js 进行版本管理。
安装依赖
yarn 安装
必须使用 Yarn进行依赖安装。
其他包管理器安装不了需要自行处理
如果未安装yarn
,可以用下面命令来进行全局安装
# 全局安装yarn
npm i -g yarn
# 验证
yarn -v # 出现对应版本号即代表安装成功
依赖安装命令
在项目根目录下,打开命令窗口执行,耐心等待安装完成即可
# 安装依赖
yarn
imagemin 依赖安装失败解决方法
由于 imagemin 在中国不好安装。现提供几个解决方案
- 使用 yarn 在 package.json 内配置(推荐,项目内已集成,前提是必须使用 yarn)
"resolutions": {
"bin-wrapper": "npm:bin-wrapper-china"
}
- 使用 npm, 在电脑 host 文件加上如下配置即可
199.232.4.133 raw.githubusercontent.com
安装依赖时 husky 安装失败
如果出现了 husky
安装失败问题,请查看你的源代码是否为 github 直接下载的,直接下载的时候是没有.git
文件夹的,而husky
需要依赖git
才能安装。所以需要使用git init
初始化项目,在尝试重新进行安装即可。
npm script
"scripts": {
# 安装依赖
"bootstrap": "yarn install",
# 运行项目
"serve": "npm run dev",
# 运行项目
"dev": "vite",
# 构建项目
"build": "vite build && esno ./build/script/postBuild.ts",
# 清空缓存后构建项目
"build:no-cache": "yarn clean:cache && npm run build",
# 生成打包分析,在`Mac OS`电脑上执行完成后会自动打开界面,在`Window`电脑上执行完成后需要打开`./build/.cache/stats.html`查看
"report": "cross-env REPORT=true npm run build",
# 类型检查
"type:check": "vue-tsc --noEmit --skipLibCheck",
# 预览打包后的内容(先打包在进行预览)
"preview": "npm run build && vite preview",
# 直接预览本地 dist 文件目录
"preview:dist": "vite preview",
# 生成ChangeLog
"log": "conventional-changelog -p angular -i CHANGELOG.md -s",
# 删除缓存
"clean:cache": "rimraf node_modules/.cache/ && rimraf node_modules/.vite",
# 删除 node_modules (`window`系统手动删除该目录较慢,可以使用该命令来进行删除)
"clean:lib": "rimraf node_modules",
# 执行 eslint 校验,并修复部分问题
"lint:eslint": "eslint \"{src,mock}/**/*.{vue,ts,tsx}\" --fix",
# 执行 prettier 格式化,(该命令会对项目所有代码进行 prettier 格式化,请谨慎执行)
"lint:prettier": "prettier --write --loglevel warn \"src/**/*.{js,json,tsx,css,less,scss,vue,html,md}\"",
# 执行 stylelint 格式化
"lint:stylelint": "stylelint --fix \"**/*.{vue,less,postcss,css,scss}\" --cache --cache-location node_modules/.cache/stylelint/",
"lint:lint-staged": "lint-staged -c ./.husky/lintstagedrc.js",
"lint:pretty": "pretty-quick --staged",
# 对打包结果进行gzip测试
"test:gzip": "http-server dist --cors --gzip -c-1",
# 对打包目录进行brotli测试
"test:br": "http-server dist --cors --brotli -c-1",
# 重新安装依赖,,见下方说明
"reinstall": "rimraf yarn.lock && rimraf package.lock.json && rimraf node_modules && npm run bootstrap",
"install:husky": "is-ci || husky install",
# 生成图标集,见下方说明
"gen:icon": "esno ./build/generate/icon/index.ts",
"postinstall": "npm run install:husky"
},
rimraf
由于手动删除文件夹太慢了,需要实现脚本删除文件。
yarn add rimraf -D
$ clean:lib
清除依赖,删除node_modules文件夹。
生成图标集
该命令会生成所选择的图标集,提供给图标选择器使用
具体使用方式请查看 图标集生成
重新安装依赖
该命令会先删除 node_modules
、yarn.lock
、package.lock.json
后在进行依赖重新安装
安装速度会明显变慢
接下来你可以修改代码进行业务开发了,我们内建了模拟数据、HMR 实时预览、状态管理、国际化、全局路由等等各种实用的功能辅助开发,你可以继续阅读其他文档进行了解。
目录说明
.
├── 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
│ ├── layouts # 布局文件
│ │ ├── default # 默认布局
│ │ ├── iframe # iframe布局
│ │ └── page # 页面布局
│ ├── locales # 多语言
│ ├── logics # 逻辑
│ ├── main.ts # 主入口
│ ├── router # 路由配置
│ ├── settings # 项目配置
│ │ ├── componentSetting.ts # 组件配置
│ │ ├── designSetting.ts # 样式配置
│ │ ├── encryptionSetting.ts # 加密配置
│ │ ├── localeSetting.ts # 多语言配置
│ │ ├── projectSetting.ts # 项目配置
│ │ └── siteSetting.ts # 站点配置
│ ├── store # 数据仓库
│ ├── utils # 工具类
│ └── views # 页面
├── test # 测试
│ └── server # 测试用到的服务
│ ├── api # 测试服务器
│ ├── upload # 测试上传服务器
│ └── websocket # 测试ws服务器
├── types # 类型文件
├── vite.config.ts # vite配置文件
└── windi.config.ts # windcss配置文件
hooks
:因为Vue3中的Composition API
。所以可以抽离出大量的原来页面中重用代码都放在这里。logics
:如果一些代码是处理一些特殊逻辑的,它也不能算做工具类,也不是其他组件能重用的(或者说用的不多),这种代码放在这个文件夹中。比如初始化应用、主题修改等。icons
:该文件夹是之前svg
雪碧图插件的svg图片文件夹。images
:非svg
图片资源。svg
:这里面也是一些svg
图片,为什么没有放到icons
里面,是因为icons
可以通过SvgIcon
组件展示,但是这里面的svg图片,有些是放在css中的。