# vue-study

**Repository Path**: mpv945/vue-study

## Basic Information

- **Project Name**: vue-study
- **Description**: vue3的学习课程代码
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-10-23
- **Last Updated**: 2024-10-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue-study
### 官网：https://cn.vuejs.org/

#### 介绍
1. [README.md 语法参考](http://blog.csdn.net/guodongxiaren "更多语法请点击查阅")
2. vue3的学习课程代码，每个课程对应vue-lesson-x编码

##### vue-lesson-1【课程1】 -- 第一阶段
```
脚手架工具创建项目：npm create vue@latest
✔ 请输入项目名称： … vue-lesson-1
✔ 是否使用 TypeScript 语法？ … 否 / 是
✔ 是否启用 JSX 支持？ … 否 / 是
✔ 是否引入 Vue Router 进行单页面应用开发？ … 否 / 是
✔ 是否引入 Pinia 用于状态管理？ … 否 / 是
✔ 是否引入 Vitest 用于单元测试？ … 否 / 是
✔ 是否要引入一款端到端（End to End）测试工具？ › Playwright # 测试框架选择：https://blog.csdn.net/qq_46703452/article/details/132045822
✔ 是否引入 ESLint 用于代码质量检测？ … 否 / 是
✔ 是否引入 Vue DevTools 7 扩展用于调试? (试验阶段) … 否 / 是

首次进入 npm i --registry https://registry.npmmirror.com（安装依赖）
App.vue 文件内容清空，只保留骨架<script lang="ts" setup> 和 <template> 以及<style scoped>可选保留，可以安装vue.js插件，可以通过new 出新的vue组建文件
components目录全删除，assets下的文件删除
main.js 删除 import './assets/main.css'


引入Vue Router
打开vue官网 -- 生态系统-->Vue Router
如果脚手架创建就选择了，会自动添加进去，否则npm install vue-router@4 （参考：https://router.vuejs.org/zh/installation.html）
创建视图页面: src/views/{dashboard,login}/index.vue
创建路由 src/router/index.ts
配置区别
  //history: createWebHistory(import.meta.env.BASE_URL), // 地址栏不带# ，import.meta.env.BASE_URL 基础目录
  history: createWebHashHistory(import.meta.env.BASE_URL),// 地址栏带#
  strict: true, //严格模式
  routes,
  scrollBehavior: () => ({left:0 , top:0}) // 页面每次打开都是定位到头部

引入TDesign：https://tdesign.tencent.com/ 基础组件选择 web （ vue next 适配vue3）
引入：npm i tdesign-vue-next --registry https://registry.npmmirror.com
使用：
1 全局使用：
打开main.ts
import { createApp } from 'vue'
import TDesign from 'tdesign-vue-next'; // 导入组建
//import { createPinia } from 'pinia'
import App from './App.vue'
import router from '@/router'
import 'tdesign-vue-next/dist/reset.css'; // 引入组件库的重置样式
import 'tdesign-vue-next/es/style/index.css'; // 引入组件库的少量全局样式变量
const app = createApp(App)
app.use(TDesign) // 使用TDesign
//app.use(createPinia())
app.use(router)
app.mount('#app')
样式使用less,因为TDesign样式也是less
npm i -D --registry https://registry.npmmirror.com less less-loader 安装在dev就好了（-D = --save-dev) ,就可以直接写less了

1 chrome浏览器调试可以在样式颜色地方，调取颜色拾取器
2 vue3 最新 是否引入 Vue DevTools 7 扩展用于调试?  引入后，dev时候最下方会有vue的调试工具，可以找到页面 ，查看step的状态值的变化
```
##### vue-lesson-1【课程1】 -- 第二阶段
```
网络请求（api）
npm install axios --registry https://registry.npmmirror.com
新增 src/api 目录添加request.ts

项目根目录创建环境变量文件
.env.development

apifox 【接口管理 --> 右上角选择环境-->管理环境】打开云端 Mock 可以获取前置url， 新建接口，添加mock的期望值

引入TD的错误提升消息

引入pinia
npm install pinia --registry https://registry.npmmirror.com
在main.ts引入使用
import { createPinia } from 'pinia'
app.use(pinia)
app.mount('#app')
创建src/store app.ts(程序store）
持久化插件 pinia-plugin-persistedstate
官网：https://prazdevs.github.io/pinia-plugin-persistedstate/guide/
npm i pinia-plugin-persistedstate --registry https://registry.npmmirror.com

Eslint：如果不想要规则可以在.eslintrc.cjs 添加规则开启和关闭
rules: {
	"vue/multi-word-component-names": "off",
}
```

##### vue-lesson-1【课程1】 -- 第三阶段
```
公共页面
src/views/common/layout.vue 布局
公共组件
创建src/components/CollapseButton.vue
                                 /sidebar.vue 边侧栏
实现用户信息获取，侧边栏开关联动，菜单栏的添加
```

##### vue-lesson-1【课程1】 -- 第四阶段
```
route 通过meta扩展，支持权限控制
src/router/index.ts 定义declare module.......
增加枚举(支持meta的permission枚举)
src/config/permission.config.ts

ts 语法：https://typescript.p6p.net/typescript-tutorial/interface.html

创建用户（操作级别权限控制）
自定义指令 src/directives/permission.ts
然后需要到main.ts 去注册指令app.directive("permission", permissionDirective);

axios文档：https://axios-http.com/zh/docs/cancellation

todo增加了取消重复请求和无感刷新功能
```

##### vue-lesson-1【课程1】 -- 第五阶段 （新建分支：组合式函数改造用户管理页面）
```
组合式函数 （可以对搜索，列表，分页等复杂的业务抽取抽象的公共方法和属性组合称组件）pagination组合函数封装后期考虑抽取到外面去，这样以后换UI组件比较方便，和业务关联动态特性，例如 数据和对象抽取后，通过参数传递。
src/composables/useSearch.ts

新增弹窗edit页面 src/views/user/edit-dialog.vue
组合式函数封装 新建和修改的页面：src/composables/useEditDialog.ts
使用组合式函数后，src/views/user/index.vue备份为index.vue.lesson7
```

##### vue-lesson-1【课程1】 -- 第六阶段 （新建分支：用户管理和角色管理页面）
```
edit-dialog.vue 的props使用ts类型改造和默认props设置;computed计算属性比较适合静态更新的数据绑定（user/index.vue也有改造)

维护角色的配置src/config/roles.config.ts

新增api/user.ts 封装接口

封装edit-dialog.vue 的提交功能到组合式函数useEditDialog.ts

aixos 配置说明：https://blog.csdn.net/chengcheng9876/article/details/140095182

新增用户下的roles权限
修改：src/router/index.ts 和 src/config/permission.config.ts 以及 src/api/user.ts  和 src/api/types.ts
新增 src/views/user/roles.vue(无法渲染多了一层template) 和 src/views/user/role-edit-dialog.vue 和 src/api/role.ts 
			
```

##### vue-lesson-1【课程1】 -- 第七阶段 （新建分支：角色管理的权限列表和403以及404页面）
```
全局样式：assets/less/base.less 页面样式抽取，例如.search-area
全局样式使用 main.ts  在td样式之后引入 （优化页面form样式.dailog-form到base.less）

添加角色的树形组件：Tree组件
修改role-edit-dialog.vue 添加Tree组件 ，config/permission.config.ts 定义tree数据结构

错误页面：src/views/error（404  not-found.vue） 和 serc/essets/images
添加路由：src/router/index.ts (404 路由通配符定义跳转) 抽取src/components/ErrorPage.vue 页面组件
```

##### vue-lesson-1【课程1】 -- 第八阶段 （新建分支：控制台tab 数据栏和图表显示）
```
user/index.ts  以插槽增加roles以tag显示
views/common/layout.vue 统一内容区域样式--》 区域 padding设置

控制台功能实现（看板）Echarts（Grid栅格）
src/components/InfoCard.vue
src/views/dashboard/index.vue
安装echarts：https://github.com/ecomfe/vue-echarts/blob/main/README.zh-Hans.md
npm add 或者 npm i echarts vue-echarts --registry https://registry.npmmirror.com
参考教程：https://juejin.cn/post/7337159704956780594 课程使用的方法已经不再更新：https://gitee.com/ambit/echarts-for-vue
官网：https://echarts.apache.org/zh/theme-builder.html
https://echarts.apache.org/handbook/zh/get-started/
```

##### vue-lesson-1【课程1】 -- 第八阶段 （新建分支：自动生成curd模板和部署发布）
```
cli 生成CURD：
plop：https://github.com/plopjs/plop/tree/plop%404.0.1
官网：https://plopjs.com/documentation/#getting-started
npm install --save-dev plop --registry https://registry.npmmirror.com
新增一个script："generate": "plop"
(根目录增加plopfile.js) 
创建生成处理文件：根目录templates/curd/index.js
创建api逻辑模板：复制api下比较通用ts(可以先使用ts格式化 右键：Fix ESLint Problems），编写好后改成.hbs文件
types.hbs 内容追加进去types.ts
views/index.hbs为页面模板文件

装了eslint的需要开启node环境 在root下增加
module.exports = {
env: {
     node: true
},
最后执行生成，制定的模板进行交互式生成
npm run generate 
如果不是主入口，需要执行代码放到已有的主入口下，例如user,会放到user目录下

最后在router下增加入口就好


部署与发布
header.vue : 修改退出的bug, 


环境变量
Vite内建：https://cn.vitejs.dev/guide/env-and-mode.html

TypeScript 智能提示
env.d.ts 接口做继承，扩展功能，在request.ts的可以提示类型


docker部署：https://cli.vuejs.org/zh/guide/deployment.html#docker-nginx
docker-compose.yml ： docker compose up --build -d （打包运行）

优化打包
vite.config.ts : splitVendorChunkPlugin 拆分（过时）

github 部署静态站点：https://cn.vitejs.dev/guide/static-deploy.html
编写脚本：deploy.sh
要vite.config.ts添加一个base根目录
export default defineConfig({
  base: "/",

还有一种自动部署方式：使用脚本自动触发 ：创建 .github/workflows/docs.yml
https://vuepress.vuejs.org/zh/guide/deployment.html#github-pages

```