前端框架搭建——从零到一搭建一个高颜值Vue3后台管理系统(一)-外链论坛

4lqedz 发表于 2024-10-10 05:19:48

前端框架搭建——从零到一搭建一个高颜值Vue3后台管理系统(一)

<h1 style="color: black; text-align: left; margin-bottom: 10px;">项目展示</h1>
<h1 style="color: black; text-align: left; margin-bottom: 10px;">登录</h1>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-axegupay5k/7c73d6146f5c4983b7b2c135f77f554d~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1728744670&x-signature=8sP6JT315hn363QqDPq5%2FFkYFWk%3D" style="width: 50%; margin-bottom: 20px;"></div>
<h1 style="color: black; text-align: left; margin-bottom: 10px;">首页</h1>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-twdt4qpehh/1f074dd1ed4d4104a41d3f93e4abb6d9~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1728744670&x-signature=hsQFKw0%2BdLTH75H%2Bpksrpwo5kMw%3D" style="width: 50%; margin-bottom: 20px;"></div>
<h1 style="color: black; text-align: left; margin-bottom: 10px;">列表</h1>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-twdt4qpehh/f9a4d04a10054784bc89bbc4878adec5~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1728744670&x-signature=CvXhbEwyeiNpRlHkd35YvH6kxO4%3D" style="width: 50%; margin-bottom: 20px;"></div>
<h1 style="color: black; text-align: left; margin-bottom: 10px;">深色侧边栏</h1>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-twdt4qpehh/10956c4907e945fe93d0c011e8690af1~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1728744670&x-signature=u%2BK1eevmisVZp42cZgN9f3EpZHQ%3D" style="width: 50%; margin-bottom: 20px;"></div>
<h1 style="color: black; text-align: left; margin-bottom: 10px;">暗黑主题</h1>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-twdt4qpehh/79e3e0780ddc45ea9210a43ba0aef98c~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1728744670&x-signature=%2FVyVVizsABferWihDWhyJyvsQN8%3D" style="width: 50%; margin-bottom: 20px;"></div>
<h1 style="color: black; text-align: left; margin-bottom: 10px;">移动端</h1>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-twdt4qpehh/6914bc80fe2c4695a0cd37cc7459e84c~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1728744670&x-signature=R0JOMDzpRsaffNGU01w40aSrH1g%3D" style="width: 50%; margin-bottom: 20px;"></div>
<h1 style="color: black; text-align: left; margin-bottom: 10px;">关于</h1>
为何我要写这个项目呢，后台业务在项目中是很平常的，而市面上的后台框架其实都很好，然则非常多时候感觉封装的很深，因此是想要自己搭建一个框架方便后面自己运用，亦能够经过这种方式分享下经验和心得，日前的话这个项目不是一个赶工的项目，预计会连续更新产出。
<h1 style="color: black; text-align: left; margin-bottom: 10px;">技术栈</h1>
此项目触及的技术栈重点有Vue3Element PlusPiniaUnocssAxiosTypeScript├── public # 不参与编译的资源文件
├── build # 构建时的有些插件配置
├── src # 主程序目录
│ ├── api # api请求
│ ├── assets # 资源文件│ │ ├── svg# svg图标
│ │ └── images # 照片资源
│ ├── components # 全局公共组件
│ ├── config # 主题关联配置
│ ├── directives # 自定义指令
│ ├── hooks # hooks
│ ├── layout # 页面结构组件│ ├── locales# 国际化
│ ├── plugins # 加载插件与静态
│ ├── router # 路由目录
│ ├── store # pinia 配置
│ ├── style # 样式目录
│ ├── utils # 工具类
│ ├── views # 页面
│ ├── APP.vue # App.vue
│ └── main.ts # main.ts
├── types # 全局类型
├── .editorconfig # 代码规范
├── .prettierrc.js # 代码规范
├── .eslintrc # 代码规范
├── tsconfig.json # ts配置
├── uno.config.ts # unocss配置├── commitlint.config.js# 提交信息
├── vite.config.ts # vite配置

<h1 style="color: black; text-align: left; margin-bottom: 10px;">初始化配置</h1>
<h1 style="color: black; text-align: left; margin-bottom: 10px;">初始化项目</h1>jspnpm create vite vite-demo
cd vite-demo
pnpm install
pnpm dev
<h1 style="color: black; text-align: left; margin-bottom: 10px;">editorconfig</h1>在项目根目录下新建一个 .editorconfig 文件，重点功效为掌控编辑器行径（需要安装EditorConfig for VS Code插件）root = true

 [*] # 暗示所有文件适用
charset = utf-8 # 设置文件字符集为 utf-8
indent_style = space # 缩进风格（tab | space）
indent_size = 2 # 缩进体积
end_of_line = lf # 掌控换行类型(lf | cr | crlf)
trim_trailing_whitespace = true # 去除行首的任意空白字符
insert_final_newline = true # 始终在文件末尾插进一个新行

 [*.md] # 暗示仅 md 文件适用以下规则
