前端工程师7——Vue3、Router、CLI、VueX
文章平均质量分 96
本专栏将学习JavaScript框架Vue3、Router、CLI、VueX,并学习对应的路由和脚手架。
ChrisP3616
C2在读硕士
展开
-
VueX (五)热重载、TypeScript 支持、从 3.x 迁移到 4.0
VueX (五)热重载、TypeScript 支持、从 3.x 迁移到 4.0文章目录VueX (五)热重载、TypeScript 支持、从 3.x 迁移到 4.01. 热重载动态模块热重载2. TypeScript 支持Vue 组件中 `$store` 属性的类型声明`useStore` 组合式函数类型声明简化 `useStore` 用法3. 从 3.x 迁移到 4.0非兼容性变更安装过程TypeScript 支持打包产物已经与 Vue 3 配套“createLogger”函数从核心模块导出新特性全新的原创 2021-10-21 22:21:38 · 477 阅读 · 2 评论 -
VueX (四)表单处理、测试
VueX (四)表单处理、测试文章目录VueX (四)表单处理、测试1. 表单处理双向绑定的计算属性2. 测试测试 Mutation测试 Action测试 Getter执行测试在 Node 中执行测试在浏览器中测试使用 Karma + karma-webpack 在浏览器中执行测试1. 表单处理当在严格模式中使用 Vuex 时,在属于 Vuex 的 state 上使用 v-model 会比较棘手:<input v-model="obj.message">假设这里的 obj 是在计算属原创 2021-10-21 22:18:24 · 198 阅读 · 1 评论 -
VueX (三)项目结构、组合式API、插件、严格模式
VueX (三)项目结构、组合式API、插件、严格模式文章目录VueX (三)项目结构、组合式API、插件、严格模式1. 项目结构2. 组合式API访问 State 和 Getter访问 Mutation 和 Action示例3. 插件在插件内提交 Mutation生成 State 快照内置 Logger 插件4. 严格模式开发环境与发布环境1. 项目结构Vuex 并不限制你的代码结构。但是,它规定了一些需要遵守的规则:应用层级的状态应该集中到单个 store 对象中。提交 mutation 是原创 2021-10-21 20:35:41 · 526 阅读 · 1 评论 -
VueX (二)Action(ES5参数解构)、Module
VueX (二)Action(ES5参数解构)、Module文章目录VueX (二)Action(ES5参数解构)、Module1. Action(ES5参数解构)分发 Action在组件中分发 Action组合 Action2. Module模块的局部状态命名空间在带命名空间的模块内访问全局内容(Global Assets)在带命名空间的模块注册全局 action带命名空间的绑定函数给插件开发者的注意事项模块动态注册保留 state模块重用1. Action(ES5参数解构)Action 类似于 m原创 2021-10-21 17:27:23 · 745 阅读 · 2 评论 -
VueX (一)安装、Store、State、Getter、Mutation
VueX (一)安装、Store、State、Getter、Mutation文章目录VueX (一)安装、Store、State、Getter、Mutation1. Vuex 是什么?什么是“状态管理模式”?什么情况下我应该使用 Vuex?2. 安装直接下载 / CDN 引用npmYarn自己构建3. 开始最简单的 Store4. State单一状态树在 Vue 组件中获得 Vuex 状态`mapState` 辅助函数对象展开运算符组件仍然保有局部状态5. Getter通过属性访问通过方法访问`mapGe原创 2021-10-21 15:35:38 · 285 阅读 · 1 评论 -
Vue Router 官方文档(二)导航守卫(`router.beforeEach`、完整的导航解析流程 )、路由懒加载(Promise)、路由元信息( `meta` )、过渡动效(` <router
Vue Router 官方文档(二)导航守卫(router.beforeEach、完整的导航解析流程 )、路由懒加载(Promise)、路由元信息( meta )、过渡动效(<router-view> )、数据获取、滚动行为(scrollBehavior)、导航故障文章目录Vue Router 官方文档(二)导航守卫(`router.beforeEach`、完整的导航解析流程 )、路由懒加载(Promise)、路由元信息( `meta` )、过渡动效(` ` )、数据获取、滚动行为(`scro原创 2021-10-13 17:42:34 · 570 阅读 · 1 评论 -
Vue Router 官方文档(一)==起步==、动态路由匹配、嵌套路由、编程式的导航(history)、命名路由、命名视图(`router-view`)、重定向和别名、路由组件传参(prop解耦)、
Vue Router 官方文档(一)起步、动态路由匹配、嵌套路由、编程式的导航(history)、命名路由、命名视图(router-view)、重定向和别名、路由组件传参(prop解耦)、HTML5 History 模式( mode: ‘history’)文章目录Vue Router 官方文档(一)==起步==、动态路由匹配、嵌套路由、编程式的导航(history)、命名路由、命名视图(`router-view`)、重定向和别名、路由组件传参(prop解耦)、HTML5 History 模式( mode:原创 2021-10-11 17:36:46 · 877 阅读 · 1 评论 -
Vue CLI 官方文档(三)模式和环境变量(--mode,.env)、构建目标(--target)、部署
Vue CLI 官方文档(三)模式和环境变量(–mode,.env)、构建目标(–target)、部署文章目录Vue CLI 官方文档(三)模式和环境变量(--mode,.env)、构建目标(--target)、部署1. 模式和环境变量模式环境变量示例:Staging 模式在客户端侧代码中使用环境变量只在本地有效的变量2. 构建目标应用库Vue vs. JS/TS 入口文件Web Components 组件注册多个 Web Components 组件的包异步 Web Components 组件在构建时使用原创 2021-10-11 11:05:23 · 1270 阅读 · 3 评论 -
Vue CLI 官方文档(二)浏览器Polyfill(打补丁)、HTML 和静态资源、CSS 相关、webpack 相关
Vue CLI 官方文档(二)浏览器Polyfill(打补丁)、HTML 和静态资源、CSS 相关、webpack 相关文章目录Vue CLI 官方文档(二)浏览器Polyfill(打补丁)、HTML 和静态资源、CSS 相关、webpack 相关1. 浏览器兼容性browserslistPolyfilluseBuiltIns: 'usage'构建库或是 Web Component 时的 Polyfills现代模式2. HTML 和静态资源HTMLIndex 文件插值PreloadPrefetch不生成原创 2021-10-10 22:18:58 · 774 阅读 · 1 评论 -
Vue CLI 官方文档(一)@vue/cli、@vue/cli-service、插件和 Preset
Vue CLI 官方文档(一)@vue/cli、@vue/cli-service、插件和 Preset文章目录Vue CLI 官方文档(一)@vue/cli、@vue/cli-service、插件和 Preset1. 介绍该系统的组件CLICLI 服务CLI 插件2. 安装升级项目依赖3. 基础-快速原型开发vue servevue build4. 基础-创建一个项目vue create使用图形化界面拉取 2.x 模板 (旧版本)5. 基础-插件和 Preset插件在现有的项目中安装插件项目本地的插件Pr原创 2021-10-10 17:30:44 · 5732 阅读 · 1 评论 -
Vue3官网-无障碍(二十一)基础、语义(表单、标签、aria-label、aria-labelledby、aria-describedby、按钮)、标准、资源
Vue3官网-无障碍(二十一)基础、语义(表单、标签、aria-label、aria-labelledby、aria-describedby、按钮)、标准、资源文章目录Vue3官网-无障碍(二十一)基础、语义(表单、标签、aria-label、aria-labelledby、aria-describedby、按钮)、标准、资源1. 基础跳过链接组织内容标题地标2. 语义表单标签占位符用法说明隐藏内容aria-hidden="true"按钮功能图像3. 标准网络内容无障碍指南 (WCAG)WCAG 2.1原创 2021-10-08 11:25:25 · 1449 阅读 · 1 评论 -
Vue3官网-规模化(二十)Vue Router路由、Vuex状态管理模式、服务端渲染(SSR指南)、安全
Vue3官网-规模化(二十)Vue Router路由、Vuex状态管理模式、服务端渲染(SSR指南)、安全文章目录Vue3官网-规模化(二十)Vue Router路由、Vuex状态管理模式、服务端渲染(SSR指南)、安全1. 路由(vue-router)官方 Router从零开始简单的路由整合第三方路由2. 状态管理(Vuex)类 Flux 状态管理的官方实现给 React 开发者的参考信息从零打造简单状态管理3. 服务端渲染SSR 完全指南Nuxt.jsQuasar Framework SSR + PW原创 2021-10-08 10:38:39 · 705 阅读 · 1 评论 -
Vue3官网-工具(十九)TypeScript 支持(Vue CLI)、生产环境部署
Vue3官网-工具(十九)TypeScript 支持(Vue CLI)文章目录Vue3官网-工具(十九)TypeScript 支持(Vue CLI)1. TypeScript 支持NPM 包中的官方声明推荐配置Webpack 配置开发工具项目创建编辑器支持定义 Vue 组件与 Options API 一起使用为 `globalProperties` 扩充类型注解返回类型注解 Props注解 emit与组合式 API 一起使用类型声明 `refs`为模板引用定义类型类型声明 `reactive`类型声明 `原创 2021-10-07 17:36:00 · 329 阅读 · 1 评论 -
Vue3官网-工具(十八)单文件组件、(SFC)、测试(Jest)、移动端
Vue3官网-工具(十八)单文件组件、(SFC)、测试(Jest)、移动端文章目录Vue3官网-工具(十八)单文件组件、(SFC)、测试(Jest)、移动端1. 单文件组件介绍工作原理为什么要使用 SFC关注点分离怎么样?2. 测试介绍单元测试介绍选择框架框架组件测试介绍选择框架推荐端到端 (E2E) 测试介绍选择框架推荐3. 移动端介绍混合应用开发CapacitorNativeScript总结:1. 单文件组件介绍Vue 单文件组件(又名 *.vue 文件,缩写为 SFC)是一种特殊的文件格原创 2021-10-07 17:29:07 · 1104 阅读 · 1 评论 -
Vue3官网-高级指南(十七)响应式计算`computed`和侦听`watchEffect`(onTrack、onTrigger、onInvalidate、副作用的刷新时机、`watch` 、pre)
Vue3官网-高级指南(十七)响应式计算computed和侦听watchEffect(onTrack、onTrigger、onInvalidate、副作用的刷新时机、watch 、pre)、渲染机制和优化、Vue 2 中的更改检测警告文章目录Vue3官网-高级指南(十七)响应式计算`computed`和侦听`watchEffect`(onTrack、onTrigger、onInvalidate、副作用的刷新时机、`watch` 、pre)、渲染机制和优化、Vue 2 中的更改检测警告1. 响应式计算和侦听原创 2021-09-27 16:19:48 · 1549 阅读 · 1 评论 -
Vue3官网-高级指南(十六)vue响应式原理\步骤\本质(副作用effect、响应式状态reactive、响应式原始值ref(解包)、构造响应值toRefs)、proxy(代理、this)
Vue3官网-高级指南(二)vue响应式原理\步骤\本质(副作用effect、响应式状态reactive、响应式原始值ref(解包)、构造响应值toRefs)、proxy(代理、this)文章目录Vue3官网-高级指南(二)vue响应式原理\步骤\本质(副作用effect、响应式状态reactive、响应式原始值ref(解包)、构造响应值toRefs)、proxy(代理、this)1. 深入响应性原理什么是响应性Vue 如何知道哪些代码在执行Vue 如何跟踪变化被代理的对象Proxy vs 原始标识如何让原创 2021-09-27 13:29:21 · 870 阅读 · 2 评论 -
Vue3官网-高级指南(十五)Vue 与 Web Components
Vue3官网-高级指南(一)Vue 与 Web Components文章目录Vue3官网-高级指南(一)Vue 与 Web Components1. Vue 与 Web Components在 Vue 中使用自定义元素跳过组件的解析传递 DOM Property使用 Vue 构建自定义元素defineCustomElement将 SFC 作为自定义元素Vue 自定义元素库的提示对比 Web Components 与 Vue 组件总结:补充Vue (读音 /vjuː/,类似于 view) 是原创 2021-09-26 16:52:17 · 3511 阅读 · 1 评论 -
Vue3官网-可复用&组合式API(十四)实例 property(\$slots,\$attrs)、渲染函数render(虚拟节点VNode,h() 参数,使用JavaScript代替模板功能),插件
Vue3官网-可复用&组合式API(四)实例 property($slots,$attrs)、渲染函数render(虚拟节点VNode,h() 参数,使用JavaScript代替模板功能),插件(编写,创建插件)文章目录Vue3官网-可复用&组合式API(四)实例 property(\$slots,\$attrs)、渲染函数render(虚拟节点VNode,`h()` 参数,使用JavaScript代替模板功能),插件(编写,创建插件)1. 实例 property$data$props$e原创 2021-09-25 16:21:04 · 961 阅读 · 2 评论 -
Vue3官网-可复用&组合式API(十三)Mixin(不如组合式API)、自定义指令(app.directive、el,binding,动态指令参数,函数简写)、Teleport(传送)
Vue3官网-可复用&组合式API(三)Mixin(不如组合式API)、自定义指令(app.directive、el,binding,动态指令参数,函数简写)、Teleport(传送)文章目录Vue3官网-可复用&组合式API(三)Mixin(不如组合式API)、自定义指令(app.directive、el,binding,动态指令参数,函数简写)、Teleport(传送)1. Mixin基础选项合并全局 mixin自定义选项合并策略不足2. 自定义指令2.1 官网应用API补充direc原创 2021-09-24 19:37:57 · 832 阅读 · 1 评论 -
Vue3官网-可复用&组合式API(十二)生命周期钩子、Provide / Inject(响应性reactive, ref)、模板引用(从setup()中return、侦听模板watchEffect)
Vue3官网-组合式API(二)生命周期钩子、Provide / Inject(响应性、reactive, ref)、模板引用(从setup()中return、侦听模板watchEffect,flush: ‘post’)文章目录Vue3官网-组合式API(二)生命周期钩子、Provide / Inject(响应性、reactive, ref)、模板引用(从setup()中return、侦听模板watchEffect,flush: 'post')1. 生命周期钩子2. Provide / Inject设想场原创 2021-09-23 19:45:55 · 745 阅读 · 1 评论 -
Vue3官网-可复用&组合式API(十一)组件式API介绍(官网API ref、toRef、toRefs)、Setup(es6解构、props、context、attrs slots emit)
Vue3官网-组合式API(一)组件式API介绍(官网API ref、toRef、toRefs)、Setup(es6解构、props、context、attrs slots emit)文章目录Vue3官网-组合式API(一)组件式API介绍(==官网API== ref、toRef、toRefs)、Setup(es6解构、props、context、attrs slots emit)1. 组合式API介绍什么是组合式 API?组合式 API 基础`setup` 组件选项带 `ref` 的响应式变量在 `se原创 2021-09-23 16:57:57 · 1314 阅读 · 3 评论 -
Vue3官网-过渡&动画(十)gsap、列表过渡(\<transition-group>、tag、FLIP技术、v-move、动态过度、可复用过渡)、状态过渡(第三方库gsap、把过渡放在子组件)
Vue3官网-过渡&动画(二)gsap、列表过渡(<transition-group>、tag、FLIP技术、v-move、动态过度、可复用过渡)、状态过渡(第三方库gsap、把过渡放在子组件)文章目录Vue3官网-过渡&动画(二)gsap、列表过渡(\、tag、FLIP技术、v-move、动态过度、可复用过渡)、状态过渡(第三方库gsap、把过渡放在子组件)1. 列表过渡列表的进入/离开过渡列表的移动过渡列表的交错过渡可复用的过渡动态过渡2. 状态过渡状态动画与侦听器动态状态原创 2021-09-22 20:59:28 · 1001 阅读 · 3 评论 -
Vue3官网-过度&动画(九)transition&animation、ease-out,cubic-bezier、过渡class enter-from JavaScript 钩子 过渡模式out-i
Vue3官网-过度&漫画(一)过渡 & 动画概述(transition & animation)、ease-in,ease-out,cubic-bezier、过渡class(v-enter-from,v-enter-active)、JavaScript 钩子、过渡模式(out-in)文章目录Vue3官网-过度&漫画(一)过渡 & 动画概述(transition & animation)、ease-in,ease-out,cubic-bezier、过渡clas原创 2021-09-22 17:17:47 · 933 阅读 · 1 评论 -
Vue3官网-深入组件(八)模板引用(ref 和 $refs)、处理边界情况( `v-once`)
Vue3官网-深入组件(四)模板引用(ref 和 $refs)、处理边界情况( v-once)文章目录Vue3官网-深入组件(四)模板引用(ref 和 $refs)、处理边界情况( `v-once`)1. 模板引用(ref 和 $refs)1.1 vue中的 ref 和 $refs1.1.1 ref作用于组件1.1.2 ref作用于Html标签1.1.3 $nextTick()1.1.4 使用Vue.nextTick()1.2 模板引用2. 处理边界情况( `v-once`)控制更新强制更新低级静态组件与原创 2021-09-20 16:51:41 · 2217 阅读 · 5 评论 -
Vue3官网-深入组件(七)父子组件、插槽(\<slot>、作用域插值、具名插槽缩写)、 Provide / Inject(响应式)、动态组件`keep-alive`、异步组件 `defineAsyn
Vue3官网-深入组件(三)父子组件、插槽(<slot>、作用域插值、具名插槽缩写)、 Provide / Inject(响应式)、动态组件keep-alive、异步组件 defineAsyncComponent文章目录Vue3官网-深入组件(三)父子组件、插槽(\、作用域插值、具名插槽缩写)、 Provide / Inject(响应式)、动态组件`keep-alive`、异步组件 `defineAsyncComponent`1. 插槽\ \插槽内容渲染作用域备用内容具名插槽作用域插槽独占默认原创 2021-09-19 18:18:14 · 335 阅读 · 3 评论 -
Vue3官网-深入组件(六)props(单向数据流、验证)、非 Prop 的 Attribute(禁止继承)、$attrs、自定义事件(在组件上使用 v-model、emits)
Vue3官网-深入组件(二)props(单向数据流、验证)、非 Prop 的 Attribute(禁止继承)、$attrs、自定义事件(在组件上使用 v-model、emits)文章目录Vue3官网-深入组件(二)props(单向数据流、验证)、非 Prop 的 Attribute(禁止继承)、$attrs、自定义事件(在组件上使用 v-model、emits)1. PropsProp 类型传递静态或动态的 Prop传入一个数字传入一个布尔值传入一个数组传入一个对象传入一个对象的所有 property单向原创 2021-09-18 16:46:52 · 560 阅读 · 1 评论 -
Vue 补充:\$attrs和\$listeners属性
Vue3 补充:$attrs和$listeners属性这篇文章主要给大家介绍了关于Vue v2.4中新增的$attrs及$listeners属性的使用方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着我来一起学习学习吧。1. 前言多级组件嵌套需要传递数据时,通常使用的方法是通过vuex。如果仅仅是传递数据,而不做中间处理,使用 vuex 处理,未免有点杀鸡用牛刀。Vue 2.4 版本提供了另一种方法,使用 v-bind=”$attrs”, 将父组件中原创 2021-09-18 15:25:42 · 225 阅读 · 3 评论 -
Vue3官网-深入组件(五)组件基础($emit触发事件、在组件上绑定v-model双向数据绑定)、组件注册(组件名、全局注册、局部注册)
Vue3官网-深入组件(一)组件基础($emit触发事件、在组件上绑定v-model双向数据绑定)、组件注册(组件名、全局注册、局部注册)文章目录Vue3官网-深入组件(一)组件基础($emit触发事件、在组件上绑定v-model双向数据绑定)、组件注册(组件名、全局注册、局部注册)1. 组件基础基本实例组件的复用组件的组织通过 Prop 向子组件传递数据监听子组件事件使用事件抛出一个值在组件上使用 v-model通过插槽分发内容动态组件解析 DOM 模板时的注意事项元素放置限制Element Place原创 2021-09-17 20:26:09 · 537 阅读 · 3 评论 -
Vue3官网基础(四)事件处理(v-on、事件修饰符.passive.self.capture)、表单绑定输入 v-model(textarea、checkbox、radio、select、值绑定、修
Vue3官网基础(四)事件处理(v-on、事件修饰符.passive.self.capture)、表单绑定输入 v-model(textarea、checkbox、radio、select、值绑定、修饰符 )文章目录Vue3官网基础(四)事件处理(v-on、事件修饰符.passive.self.capture)、表单绑定输入 v-model(textarea、checkbox、radio、select、值绑定、修饰符 )1. 事件处理监听事件事件处理方法内联处理器中的方法多事件处理器事件修饰符按键修饰符按原创 2021-09-17 15:21:59 · 1501 阅读 · 1 评论 -
Vue3官网基础(三)Class 与 Style 绑定(绑定 HTML Class、内联、数组)、 条件渲染(v-if)、列表渲染 v-for(数组更新、在组件上使用v-for)
Vue3官网基础(三)Class 与 Style 绑定(绑定 HTML Class、内联、数组)、 条件渲染(v-if)、列表渲染 v-for(数组更新、在组件上使用v-for)文章目录Vue3官网基础(三)Class 与 Style 绑定(绑定 HTML Class、内联、数组)、 条件渲染(v-if)、列表渲染 v-for(数组更新、在组件上使用v-for)1. Class 与 Style 绑定绑定 HTML Class对象语法数组语法在组件上使用绑定内联样式对象语法数组语法自动添加前缀多重值2. 条原创 2021-09-16 21:06:58 · 386 阅读 · 1 评论 -
Vue3官网基础(二)模板语法(插值、指令修饰符、bind&on缩写、动态参数[])、data属性(方法methods、防抖和节流)、计算属性和侦听器(computed、watch)
Vue3官网基础(二)模板语法(插值、指令修饰符、bind&on缩写、动态参数[])、data属性(方法methods、防抖和节流)、计算属性和侦听器(computed、watch)文章目录Vue3官网基础(二)模板语法(插值、指令修饰符、bind&on缩写、动态参数[])、data属性(方法methods、防抖和节流)、计算属性和侦听器(computed、watch)1. 模板语法插值文本原始 HTMLAttribute使用 JavaScript 表达式指令参数动态参数修饰符缩写`v-b原创 2021-09-16 15:06:07 · 273 阅读 · 1 评论 -
Vue3官网基础(一)安装、介绍(语法介绍)、组件化应用、应用实例、根组件、生命周期钩子
Vue3官网基础(一)安装、介绍(语法介绍)、组件化应用、应用实例、根组件、生命周期钩子文章目录Vue3官网基础(一)安装、介绍(语法介绍)、组件化应用、应用实例、根组件、生命周期钩子1. 安装发布版本说明Vue DevtoolsCDN下载并自托管npm命令行工具 (CLI)Vite对不同构建版本的解释使用 CDN 或没有构建工具使用构建工具对于服务端渲染运行时 + 编译器 vs. 仅运行时2. 介绍Vue.js 是什么起步声明式渲染处理用户输入条件与循环组件化应用构建与自定义元素的关系准备好了吗?3.原创 2021-09-15 20:14:14 · 417 阅读 · 1 评论