m0_58250910的博客

vite (下一代构建工具)

一. Vue3优势二. Vue2选项式API vs Vue3组合式API三. 案例: 点击后数量加1

【代码】66 - vue3 番外-路由跳转传参。

【代码】65 - vue3 番外-ref 声明数组中是对象类型。

1. 安装clipboard-polyfill。

8. 浏览器输入ip+/index/ 访问，出现页面表示前端部署成功。1. 编辑vite.config.js。6. 配置nginx.conf文件。2. 配置request.js。5. centos 部署系统。7. 重新加载配置文件。

【代码】80- vue3案例 - 11 -个人中心。

1. AI的认知 & 两个工具2. ChatGPT的基本使用(Prompt 优化)3. Copilot 的基本使用(代码实战，高效编码)4. 个人中心项目实战 基本资料 更换头像 重置密码认知同步:1. AI早已不是新事物(接受) 语音识别，人脸识别，无人驾驶，智能机器人...(包括 ChatGPT 也是研发了多年的产物)2. AI本质是智能工具(认识) 人工智能辅助，可以提升效率，但不具备思想意识，无法从零到一取代人类工作3

默认是英文的，由于这里不涉及切换， 所以在 App.vue 中直接导入设置成中文即可，

title: {})</script><template>-- 右侧按钮: 使用具名插槽 --></div></div>-- 插槽定义内容 --></el-card>.header {</style>

..// 用户模块 token setToken removeToken// () => {...const user = ref({}) //定义空数据const res = await userGetInfoService() // 调用获取用户信息接口...user,getUser// }// },// ...//)

/ 注册,整个用于提交的form对象})</script>...// 注册,整个用于提交的form对象...// 整个表单的校验规则// 1. 非空校验 required: true ,message消息提示, trigger触发校验的实际 blur(失焦)change(实时)// 2. 长度校验 mix:xxx, max:xxx// 3. 正则校验 pattern: 正则规则 \S:非空字符// 4. 自定义校验 => 自己写逻辑校验(校验函数)

【代码】74- vue3案例 - 05-整体路由设计。

【代码】73 - vue3案例 - 04 -数据交互-请求工具设计。

除了index.js。

一. 按需引入 Element Pluscomponents自动注册。

import {// createRouter 创建路由实例// 1. history模式: createWebHistory 地址栏不带 #// 2. hash模式: createWebHashHistory 地址栏带 #// import.meta.env.BASE_URL: 路由前缀// vite中的环境变量 import.meta.env.BASE_URL 就是 vite.config.js中的 base 配置项routes: []})

【代码】69 - vue3案例 - 02 - Eslint配置代码风格。

【代码】68 - vue3案例 - 01 - 项目介绍 和 创建。

需要配置publicPath 配成相对路径。可以生成，浏览器能够直接运行的网页。:默认情况下，需要放到服务器根目录。

actions: {// 个人信息要重置// 购物车信息要重置(跨模块调用 mutation) cart/setCartList// { root: true }:全局寻找。

携带上对应的订单相关参数。跳转到"订单结算台"

【代码】59 - 综合案例 - 智慧商城-11 - 购物车。

data () {return {addCount: 1 // 数字框绑定的数据--子组件接收数据-->-- 动态绑定数据 -->// 接收父组件数据props: {value: {default: 1

【代码】57 - 综合案例 - 智慧商城-09 - 分类页。

原有关键字移除，再追加。

目标:实现首页静态结构，封装接口，完成首页动态渲染。

Pinia是Vue的最新状态管理工具，是Vuex的替代品// 定义store// defineStore(仓库唯一标识,()=>{...})// 声明数据 state - count// 声明操作数据的方法 action(普通函数)// 声明基于数据派生的计算属性 getters (computed)// 声明数据 state - msgreturn {count,msg,addCount,subCount,double})// 声明数据// 声明操作数据的方法//支持异步。

背景说明:有<script setup>之前，如果要定义 props,emits 可以轻而易举地添加一个与 setup 平级的属性但是用了<script setup> 后，就没法这么干了 setup 属性已经没有了，自然无法添加与其平级的属性。为了解决这一问题，引入了 defineProps 与 defineEmits 这两个宏。但这只解决了 props 与emits 这两个属性如果我们要定义组件的 name 或其他自定义的属性，还是得回到最原始的用法一再添加一个普通的 script> 标签这样就会存在两

(1). setup选项的执行时机?beforeCreate钩子之前 自动执行(2). setup写代码的特点是什么?定义数据 +函数 然后以对象方式return(3). <script setup>解决了什么问题?经过语法糖的封装更简单的使用组合式AP(4). setup中的this还指向组件实例吗?指向undefined二.组合式API-reactive 和 ref函数推荐: 以后声明数据,统一使用ref(1).作用:接收对象类型数据的参数传入并返回一个响应式对象。

【代码】54 - 综合案例 - 智慧商城-06 -全局前置导航守卫。

统一存放到 api 模块。

①. views / layout 文件夹下新建 .vue文件​​​​​​​②. 填充组件内容<template><script></script>

postcss 插件。px 自动转换 vw。

Mint UI(饿了么) Cube Ul(滴滴)

【代码】49 - 综合案例 - 智慧商城-01-创建项目。

数据存 vuex修改数据动态计算。

store.dispatch('模块名/xxx' , 额外参数)$store.commit('模块名/xxx'，额外参数)mapMutations('模块名',['xxx'])mapActions('模块名', ['xxx'])mapGetters('模块名', ['xxx'])$store.getters['模块名/xxx']mapState('模块名',[xxx])$store.state.模块名.xxx。会集中到一个比较大的对象。

getters:{// 注意:// (1) getters 函数的第一个参数是state// (2) getters 函数必须要有返回值。

状态管理工具。