max_line_length = off
trim_trailing_whitespace = false
<h1 style="color: black; text-align: left; margin-bottom: 10px;">prettier</h1>在项目根目录下新建一个 .prettierrc.js 文件，重点功效为格式化代码pnpm i prettier -Dmodule.exports = {
singleQuote: true,
printWidth: 100,
tabWidth: 2,
useTabs: false,
semi: true,
trailingComma: none,
endOfLine: auto
}
<h1 style="color: black; text-align: left; margin-bottom: 10px;">ESLint</h1>在项目根目录下新建一个 .eslintrc.js 文件，重点功效为修复代码格式错误（需要安装ESLint插件）pnpm i eslint eslint-config-prettier eslint-define-config eslint-plugin-prettier eslint-plugin-vue @typescript-eslint/eslint-plugin @typescript-eslint/parser @vue/eslint-config-typescript -Dmodule.exports = {
root: true,
env: {
node: true
},
parser: vue-eslint-parser,
parserOptions: {
parser:@typescript-eslint/parser,
ecmaVersion: 2018,
sourceType: module,
jsxPragma: React,
ecmaFeatures: {
jsx: true}
},
extends: [plugin:vue/vue3-recommended,
plugin:@typescript-eslint/recommended,
plugin:prettier/recommended,
eslint-config-prettier
],
rules: {
space-before-function-paren: off,
@typescript-eslint/ban-ts-ignore: off,
@typescript-eslint/explicit-function-return-type: off,
@typescript-eslint/no-explicit-any: off,
@typescript-eslint/no-var-requires: off,
@typescript-eslint/no-empty-function: off,
@typescript-eslint/no-use-before-define: off,
@typescript-eslint/ban-ts-comment: off,
@typescript-eslint/ban-types: off,
@typescript-eslint/no-non-null-assertion: off,
@typescript-eslint/explicit-module-boundary-types: off,
@typescript-eslint/no-unused-vars: [
error,
{
argsIgnorePattern: ^_,
varsIgnorePattern: ^_
}
],
no-use-before-define: off,
no-unused-vars: [
error,
{
argsIgnorePattern:^_,
varsIgnorePattern: ^_
}
],
vue/comment-directive: off,
vue/script-setup-uses-vars: error,
vue/multi-word-component-names: off,
vue/custom-event-name-casing: off,
vue/attributes-order: off,
vue/one-component-per-file: off,
vue/html-closing-bracket-newline: off,
vue/max-attributes-per-line: off,
vue/multiline-html-element-content-newline: off,
vue/singleline-html-element-content-newline: off,
vue/attribute-hyphenation: off,
vue/require-default-prop: off,
vue/html-self-closing: [
error,
{
html: {
void: always,
normal: never,
component: always
},
svg: always,
math: always}
]
}
}<h1 style="color: black; text-align: left; margin-bottom: 10px;">ts</h1>在项目根目录下新建一个 tsconfig.json 文件{
"compilerOptions": {
"baseUrl": ".",
"module": "ESNext",
"target": "ESNext",
"lib": ["DOM", "ESNext"],
"strict":true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"jsx": "preserve",
"moduleResolution": "node",
"isolatedModules": true,
"resolveJsonModule":true,
"noUnusedLocals": true,
"strictNullChecks": true,
"forceConsistentCasingInFileNames": true,
"paths": {
"@/*": ["./src/*"]
},
"types": ["vite/client","node"]
},
"include": [
"src/**/*.ts",
"src/**/*.d.ts",
"src/**/*.tsx",
"src/**/*.vue",
"types/**/*.d.ts",
"types/**/*.ts",
"build/**/*.ts",
"build/**/*.d.ts",
"mock/**/*.ts",
"vite.config.ts"
],
"exclude": ["node_modules", "dist"]
}
<h1 style="color: black; text-align: left; margin-bottom: 10px;">husky</h1>
重点功效在于提交代码前为咱们做有些事情，如格式化、检测提交规范等（需要先初始化git）1.pnpm install -D husky2.npx husky-init 在.husky/pre-commit下加入下面的代码#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

// 对应的script脚本为"lint": "eslint \"{src,mock,build}/**/*.{vue,ts,tsx}\" --fix"
pnpm lint
<h1 style="color: black; text-align: left; margin-bottom: 10px;">commitlint</h1>重点功效为提交代码时的规范名叫作检测在项目根目录下新建一个 commitlint.config.js 文件pnpm install -D @commitlint/config-conventional @commitlint/clinpx husky add .husky/commit-msg npx --no -- commitlint --edit ${1}module.exports = {
extends: [@commitlint/config-conventional],
rules: {
body-leading-blank: [2, always],
footer-leading-blank: [1, always],
header-max-length: [2, always, 108],
subject-empty: [2, never],
type-empty: [2, never],
subject-case: [0],
type-enum: [
2,
always,
[
feat, // 新功能
fix, // 修复bug
perf, // 性能优化
style, // 修改代码格式，不影响代码规律
docs, // 修改文档
test, // 修改测试用例
refactor, // 代码重构
build, // 构建流程、外边依赖变更（如升级 npm 包、修改 webpack 配置等）
ci, // 连续集成
chore, // 其它提交
revert, // 代码回滚
types, // ts
wip // 功能研发中
]
]
}
}

<h1 style="color: black; text-align: left; margin-bottom: 10px;">约束包管理器</h1>在package.json里新增scripts脚本"preinstall": "npx only-allow pnpm"，功效项目里只能运用pnpm好了，初期的有些工程化咱们就做好了，后面的后面再说吧~
作者：小心海一拳打爆提瓦特
 链接：https://juejin.cn/post/7281185552811917375

nykek5i 发表于 2024-10-31 19:31:22

软文发布平台 http://www.fok120.com/

页: [1]

外链论坛's Archiver

前端框架搭建——从零到一搭建一个高颜值Vue3后台管理系统(一)