Vite+Vue3.0+ElementPlus+axios+TS搭建项目全过程
作者：疯子_百炼成仙
文章主要介绍了如何使用Vite构建项目,包括创建项目、代码规范（eslint、husky、prettti等等、EditorConfig配置等）,项目配置（CSS预处理器、样式重置、环境变量配置、axios封装、本地存储封装）和开发生产环境配置等内容
一、vite构建项目官网
1、创建项目
// pnpm pnpm create vite // npm npm create vite@latest // yarn yarn create vite
2、步骤
二、代码规范
注释：配置完成后需要重新启动项目
1、配置eslint
安装ESlint插件
在项目根目录下找到并打开 .eslintrc.cjs 文件
/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution')
module.exports = {
root: true,
extends: [
'plugin:vue/vue3-essential',
'eslint:recommended',
'@vue/eslint-config-typescript/recommended',
'@vue/eslint-config-prettier'
],
env: {
'vue/setup-compiler-macros': true
},
parserOptions: {
ecmaVersion: 'latest'
},
parser: 'vue-eslint-parser',
rules: {
/*
"off" 或 0 - 关闭规则
"warn" 或 1 - 打开规则作为警告（不影响退出代码）
"error" 或 2 - 打开规则作为错误（触发时退出代码为 1）
*/
'array-bracket-spacing': [2, 'never'], // 在数组括号内强制保持一致的间距
'block-spacing': [2, 'always'], // 在打开块之后和关闭块之前禁止或强制块内的空格
'brace-style': [2, '1tbs'], // 对块执行一致的大括号样式
'comma-dangle': [2, 'never'], // 不允许尾随逗号
'comma-spacing': [
2,
{
before: false,
after: true
}
], // 在逗号前后强制保持一致的间距
'comma-style': [2, 'last'], // 强制使用一致的逗号样式
'consistent-return': [
2,
{
treatUndefinedAsUnspecified: true
}
], // 要求 return 语句始终或从不指定值
'computed-property-spacing': [2, 'never'], // 在计算的属性括号内强制执行一致的间距
'constructor-super': 2, // 在构造函数中需要 super() 调用
curly: 2, // 强制所有控制语句使用一致的括号风格
'default-case': 2, // 在 switch 语句中需要 default 个案例
'eol-last': [2, 'always'], // 在文件末尾要求或禁止换行
'func-call-spacing': [2, 'never'], // 要求或不允许函数标识符及其调用之间有间距
'guard-for-in': 2, // 要求 for-in 循环包含 if 语句
indent: [
2,
2,
{
SwitchCase: 1
}
], // 强制一致的缩进
'jsx-quotes': [2, 'prefer-double'], // 强制在 JSX 属性中一致地使用双引号或单引号
'key-spacing': [
2,
{
beforeColon: false,
afterColon: true
}
], // 在对象字面属性中强制键和值之间的间距一致
'new-cap': 0, // 设置名字首字母为大写的函数可以不为构造函数
'new-parens': 2, // 在调用不带参数的构造函数时强制或禁止使用括号
'no-case-declarations': 2, // 不允许在case/default子句中使用词法声明
'no-class-assign': 2, // 不允许重新分配类成员
'no-compare-neg-zero': 2, // 禁止与 -0 进行比较
'no-cond-assign': [2, 'always'], // 禁止条件语句中出现赋值操作符
'no-console': 0, // 允许出现console
'no-const-assign': 2, // 建议使用const
'no-constant-condition': 2, // 禁止在条件中使用常量表达式
'no-control-regex': 2, // 禁止在正则表达式中使用控制字符
'no-debugger': 0, // 可以使用debugger
'no-delete-var': 2, // 不允许删除变量
'no-dupe-args': 2, // 禁止 function 定义中出现重名参数
'no-dupe-class-members': 2, // 禁止重复的类成员
'no-dupe-keys': 2, // 禁止对象字面量中出现重复的 key
'no-duplicate-case': 2, // 禁止出现重复的 case 标签
'no-empty': 2, // 禁止出现空语句块
'no-empty-character-class': 2, // 禁止在正则表达式中使用空字符集
'no-empty-pattern': 2, // 禁止空的解构模式
'no-ex-assign': 2, // 禁止对 catch 子句的参数重新赋值
'no-extra-boolean-cast': 2, // 禁止不必要的布尔转换
'no-extra-parens': [2, 'functions'], // 禁止不必要的括号
'no-extra-semi': 2, // 禁止不必要的分号
'no-fallthrough': 2, // 不允许 case 语句的失败
'no-func-assign': 2, // 禁止对 function 声明重新赋值
'no-global-assign': [
2,
{
exceptions: []
}
], // 不允许分配给原生对象或只读全局变量
'no-inner-declarations': 0, // 禁止在嵌套的块中出现变量声明或 function 声明
'no-invalid-regexp': 2, // 禁止 RegExp 构造函数中存在无效的正则表达式字符串
'no-irregular-whitespace': 2, // 禁止不规则的空白
'no-mixed-spaces-and-tabs': 2, // 不允许使用混合空格和制表符进行缩进
'no-multi-assign': 2, // 禁止使用链式赋值表达式
'no-multiple-empty-lines': 2, // 禁止多个空行
'no-new-symbol': 2, // 禁止带有 Symbol 对象的 new 运算符
'no-obj-calls': 2, // 禁止把全局对象作为函数调用
'no-octal': 2, // 禁止八进制字面
'no-prototype-builtins': 2, // 禁止直接调用 Object.prototypes 的内置属性
'no-redeclare': 2, // 禁止变量重新声明
'no-regex-spaces': 2, // 禁止正则表达式字面量中出现多个空格
'no-self-assign': 2, // 禁止两边完全相同的赋值
'no-sparse-arrays': 2, // 禁用稀疏数组
'no-template-curly-in-string': 0, // 禁止在常规字符串中出现模板字面量占位符语法
'no-this-before-super': 2, // 在构造函数中调用 super() 之前禁止 this/super
'no-undef': 0, // 除非在 /*global */ 注释中提及，否则不允许使用未声明的变量
'no-undefined': 0, // 禁止使用 undefined 作为标识符
'no-unexpected-multiline': 2, // 禁止出现令人困惑的多行表达式
'no-unreachable': 2, // 禁止在 return、throw、continue 和 break 语句之后出现不可达代码
'no-unsafe-finally': 2, // 禁止在 finally 语句块中出现控制流语句
'no-unsafe-negation': 2, // 禁止对关系运算符的左操作数使用否定操作符
'no-unused-labels': 2, // 禁止未使用的标签
'no-use-before-define': 2, // 在定义之前禁止使用变量
'no-useless-escape': 2, // 禁止不必要的转义字符
'no-var': 2, // 禁止使用var
'prefer-const': 2, // 声明后从不重新分配的变量需要 const 声明
quotes: 0, // 双引号可无
'require-yield': 2, // 要求生成器函数包含 yield
semi: 0, // 句尾省略分号
'space-before-function-paren': 0, // 在函数括号之前不使用间距
strict: 2, // 要求或禁止严格模式指令
'use-isnan': 2, // 要求使用 isNaN() 检查 NaN
'valid-jsdoc': 0, // 强制执行有效且一致的 JSDoc 注释
'valid-typeof': 2, // 强制 typeof 表达式与有效的字符串进行比较
'vue/html-self-closing': [
2,
{
html: {
void: 'always',
normal: 'always',
component: 'always'
},
svg: 'always',
math: 'always'
}
] // 设置自闭合标签
}
}
根目录创建忽略文件：.eslintignore
node_modules/ dist/ index.html
git Husky
husky是一个git hook工具，可以帮助我们触发git提交的各个阶段：pre-commit、commit-msg、pre-push
自动配置命令
npm install husky-init //安装husky-init包 npx husky-init //执行文件
在 .husky/pre-commit 文件中修改成 npm run lint
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
npm run lint
安装husky报错（遇到的问题）
husky - can't create hook, .husky directory doesn't exist (try running husky install) 不能创建钩子，.husky目录不存在(尝试运行Husky install)
重新执行下面命令
git init npx husky-init
2、配置prettier
安装 Prettier 扩展
在项目根目录下找到 .prettierrc.json 文件，将其改为 .prettierrc.js 文件
module.exports = {
overrides: [
{
files: '.prettierrc',
options: {
parser: 'json'
}
}
],
printWidth: 100, // 一行最多 100 字符
tabWidth: 2, // 使用 2 个空格缩进
semi: false, // 句尾省略分号
singleQuote: true, // 使用单引号而不是双引号
useTabs: false, // 用制表符而不是空格缩进行
quoteProps: 'as-needed', // 仅在需要时在对象属性两边添加引号
jsxSingleQuote: false, // 在 JSX 中使用单引号而不是双引号
trailingComma: 'none', // 末尾不需要逗号
bracketSpacing: true, // 大括号内的首尾需要空格
bracketSameLine: false, // 将多行 HTML（HTML、JSX、Vue、Angular）元素反尖括号需要换行
arrowParens: 'always', // 箭头函数，只有一个参数的时候，也需要括号 avoid
rangeStart: 0, // 每个文件格式化的范围是开头-结束
rangeEnd: Infinity, // 每个文件格式化的范围是文件的全部内容
requirePragma: false, // 不需要写文件开头的 @prettier
insertPragma: false, // 不需要自动在文件开头插入 @prettier
proseWrap: 'preserve', // 使用默认的折行标准 always
htmlWhitespaceSensitivity: 'css', // 根据显示样式决定 html 要不要折行
vueIndentScriptAndStyle: false, //（默认值）对于 .vue 文件，不缩进 <script> 和 <style> 里的内容
endOfLine: 'lf', // 换行符使用 lf 在Linux和macOS以及git存储库内部通用\n
embeddedLanguageFormatting: 'auto' //（默认值）允许自动格式化内嵌的代码块,
}
根目录创建忽略：.prettierignore
/dist/*
.local
.output.js
/node_modules/**
**/*.svg
**/*.sh
/public/*
在 settings.json 文件中添加如下配置代码
"editor.formatOnSave": true, // 每次保存的时候自动格式化
"editor.formatOnPaste": true, // 自动格式化粘贴内容
"editor.codeActionsOnSave": {
// 保存时使用 ESLint 修复可修复错误
"source.fixAll": true,
"source.fixAll.eslint": true // 保存时使用 ESLint 修复可修复错误
// "source.fixAll.stylelint": true
},
// 文件设置
"files.eol": "\n", // 默认行尾字符。 git全局配置 git config --global core.autocrlf false
// eslint 设置
"eslint.alwaysShowStatus": true, // 总是显示 ESlint 状态栏项
"eslint.probe": [
// eslint 校验的语言类型
"javascript",
"javascriptreact",
"typescript",
"typescriptreact",
"html",
"vue",
"markdown",
"tsx"
],
3、集成editorconfig配置
EditorConfig 有助于为不同 IDE 编辑器上处理同一项目的多个开发人员维护一致的编码风格。
安装插件
EditorConfig for VS Code
在项目根目录创建 ：.editorconfig
# http://editorconfig.org
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
4、git commit规范
| Type | 作用 |
|---|---|
| feat | 新增特性 (feature) |
| fix | 修复 Bug(bug fix) |
| docs | 修改文档 (documentation) |
| style | 代码格式修改(white-space, formatting, missing semi colons, etc) |
| refactor | 代码重构(refactor) |
| perf | 改善性能(A code change that improves performance) |
| test | 测试(when adding missing tests) |
| build | 变更项目构建或外部依赖（例如 scopes: webpack、gulp、npm 等） |
| ci | 更改持续集成软件的配置文件和 package 中的 scripts 命令，例如 scopes: Travis, Circle 等 |
| chore | 变更构建流程或辅助工具(比如更改测试环境) |
| revert | 代码回退 |
三、项目配置
一、css预处理器及样式重置
1、css预处理器
scss安装（选其一）
npm i sass-loader node-sass -S // 使用 <style lang="scss" scoped></style>
less安装（选其一）
npm i less less-loader
// 使用
<style lang="less" scoped></style>
2、样式重置
1、安装 normalize.css
npm i normalize.css
2、引入
// main.ts import 'normalize.css'
3、reset.css
html,body,div,span,applet,object,iframe,h1,h2,h2,h4,h5,h3,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,
u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,caption {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
table,tbody,tfoot,thead,tr,th,td {
margin: 0;
padding: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
button,input,textarea {margin: 0;padding: 0;}
/* form elements 表单元素 */
body,button,input,select,textarea {
font: normal 12px/1.5 '\5FAE\8F6F\96C5\9ED1', tahoma, arial;
}
/*设置的字体，行高*/
h1,h2,h2,h4,h5,h3,th {font-size: 100%;font-weight: normal;}
/*重置标题*/
address,cite,dfn,var {font-style: normal;}
/* 将斜体扶正 */
code,kbd,pre,samp {
font-family: 'courier new', courier, monospace;
}
/* 统一等宽字体 */
small {font-size: 12px;}
/* 小于 12px 的中文很难阅读，让 small 正常化 */
ul,ol {list-style: none;}
/* 重置列表元素 */
button,input[type='submit'],input[type='button'] {
cursor: pointer;
}
input[type='radio'],input[type='checkbox'],input[type='submit'],input[type='reset'] {
vertical-align: middle;
cursor: pointer;
border: none;
}
/** 重置文本格式元素 **/
a {text-decoration: none;}
a:hover {text-decoration: underline;}
a:focus {outline: 0;}
sup {vertical-align: text-top;}
/* 重置，减少对行高的影响 */
sub {vertical-align: text-bottom;}
/** 重置表单元素 **/
legend {color: #000;}
/* for ie6 */
fieldset,img {border: 0;}
/* img 搭车：让链接里的 img 无边框 */
button,input,select,textarea {
background: transparent;
font-size: 100%;
outline: 0;
}
/* 使得表单元素在 ie 下能继承字体大小 */
/* 注：optgroup 无法扶正 */
table {border-collapse: collapse; border-spacing: 0;}
td,th {
vertical-align: middle;
}
/** 重置表格元素 **/
/* 重置 HTML5 元素 */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,
video {
display: block;
margin: 0;
padding: 0;
}
/*回复标签重置*/
blockquote,q {quotes: none;}
blockquote:before,blockquote:after,q:before,q:after {
content: '';
display: none;
}common.css (一直完善中…)
/* 字体颜色 */
.clfff{color: #fff;}
.cl00baad{color: #00baad;}
.clff6262{color: #ff6262;}
.clc5cedd{color: #c5cedd;}
.cl909399{color: #909399;}
.cl808080{color: #808080;}
.ls2{letter-spacing: 2px;}
.text-2{text-indent: 2rem;}
/* 背景颜色 */
.bgfff{background-color: #fff;}
/* 字体大小 */
.fs12 {font-size: 12px;}
.fs16 {font-size: 16px;}
.fs18 {font-size: 18px;}
.fs20 {font-size: 20px;}
.fs22 {font-size: 22px;}
.fs24 {font-size: 24px;}
/* 圆角边框 */
.br6{border-radius: 6px;}
.br8{border-radius: 8px;}
.br10{border-radius: 10px;}
/* 内边距 */
.pd5{padding: 5px;}
.pd10{padding: 10px;}
.pd15{padding: 15px;}
.pd20{padding: 20px;}
.pd25{padding: 25px;}
.pd30{padding: 30px;}
.pd35{padding: 35px;}
.pd40{padding: 40px;}
.pd45{padding: 45px;}
.pd50{padding: 50px;}
.pdt5{padding-top: 5px;}
.pdt10{padding-top: 10px;}
.pdt15{padding-top: 15px;}
.pdt20{padding-top: 20px;}
.pdt25{padding-top: 25px;}
.pdt30{padding-top: 30px;}
.pdt35{padding-top: 35px;}
.pdt40{padding-top: 40px;}
.pdt45{padding-top: 45px;}
.pdt50{padding-top: 50px;}
.pdb5{padding-bottom: 5px;}
.pdb10{padding-bottom: 10px;}
.pdb15{padding-bottom: 15px;}
.pdb20{padding-bottom: 20px;}
.pdb25{padding-bottom: 25px;}
.pdb30{padding-bottom: 30px;}
.pdb35{padding-bottom: 35px;}
.pdb40{padding-bottom: 40px;}
.pdb45{padding-bottom: 45px;}
.pdb50{padding-bottom: 50px;}
.pdl5{padding-left: 5px;}
.pdl10{padding-left: 10px;}
.pdl15{padding-left: 15px;}
.pdl20{padding-left: 20px;}
.pdl25{padding-left: 25px;}
.pdl30{padding-left: 30px;}
.pdl35{padding-left: 35px;}
.pdl40{padding-left: 40px;}
.pdl45{padding-left: 45px;}
.pdl50{padding-left: 50px;}
.pdr5{padding-right: 5px;}
.pdr10{padding-right: 10px;}
.pdr15{padding-right: 15px;}
.pdr20{padding-right: 20px;}
.pdr25{padding-right: 25px;}
.pdr30{padding-right: 30px;}
.pdr35{padding-right: 35px;}
.pdr40{padding-right: 40px;}
.pdr45{padding-right: 45px;}
.pdr50{padding-right: 50px;}
/* 外边距 */
.mg5{margin: 5px;}
.mg10{margin: 10px;}
.mg15{margin: 15px;}
.mg20{margin: 20px;}
.mg25{margin: 25px;}
.mg30{margin: 30px;}
.mg35{margin: 35px;}
.mg40{margin: 40px;}
.mg45{margin: 45px;}
.mg50{margin: 50px;}
.mgt5{margin-top: 5px;}
.mgt10{margin-top: 10px;}
.mgt15{margin-top: 15px;}
.mgt20{margin-top: 20px;}
.mgt25{margin-top: 25px;}
.mgt30{margin-top: 30px;}
.mgt35{margin-top: 35px;}
.mgt40{margin-top: 40px;}
.mgt45{margin-top: 45px;}
.mgt50{margin-top: 50px;}
.mgb5{margin-bottom: 5px;}
.mgb10{margin-bottom: 10px;}
.mgb15{margin-bottom: 15px;}
.mgb20{margin-bottom: 20px;}
.mgb25{margin-bottom: 25px;}
.mgb30{margin-bottom: 30px;}
.mgb35{margin-bottom: 35px;}
.mgb40{margin-bottom: 40px;}
.mgb45{margin-bottom: 45px;}
.mgb50{margin-bottom: 50px;}
.mgl5{margin-left: 5px;}
.mgl10{margin-left: 10px;}
.mgl15{margin-left: 15px;}
.mgl20{margin-left: 20px;}
.mgl25{margin-left: 25px;}
.mgl30{margin-left: 30px;}
.mgl35{margin-left: 35px;}
.mgl40{margin-left: 40px;}
.mgl45{margin-left: 45px;}
.mgl50{margin-left: 50px;}
.mgr5{margin-right: 5px;}
.mgr10{margin-right: 10px;}
.mgr15{margin-right: 15px;}
.mgr20{margin-right: 20px;}
.mgr25{margin-right: 25px;}
.mgr30{margin-right: 30px;}
.mgr35{margin-right: 35px;}
.mgr40{margin-right: 40px;}
.mgr45{margin-right: 45px;}
.mgr50{margin-right: 50px;}
/* 文字省略 u-line-1 u-line-2 u-line-3 u-line-4*/
.u-line-2{
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
/* flex布局 */
.u-flex{display: flex;}
/* 垂直居中 */
.ai-c{align-items: center;}
/* 水平居中 */
.jc-c{justify-content: center;}
.jc-b{justify-content: space-between;}
.jc-r{justify-content: flex-end;}
/* 空间分布 */
.flex-1{flex: 1;}
.flex-2{flex: 2;}
/* 字体大小 */
.fw700{font-weight: 700;}
/* 手型 */
.cp{cursor: pointer;}
/* 文字对齐 */
.ac{text-align: center;}
.ar{text-align: right;}
.al{text-align: left;}
/* 清除默认样式 */
* {margin: 0; padding: 0;}
html,body,#app {width: 100%;height: 100%;}二、引入Element-Plus官网
安装Element-Plus
// NPM npm install element-plus --save // Yarn yarn add element-plus // pnpm pnpm install element-plus
全局引入
// main.ts import ElementPlus from 'element-plus' import 'element-plus/dist/index.css' app.use(ElementPlus)
三、环境变量配置
设置.env中的内容信息 注意vue3+vite 必须使用VITE开头的配置信息 否则无法获取
配置开发环境（npm run serve）
// 1.在项目的根目录下创建一个文件
.env.development
// 2.在文件中添加我们要配置的变量：
变量名结构： VITE_APP_XXX
例如： VITE_APP_BASEURL = http://localhost:5000
// 3.在要使用的位置获取:
import.meta.env.VITE_APP_BASEURL
配置生产环境（npm run build）
// 1.在项目的根目录下创建一个文件
.env.production
// 2.在文件中添加我们要配置的变量：
变量名结构： VITE_APP_XXX
例如： VITE_APP_BASEURL = http://152.136.185.210:5000
// 3.在要使用的位置获取:
import.meta.env.VITE_APP_BASEURL
四、axios集成
1、安装axios
npm i axios
2、封装请求错误代码提示： /src/utils/error-code-type.ts
export const errorCodeType = function (code: number, message: string): string {
let errMessage = '未知错误'
switch (code) {
case 400:
errMessage = '错误的请求'
break
case 401:
errMessage = '未授权，请重新登录'
break
case 403:
errMessage = '拒绝访问'
break
case 404:
errMessage = '请求错误,未找到该资源'
break
case 405:
errMessage = '请求方法未允许'
break
case 408:
errMessage = '请求超时'
break
case 500:
errMessage = '服务器端出错'
break
case 501:
errMessage = '网络未实现'
break
case 502:
errMessage = '网络错误'
break
case 503:
errMessage = '服务不可用'
break
case 504:
errMessage = '网络超时'
break
case 505:
errMessage = 'http版本不支持该请求'
break
default:
errMessage = message
}
return errMessage
}3、封装：/src/utils/request.ts
import axios from 'axios'
import { errorCodeType } from './error-code-type'
import { ElMessage } from 'element-plus'
/** 创建axios实例 */
const service = axios.create({
timeout: 100000, // 超时时间
baseURL: import.meta.env.VITE_APP_BASEURL,
headers: {
'Content-Type': 'application/json;charset=utf-8'
}
})
//2. 请求拦截器
service.interceptors.request.use(
(config) => {
// 是否需要设置 token放在请求头
// config.headers['Authorization'] = 'Bearer ' + getToken()
return config
},
(error) => {
Promise.reject(error)
}
)
//3. 响应拦截器
service.interceptors.response.use(
(response) => {
const code = response.data['code']
const message = response.data['message']
// 获取错误信息
const msg = errorCodeType(code, message)
if (code === 200) {
return Promise.resolve(response.data)
} else {
ElMessage.error(msg)
return Promise.reject(response.data)
}
},
(error) => {
return Promise.reject(error)
}
)
export default service
4、封装请求接口
import request from '@/utils/request'
//请求示例
//get
export const mokeGet = (data) => {
return axios({
url: "/api/xxxx",
method: "get",
data,
})
}
//post
export const mokePost = (data) => {
return axios({
url: "/api/xxxx",
method: "post",
data,
})
}
5、vue中使用
import { mokePost } from "@/api";
import {onMounted} from "vue"
export default {
setup() {
onMounted(() => {
mokePost().then(res=>{
console.log(res)
})
})
return {};
},
};
6、封装本地存储(localStorage)
// 操作本地存储(localStorage)
const local = {
getToken(key) {
if (!key) return
return window.localStorage.getItem(key)
},
get(key) {
if (!key) return
return JSON.parse(window.localStorage.getItem(key))
},
set(key, value) {
if (!key) return
if (typeof value !== 'string') {
value = JSON.stringify(value)
}
window.localStorage.setItem(key, value)
},
clear() {
window.localStorage.clear()
},
remove(key) {
if (!key) return
window.localStorage.removeItem(key)
}
}
export default local
7、工具函数封装
// 防抖
export const debounce = (() => {
let timer = null
return (callback, wait) => {
clearTimeout(timer)
timer = setTimeout(callback, wait)
}
})()
// 验证密码 - 请输入6 ~ 14位,数字/字母/下划线/-
export const isPassword = (val) => {
return /^[a-zA-Z0-9_-]{6,20}$/.test(val)
}
// 验证用户名 - 姓名不能有数字
export const isName = (val) => {
return /^[^\d]*$/.test(val)
}
// 验证手机号 - 请输入正确的手机号
export const isPhone = (val) => {
return /^1(3|4|5|7|8|9)\d{9}$/.test(val)
}
// 验证账号 - 账号不能输入汉字
export const isAccount = (val) => {
return /^[^\u4e00-\u9fa5]+$/.test(val)
}
五、扩展
1、本地打开vue3+vite+ts项目打包的dist文件夹下index.html
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
// https://vitejs.dev/config/
export default defineConfig({
//本地打开dist文件夹下index.html
base: './',
plugins: [vue(), vueJsx()],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
}
})
2、vite项目中配置路径别名@
在vite.config.ts中添加如下代码
import { resolve } from "path"
export default defineConfig({
......
resolve: {
alias: {
"@": resolve(__dirname, "./src"),
},
},
})
在tsconfig.json中的compilerOptions里面添加代码：
"compilerOptions"：{
......
"baseUrl": ".",
"paths": {
"@/*": ["src/*"]
}
}
//重启项目即可
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。