<html lang="zh-CN">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<body class="nodata " style="">
<main style="width:100%">
<div class="blog-content-box">
<div class="article-title-box">
<h1 class="title-article" id="articleContentId">Vue3.2后台管理系统</h1>
</div><div id="article_content" class="article_content clearfix">
<link rel="stylesheet" href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/kdoc_html_views-1a98987dfd.css">
<link rel="stylesheet" href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/ck_htmledit_views-044f2cf1dc.css">
<div id="content_views" class="markdown_views prism-atom-one-dark">
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<path stroke-linecap="round" d="M5,0 0,2.5 5,5z" id="raphael-marker-block" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path>
</svg>
<p></p>
<div class="toc">
<h4><a name="t0"></a>文章目录</h4>
<ul><li><a href="#_5" target="_self">创建项目</a></li><li><ul><li><a href="#_12" target="_self">代码格式化</a></li><li><a href="#commit_25" target="_self">commit规范</a></li><li><a href="#commit_51" target="_self">强制commit</a></li><li><a href="#_82" target="_self">强制代码规范</a></li><li><a href="#elementplus_100" target="_self">按需导入elementplus</a></li><li><a href="#Vue32_135" target="_self">Vue3.2新特性</a></li></ul>
</li><li><a href="#_139" target="_self">初始化项目</a></li><li><ul><li><a href="#_152" target="_self">编写登录页面(静态)</a></li><li><a href="#svgicon_355" target="_self">svg-icon</a></li><li><ul><li><a href="#webpack_456" target="_self">进行webpack的使用</a></li></ul>
</li><li><a href="#_484" target="_self">表单验证</a></li><li><ul><li><a href="#_490" target="_self">接口</a></li></ul>
</li><li><a href="#_495" target="_self">发起登录请求</a></li><li><ul><li><a href="#_521" target="_self">跨域问题</a></li></ul>
</li><li><a href="#_569" target="_self">响应拦截器</a></li><li><a href="#token_612" target="_self">存储token</a></li><li><a href="#_653" target="_self">请求拦截器</a></li><li><a href="#_668" target="_self">路由守卫</a></li><li><a href="#layout_707" target="_self">layout</a></li><li><a href="#menus_742" target="_self">menus菜单</a></li><li><a href="#_752" target="_self">被动退出</a></li><li><a href="#_758" target="_self">汉堡按钮伸缩顶</a></li><li><a href="#_766" target="_self">动态面包屑导航</a></li><li><ul><li><a href="#_770" target="_self">头像退出</a></li></ul>
</li><li><a href="#i18n_775" target="_self">i18n使用</a></li><li><ul><li><a href="#_817" target="_self">中英切换</a></li></ul>
</li><li><a href="#_821" target="_self">全屏</a></li><li><a href="#_826" target="_self">引导页</a></li><li><a href="#_842" target="_self">表格静态页</a></li><li><a href="#_847" target="_self">全局属性</a></li><li><ul><li><a href="#_857" target="_self">分页器</a></li></ul>
</li><li><a href="#_861" target="_self">添加用户</a></li><li><a href="#_867" target="_self">编辑用户</a></li><li><a href="#_882" target="_self">删除用户</a></li></ul>
</li></ul>
</div>
<br> 项目所需要的
<a href="https://wwd.lanzouy.com/iLlaz0dnpx1g">资源——点击下载</a>
<p></p>
<p>主要实现功能有：中英文切换、全屏、引导页、表单的CRUD</p>
<h2><a name="t1"></a><a id="_5"></a>创建项目</h2>
<p><img src="https://img-blog.csdnimg.cn/add21091de8c4da4893db482478bb8fa.png" alt="在这里插入图片描述"><br> <img src="https://img-blog.csdnimg.cn/8b36589052a344ae8306c3a8398bc3e6.png" alt="在这里插入图片描述"><br> <img src="https://img-blog.csdnimg.cn/54c7aa9b0db3480b88216ef7a9da9847.png" alt="在这里插入图片描述"><img src="https://img-blog.csdnimg.cn/648a73737a2b4aa8b61bbd555848ee93.png" alt="在这里插入图片描述"></p>
<p><img src="https://img-blog.csdnimg.cn/c16df92df20649939ebcf61e424d4304.png" alt="在这里插入图片描述"><br> <img src="https://img-blog.csdnimg.cn/955c995812e94c549538bd050ec0716e.png" alt="在这里插入图片描述"><img src="https://img-blog.csdnimg.cn/4407ebf0f97e42c7819632d414b14d88.png" alt="在这里插入图片描述"><img src="https://img-blog.csdnimg.cn/2dda03d0d0104426813972df4c2d6b6b.png" alt="在这里插入图片描述"></p>
<h3><a name="t2"></a><a id="_12"></a>代码格式化</h3>
<p>VsCode安装一个代码格式化的插件：Prettier - Code formatter<br> <img src="https://img-blog.csdnimg.cn/8012370e8f5f4d40972feb20fe69fb98.png" alt="在这里插入图片描述">右键选中<code>使用...格式化文档</code></p>
<p><img src="https://img-blog.csdnimg.cn/981293a0ee6d4b3586516dea06894cd8.png" alt="在这里插入图片描述"><img src="https://img-blog.csdnimg.cn/28ee0a55ede847c4854b2a1db688f389.png" alt="在这里插入图片描述"><br> <img src="https://img-blog.csdnimg.cn/ee407820229c406286078cc3dd46cf96.png" alt="在这里插入图片描述"><img src="https://img-blog.csdnimg.cn/0738b6fae47749c6b79fef1e6a03b214.png" alt="在这里插入图片描述"><br> eslint和prettier可能存在冲突<br> 在配置下<code>.eslintrc.js</code>里的规则里的rules 新增</p>
<pre data-index="0" class="set-code-show prettyprint"><code class="has-numbering" onclick="mdcp.copyCode(event)" style="position: unset;">'indent': 0,
'space-before-function-paren': 0
<div class="hljs-button {2}" data-title="复制"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li></ul></pre>
<h3><a name="t3"></a><a id="commit_25"></a>commit规范</h3>
<p><a href="https://www.jianshu.com/p/635670ad2fca">Git Commit 提交规范</a></p>
<pre data-index="1" class="prettyprint set-code-show"><code class="has-numbering" onclick="mdcp.copyCode(event)" style="position: unset;">// git代码提交规范
1.安装commitizen和cz-customizable
npm install -g commitizen@4.2.4
npm i cz-customizable@6.3.0 --save-dev
2.在package.json中进行新增
"config": {
"commitizen": {
"path": "node_modules/cz-customizable"
}
}
3.在根目录下新建.cz-config.js文件并写入配置 之后就可以用 git cz 来代替 git commit
<div class="hljs-button {2}" data-title="复制"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li><li style="color: rgb(153, 153, 153);">12</li><li style="color: rgb(153, 153, 153);">13</li><li style="color: rgb(153, 153, 153);">14</li><li style="color: rgb(153, 153, 153);">15</li><li style="color: rgb(153, 153, 153);">16</li></ul></pre>
<p>注意：<br> <img src="https://img-blog.csdnimg.cn/2b3aa63d3cca49fb8ac21fcc7de5e906.png" alt="在这里插入图片描述"></p>
<p><img src="https://img-blog.csdnimg.cn/d026d271e07f4b919d0b74f4100ca16a.png" alt="在这里插入图片描述"><img src="https://img-blog.csdnimg.cn/e9bd5cc9908249a39620c17e244c0ae4.png" alt="在这里插入图片描述"></p>
<h3><a name="t4"></a><a id="commit_51"></a>强制commit</h3>
<pre data-index="2" class="prettyprint set-code-show"><code class="has-numbering" onclick="mdcp.copyCode(event)" style="position: unset;">
4.使用husky进行强制git代码提交规范(如果有yarn
20231201HlBwnVr1.zip
需积分: 0 8 浏览量
2024-05-21
23:29:00
上传
评论
收藏 111KB ZIP 举报
20231201HlBwnVr1.zip （1个子文件） 
sWdCQOuo.html 111KB资源评论
东海帝皇的狗
- 粉丝: 0
- 资源: 1
最新资源
- 实践项目-图书馆管理系统(C#.NET)
- 10Eclipse项目源码.jpg
- 大屏可视化数据课程项目
- Maven 快速入门指南：安装和配置方法详解
- STM32物信息通过MQTT协议上传云平台
- STM32物信息通过MQTT协议上传云平台
- 基于Selenium的Java爬虫实战(内含谷歌浏览器Chrom和Chromedriver版本122.0.6260.0)
- 基于Selenium的Java爬虫实战(内含谷歌浏览器Chrom和Chromedriver版本122.0.6259.0)
- 基于Selenium的Java爬虫实战(内含谷歌浏览器Chrom和Chromedriver版本122.0.6258.0)
- 基于Selenium的Java爬虫实战(内含谷歌浏览器Chrom和Chromedriver版本122.0.6257.0)
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
