# vue3-ts-express-mysql
**Repository Path**: atom__python/vue3-ts-express-mysql
## Basic Information
- **Project Name**: vue3-ts-express-mysql
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-01-22
- **Last Updated**: 2024-02-02
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# 一、项目初始化设置
## 1. 初始化项目
**创建项目**
```bash
npm create vue@latest
```
通过git工具初始化项目，并且将其上传到新建的[github](https://github.com/)中。
```bash
cd vue3-ts-express-mysql
npm install
git init
touch README.md
git add README.md
git commit -m "项目初始化设置"
git remote add origin https://gitee.com/atom__python/vue3-ts-express-mysql.git
git push -u origin "master"
````
## 2. ESLint & prettier 配置代码风格
### 2.1 环境同步：
1. 安装了插件 ESlint，开启保存自动修复
```bash
npm install eslint --save-dev
```
1. 禁用了vscode插件 Prettier，并关闭保存自动格式化（format on save关闭）
2. 设置`settings.json`文件
```jsx
// ESlint插件 + Vscode配置 实现自动格式化修复
"editor.codeActionsOnSave": {
"source.fixAll": true
},
// 关闭保存自动格式化
"editor.formatOnSave": false,
```
### 2.2 配置 .eslintrc.cjs 文件
1. prettier 风格配置 [https://prettier.io](https://prettier.io/docs/en/options.html )
1. 单引号
2. 不使用分号
3. 每行宽度至多80字符
4. 不加对象|数组最后逗号
5. 换行符号不限制（win mac 不一致）
2. vue组件名称多单词组成（忽略index.vue）
3. props解构（关闭）【如果不关闭，结构props因为会失去响应式，所以会报错】
在`.eslintrc.cjs`文件中添加规则。
```jsx
rules: {
'prettier/prettier': [
'warn',
{
singleQuote: true, // 单引号
semi: false, // 无分号
printWidth: 80, // 每行宽度至多80字符
trailingComma: 'none', // 不加对象|数组最后逗号
endOfLine: 'auto' // 换行符号不限制（win mac 不一致）
}
],
'vue/multi-word-component-names': 'Off',
'vue/no-setup-props-destructure': ['off'], // 关闭 props 解构的校验，不关闭为什么报错，因为props结构后会失去响应式
// 💡 添加未定义变量错误提示。
'no-undef': 'error'
}
```
> 备注一：`error Parsing error: Invalid ecmaVersion`报错需要将`.eslintrc.cjs`修改为**ecmaVersion: `12`**
## 3. 基于 husky 的代码检查工作流
### 3.1 提交代码前进行代码检查
husky 是一个 git hooks 工具 ( git的钩子工具，可以在特定时机执行特定的命令 )
1. git初始化 git init（前面已完成）
```bash
git init
```
> 备注一：首先升级 git 到`2.42.0`（否则不会自动生成.husky/pre-commit）
2. 初始化 husky 工具配置 https://typicode.github.io/husky/
```bash
npx husky-init && npm install
```
3. 修改 `.husky/pre-commit` 文件
将npm test修改为npm lint
```bash
npm lint
```
**问题：**默认进行的是**全量**检查，耗时问题，历史问题。
### 3.2 优化husky
我们只对当前代码进行校验，**lint-staged 配置**（`只格式化自己的代码`）
1. 安装
```bash
npm i lint-staged -D
```
2. 配置 `package.json`
```jsx
// 修改的启动
{
"scripts": {
// ... 省略 ...
"lint-staged": "lint-staged"
}
}
// 下列代码放在最后
{
// ... 省略 ...
"lint-staged": {
"*.{js,ts,vue}": [
"eslint --fix"
]
}
}
```
3. 修改 `.husky/pre-commit` 文件
```jsx
npm run lint-staged
```
## 4. 调整项目目录
### 4.1 基础调整
默认生成的目录结构不满足我们的开发需求，所以这里需要做一些自定义改动。主要是两个工作：
- 删除初始化的默认文件
- 删除assets内文件
- 删除component内文件
- 清空stores中的文件
- 清空views中文件
- 清空`router/index.ts`中routes数组中内容
- App.vue中内容清空
- main.js中删除样式引入
- 新增调整我们需要的目录结构
- 新增api、utils、config文件夹
```bash
mkdir api utils config
```
- 安装 sass 依赖
```bash
npm install sass sass-loader -D
```
+ 修改的`router.ts,app.js,main.ts`文件
① `src/router/index.ts`
```jsx
import { createRouter, createWebHistory } from 'vue-router'
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: []
})
export default router
```
② `src/App.vue`
```jsx
```
③ `src/main.ts`
```jsx
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'
const app = createApp(App)
app.use(createPinia())
app.use(router)
app.mount('#app')
```
④ 安装`nomalize.css`文件并在`main.ts`中全局引用
```jsx
npm install normalize.css -S
// main.js中引入
import 'normalize.css'
```
> 备注一：**normalize模块**用于创建一致的默认样式的 CSS 文件。它的主要作用是重置和标准化不同浏览器之间的默认样式差异，使网页在各种浏览器中拥有一致的表现。
### 4.2 设置组件名
我们在使用**选项式api**时可以在export default内部写name值，但是如果我们采用**组合式api**中**setup**语法糖，就不需要export default，于是我们采用如下模块进行解决。
**① 采用分离式写法**
```js
```
**② 采用插件辅助（本项目的方法）**
1. 第一步：`npm i vite-plugin-vue-setup-extend -D`
2. 第二步：`vite.config.ts`
```jsx
import VueSetupExtend from 'vite-plugin-vue-setup-extend'
export default defineConfig({
plugins: [ VueSetupExtend() ]
})
```
3. 第三步：直接将name写在script中即可。
```ts
```
### 1.3 数据验证
在上述静态页面中，我们可以看到在我们分别定义了如下数据：
+ 在`el-form`中定义了
+ `:model='loginData'`或`:model='registerData'`用来进行数据绑定
+ `:rules="rules"`用于基础表单验证
+ `ref="loginRef"`或`ref="registerRef"`用于提交表单验证
+ 在`el-form-item`中定义了`prop='account'`,`prop='password'`,`prop='repassword'`用于基础表单验证
+ 在`el-intput`中定义的`v-model="loginData.account"`用于数据绑定
```vue
```
## 2. 忘记密码弹窗制作
### 2.1 静态页面
此弹窗采用了`el-dialog`组件配合`el-input`进行制作。
弹窗的隐藏与显示，本项目中我们将弹窗单独存储到`src/login/components/forgetDialog.vue`公共组件中，通过设置`el-dialog`中的`:model`来设置显示与隐藏，而我们想在**父组件中使用子组件**中的**属性**或**方法**，需要如下步骤：
+ 子组件中创建**属性**或**方法**，==并且要暴露属性或方法==
+ 引入子组件
+ 给引入子组件添加ref，并定义ref
子组件为：`src/login/components/forgetDialog.vue`创建公共弹窗组件
```vue
...
```
父组件为：`src/login/login.vue`
```vue
```
在`src/login/components/forgetDialog.vue`弹层组件中共分为2个弹窗，分别为：”忘记密码"、“修改密码”。
**① 忘记密码弹窗**
忘记密码"弹窗分为静态页面部分 + 基础数据部门 + 基础校验 + 取消与下一步方法
静态页面部分包含定义表单数据（**forgetData**）、验证数据（**forgetRules以及props**）、取消与下一步方法（**hCancelForget、hNext**）
```vue
// 静态页面
```
基础部门数据、基础校验、取消与下一步方法
```vue
```
**② 修改密码弹层**
修改密码"弹窗分为静态页面部分 + 基础数据部门 + 基础校验 + 取消与修改方法
静态页面部分包含定义表单数据（**changePasswordData**）、验证数据（**changePasswordRules以及props**）、取消与下一步方法（**hCancelChangeDialog、hChangePassword**）
```vue
```
基础部门数据、基础校验、取消与确定方法
+ 自定义验证规则，判断两次输入密码是否相同
+ 确定修改密码时，需要额外添加**清空“忘记密码”页面的数据**
```vue
```
添加“右上角关闭按钮”调用方法
```vue
```
# 第三章、菜单页面制作
## 1. 首页 -- 侧边栏
创建`src/views/Layout/Layout.vue`布局组件
```vue
Aside
Header
Main
```
在`router/index.ts`中创建路由
```js
routes: [
...
{
path: '/layout',
name: 'layout',
component: Layout,
children: [
{
path: 'home',
name: 'home',
component: () => import('@/views/Home/Home.vue')
}
]
}
]
```
设置侧边栏，采用`el-menu`组件，需要设置的参数为：
+ background-color：目录颜色
+ active-text-color：选中时文字颜色
+ default-active：设置默认选中路由
+ text-color：文字颜色
+ router：点击子目录可以跳转路由
在`el-menu-item`中设置`index`关联路由
```vue
熊抱前端
首页
系统概述
用户管理
产品管理员
用户管理员
消息管理员
用户列表
产品管理
产品列表
出库列表
消息管理
消息列表
回收站
合同管理
操作日志
登录日志
系统设置
// 样式设置
```
## 2. 公共图标
### 2.1 按需自动引入elementplus的图标。
安装所需模块
```bash
npm i element-plus @element-plus/icons-vue
npm i -D unplugin-icons
```
在`vite.config.ts`中进行设置
```js
// 自动引入图标
import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'
AutoImport({
resolvers: [
ElementPlusResolver(),
// 自动导入图标组件
IconsResolver({
// 设置使用前缀
prefix: 'Icon'
})
]
}),
Components({
resolvers: [
// 自动导入Element plus组件
ElementPlusResolver(),
// 自动注册图标组件
IconsResolver({
// 启用elementplus图标集
enabledCollections: ['ep']
})
]
}),
Icons({
autoInstall: true
})
```
### 2.2 Icon图标单独使用
```vue
```
### 2.3 动态使用
```vue
```
## 3. 首页 -- 头部
头部分为左右两部分
```vue
const state = reactive({
circleUrl:
'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
})
const { circleUrl } = toRefs(state)
```
> 备注一：当我们鼠标移动到下拉组件上focus时会出现一个黑色框，解决方法
>
> ```scss
> .el-dropdown-link:focus {
> outline: none;
> }
> ```
> 备注二：因为解构会失去响应式，所以上面代码采用toRefs形式