综合案例-购物车#目标：功能分析，创建项目，构建分析基本结构 功能模块分析 请求动态渲染购物车，数据存入vuex 数字框控件修改数据 动态计算总价和总数量 脚手架新建项目（注意：勾选vuex） 构建模块#既然明确数据要存到vuex，建议分模块存储，购物车数据存入cart模块，之后若还有其他数据如用户数据存入user模块，文章数据存入article模块等项目复杂度高，分模块存数据更方便管理 cart 购物车模块# 新建store/modules/cart.js 12345678export default { namespaced: true, state() { return { list: [], }; },}; 挂载到 vuex 仓库上store/index.js 123456import cart from './modules/cart';export default new Vuex.Store({...

构建 vuex（多组件数据共享）环境#基于脚手架创建项目，构建 vuex 多组件数据共享环境以简易组件通信实例为例效果是三个组件，共享一份数据，且： 任意一个组件都可以修改数据 三个组件的数据是同步的 创建一个空仓库# 安装 vuex 安装 v3 版本，vue/vue-router/vuex 的版本对应一般是 2/3/3 或 3/4/4 1npm add vuex@3 新建 vuex 模块文件 新建store/index.js专门存放 vuex 创建仓库 123Vue.use(Vuex);// 创建仓库：new Vuex.Store(); main.js 导入挂载 仓库导入挂载完毕后所有组件都能访问到它 核心概念- state 状态#提供数据#state提供唯一的公共数据源，所有共享的数据都要统一放到Store中的state对象中存储在state对象中可以添加需要共享的数据 12345678910// 创建仓库（空仓库）const store = new Vuex.Store({ /...

vuex 概述# vuex 是一个 vue 的状态管理工具，状态就是数据 通俗地说：vuex 是一个插件，可以帮我们管理 vue 通用的数据（多组件共享的数据），例如：购物车数据、个人信息数据 使用场景： 某个状态在很多个组件来使用（个人信息） 多个组件共同维护一份数据（购物车） 优势： 共同维护一份数据，数据集中化管理 响应式变化 操作简洁（vuex 提供了一些辅助函数）

ESlint 代码规范#代码规范#代码规范：一套写代码的约定规则例如：”赋值符号的左右是否需要空格”、”一句结束是否要加分号”…正规的团队需要统一的编码风格 JavaScript Standard Style 规范说明 https://standardjs.com/rules-zhcn.html 以下是这份规则中的一小部分： 字符串使用单引号 ‘abc’ 无分号 const name=’andy’ 关键字后加空格 if (name=’andy’){…} 函数名后加空格 function name (arg){…} 解决代码规范报错#若代码不符合 standard 的要求，ESlint就会有提示比如：在 main.js 中随意做一些改动，添加一些分号，空行等保存之后就会提示错误信息： 手动修正#根据错误提示来一项一项地手动修改纠正若不认识命令行中的语法报错是什么意思，根据错误代码去 ESlint 规则表中查找其具体含义 自动修正#基于 vscode 插件 ESlint 高亮错误，并通过配置自动帮助我们修复错误在安装完插件后，打开 vs...

基于 VueCli 自定义创建项目#安装脚手架-创建项目-选择自定义-Babel/Router/CSS/Linter创建项目：在工作区目录下打开一个 PowerShell 窗口 1vue create 项目名 选第三项手动选择配置回车后选择需要的特性，勾选 Router 路由和 CSS 预处理器vue 版本选 2路由模式暂时不使用历史模式，选 nocss 预处理器选 LessESlint 规范选第 3 套，无分号规范（标准，常用）保存时校验配置文件放到单独的文件中特性选择完成开始创建创建完成就得到了一个较完善的项目框架

案例-面经基础版#分析：配路由+实现功能 配路由 首页、面经详情，两个一级路由 首页内嵌四个可切换页面（嵌套二级路由） 实现功能 首页请求渲染 跳转传参（文章 id）到详情页，详情页渲染 组件缓存，优化性能 配路由#一级路由#首页组件Layout.vue，默认匹配路径/面经详情组件ArticleDetail.vue，匹配路径/detail路由规则： 123456const router = new VueRouter({ routes: [ { path: '/', component: Layout }, { path: '/detail', component: ArticleDetail }, ],}); 二级路由#四个二级路由属于首页路径下路由规则不能与一级路由同级，否则在点击二级路由后会转到新页面而不是同一页面下切换组件二级路由用children嵌套在首页路由规则中，children规则与routes一致 123456...

编程式导航-路由跳转&传参#基本跳转#问题：点击按钮跳转如何实现编程式导航：用 js 代码来进行跳转两种语法： path路径跳转（更建议方便） 12345this.$router.push('路由路径');// 完整写法this.$router.push({ path: '路由路径',}); name命名路由跳转（适合path路径长的场景） 123this.$router.push({ name: '路由名',}); 1234567const router = new VueRouter({ routes: [ // ... { name: '路由名', path: '/path/xxx', component: xxx }, // ... ],}); 实例#按钮绑定点击事件 1<button v-on:cli...

路由模式设置#问题：路由的路径看起来不自然，有#，能否切换为真正的路径形式 hash 路由（默认），例如：http://localhost:8080/#/home history 路由（常用），例如：http://localhost:8080/home （以后上线需要服务器端支持） 12345const router = new VueRouter({ routes, // 一旦使用了history模式，地址栏就没有#，需要后台配置访问规则 mode: 'history',});

Vue 路由-404#作用：当路径找不到匹配时，给个 404 提示页面位置：配在路由最后语法： 1{ path:'*' , component: NotFound } 这条路由规则放在routes最后，（*表示任意路径）前面的规则不匹配就匹配最后这个，跳转到NotFound组件当然，404 页面可以自定义效果，给一些提示信息或隔几秒后跳转回首页等等