开发一个网站的流程,网站分析设计做的项目的过程,新媒体运营和ui设计哪个好,优秀的个人网页展示Pinia基础使用 - 计数器案例
定义Store#xff08;state action#xff09; 组件使用Store
getters实现
Pinia中的 getters 直接使用 computed函数 进行模拟, 组件中需要使用需要把 getters return出去
action异步实现
编写方式#xff1a;异步action函数的写法和组件…Pinia基础使用 - 计数器案例
定义Storestate action 组件使用Store
getters实现
Pinia中的 getters 直接使用 computed函数 进行模拟, 组件中需要使用需要把 getters return出去
action异步实现
编写方式异步action函数的写法和组件中获取异步数据的写法完全一致接口地址
需求在Pinia中获取频道列表数据并把数据渲染App组件的模板中
storeToRefs工具函数
使用storeToRefs函数可以辅助保持数据state getter的响应式解构 pinia持久化插件 Pinia 如何快速实现持久化
pinia-plugin-persistedstate
Vue3 大事件管理系统
创建项目 1. 进入项目目录
2. 安装依赖
3. 启动项目 Eslint 配置代码风格
配置文件 .eslintrc.cjs
1. prettier 风格配置 1. 单引号 2. 不使用分号 3. 宽度80字符 4. 不加对象|数组最后逗号 5. 换行符号不限制win mac 不一致
2. vue组件名称多单词组成忽略index.vue
3. props解构关闭
注安装Eslint且配置保存修复不 要开启默认的自动保存格式化 暂存区 eslint 校验
1. 安装 lint-staged 包 pnpm i lint-staged -D
2. package.json 配置 lint-staged 命令
3. .husky/pre-commit 文件修改 目录调整
默认生成的目录结构不满足我们的开发需求所以这里需要做一些自定义改动。
主要是以下工作
1. 删除一些初始化的默认文件
2. 修改剩余代码内容
3. 新增调整我们需要的目录结构
4. 拷贝全局样式和图片安装预处理器支持
路由初始化 创建路由实例由 createRouter 实现
路由模式
1. history 模式使用 createWebHistory()
2. hash 模式使用 createWebHashHistory()
3. 参数是基础路径 按需引入 Element Plus
Pinia 构建用户仓库 和 持久化 Pinia 仓库统一管理 pinia 独立维护
初始化代码在 main.js 中仓库代码在 stores 中代码分散职能不单一
优化由 stores 统一维护在 stores/index.js 中完成 pinia 初始化交付 main.js 使用
仓库 统一导出
使用一个仓库 import { useUserStore } from ./stores/user.js 不同仓库路径不一致
优化由 stores/index.js 统一导出导入路径统一 ./stores而且仓库维护在 stores/modules 中
首页整体路由设计
