【Vue3从基础到进阶】
Vue3基础加项目实战进阶系列
不停喝水
Web. Write Less,Do More
展开
-
【Vue3】不读一行源码,对 vue3所有的核心逻辑了如指掌 - 速读《Vue.js 设计与实现》
在当前这个时间段下,关于vue 3源码的书籍,主要有两本。第一本就是,咱们本次要讲的《Vue.js 设计与实现》。第二本是,《vue.js 技术内幕》,作者是黄轶。正巧,两本书我都买来了。这两本书,虽然都是讲解 vue 3` 源码的,但是在讲解的方式上,有非常大的区别。首先是 《Vue.js 设计与实现》:它不同于市场上纯粹的 “源码分析” 类的书籍。而是从高层的设计角度,探讨框架需要关注的问题(-尤雨溪序),以提出问题 - 分析思路 - 解决问题的方式,来讲解vue 3的核心设计。原创 2023-12-04 15:37:18 · 1075 阅读 · 0 评论 -
【Vue3】element-plus中el-tree的递归处理赋值回显问题
整体思路很简单:初始化树 -> 处理 el-tree 回显 -> 递归处理所有层级菜单选中的id。在下次进入编辑页面时,需要将当前选中租户的权限回显出来。只要勾选一个子节点,回来接收到的父节点数据。说明:二级下面会有多个三级菜单,以此类推。所以涉及到了权限管理和菜单管理。会显示 ,会显示所有子节点数据。由于项目是从0-1开始构建的。rbac都需要重新构建对接。一级菜单包含多个二级菜单。原创 2023-02-10 11:39:02 · 5310 阅读 · 1 评论 -
【vue3】element el-menu,前端做菜单搜索
前端过滤函数,前端搜索菜单原创 2022-07-22 09:55:30 · 2257 阅读 · 0 评论 -
【vue3】vue3 路由配置文件路径@开头报错找不到文件
vue3 路由配置文件路径@开头报错找不到文件解决方案原创 2022-07-19 20:33:34 · 2787 阅读 · 0 评论 -
【vue3】vue3-json-viewer使用
简单易用的json内容展示组件,适配vue3和vite。 在使用vue3+vite开发时,发现需要用到显示json数据组件,发现vue-json-viewer只能兼容vue2,于是花了一个小时,重写的vue3的适配。原创 2022-07-11 23:30:00 · 3514 阅读 · 3 评论 -
【Vue3系列】vue-press2 中使用 Element-Plus的Icon 图标
Element Plus 提供了一套常用的图标集合。1.使用图标# 如果你想像用例一样直接使用,你需要全局注册组件,才能够直接在项目里使用。2.如若想查看所有可用的 SVG 图标请查阅 @element-plus/icons-vue 和 element-plus-icons的源代码或当前页的 Icon Collection3.CDN 导入和 自动导入 正在开发中。1.安装# 选择一个你喜欢的包管理器# NPM$ npm install @element-plus/icons-vue#原创 2022-04-13 22:02:06 · 1306 阅读 · 1 评论 -
【Vue3系列】vue3过滤器功能
1. computed computed: { computedStatus() { // 计算属性要return一个函数接收参数 return function (state) { switch (state) { case 1: return '待支付'; break; case 2: return '原创 2022-01-07 14:03:24 · 1635 阅读 · 0 评论 -
【Vue3系列】 父组件调用子组件的方法-子组件向父组件传值
一:父组件调用子组件的方法父组件<template> <div> 父页面 <son-com ref="sonRef"/> <button @click="handleClick">test</button> </div></template><script>import {defineComponent,ref} from 'vue';e原创 2021-12-23 11:31:08 · 13550 阅读 · 0 评论 -
【Tinymce富文本】如何实现disabled和readonly效果
一:项目产品需求提前说一下“tinymce”: “^5.9.2”,我用的5.9版本哈要实现根据条件判断这个富文本是否可以编辑这里我们最开始尝试了一下:disabled=“true” 和readonly都没有用 ,刷新以后全部失效然后google一番,并且看了官方文档都没有用哈哈哈哈哈 <div class="tinymacClass"> <Tinymce :showImageUpload="false" :disabled="true" v-mo原创 2021-12-20 16:32:47 · 2687 阅读 · 2 评论 -
Vue3+ElementPlus+Koa2 全栈开发后台系统=>权限和工作流设计介绍-11
1.权限和工作流2.权限3.工作流原创 2021-09-02 23:55:43 · 657 阅读 · 0 评论 -
Vue3+ElementPlus+Koa2 全栈开发后台系统=>部门管理,创建-编辑-删除功能实现⑩
1.创建路由 { name: 'dept', path: '/system/dept', meta: { title: '部门管理' }, component: () => import('./../views/Dept.vue') },2.构建页面<template原创 2021-09-02 23:42:14 · 726 阅读 · 5 评论 -
Vue3+ElementPlus+Koa2 全栈开发后台系统=>菜单管理,角色管理的增删改查功能,权限控制,权限列表递归处理⑨
1.优化请求的Mock数据没设置导致bug问题这两个模块的代码,使用的optionsApi,因为不涉及到比较复杂的功能. /** * 请求核心函数 * @param {*} options请求配置 */function request(options) { options.method = options.method || 'get' if (options.method.toLowerCase() === 'get') { options.param原创 2021-08-29 23:46:22 · 1497 阅读 · 1 评论 -
Vue3+ElementPlus+Koa2 全栈开发后台系统=>用户管理增删改查,接口对接,关于getCurrentInstance的坑⑧
User.vue组件构建<template> <div class="user-manage"> <div class="query-form"> <el-form ref="form" :inline="true" :model="user"> <el-form-item label="用户ID" prop="userId"> <el-input placeholder="请原创 2021-08-18 00:18:15 · 919 阅读 · 3 评论 -
Vue3+ElementPlus+Koa2 全栈开发后台系统=>欢迎页实现,首页菜单功能实现,菜单交互及递归实现,面包屑实现⑦
1.欢迎页实现<template> <div class="welcome"> <div class="content"> <div class="sub-title">欢迎体验</div> <div class="title">Vue3通用后台管理系统</div> <div class="desc"> - Vue3.0+ElementPlus+原创 2021-08-13 00:50:54 · 1433 阅读 · 1 评论 -
Vue3+ElementPlus+Koa2 全栈开发后台系统=>封装api,vuex封装,登陆组件完成⑥
1.login页面构建<template> <h1>欢迎来到登陆</h1> <el-button type="primary" @click="goHome">返回首页</el-button></template><script>import {ref,defineProps,reactive} from 'vue';import {useRouter} from 'vue-router';expor原创 2021-08-11 22:00:21 · 243 阅读 · 0 评论 -
Vue3+ElementPlus+Koa2 全栈开发后台系统=>环境配置,axios二次封装,storage二次封装⑤
1.环境配置1.一般我们的环境配置都是放在config里面的Index文件创建config文件/** * 环境配置封装 */const env = import.meta.env.MODE || 'prod';const EnvConfig = { dev: { baseApi: '/', mockApi:'', }, test: { baseApi: '//test.czl.com/api', moc原创 2021-08-06 00:43:04 · 723 阅读 · 0 评论 -
Vue3+ElementPlus+Koa2 全栈开发后台系统=>路由封装④
1.创建router.js文件import { createRouter, createWebHashHistory } from 'vue-router'import Home from '../components/Home.vue'import Welcome from '../components/Welcome.vue'import Login from '../components/Login.vue'const routes = [ { name: 'hom原创 2021-08-04 23:13:37 · 350 阅读 · 0 评论 -
Vue3+ElementPlus+Koa2 全栈开发后台系统=>项目初始化,vite创建项目,插件安装,目录结构,环境配置③
1.node环境安装一定要确保你的电脑是有Node环境的2.全局安装vue脚手架查看版本1.通过vue脚手架来创建项目2.通过vite来创建项目这个项目我们采用vite来创建项目,因为vite相较于webpack热更新快很多3.选择vue版本这里不选择vue-ts版本是因为,现在vue+ts还是有点坑的,等到后面再慢慢把ts的坑填过去,替换成vue+ts4.创建完成1.这里我们yarn安装依赖模块就好了2.为什么要用yarn呢,因为会生成yarn.lock原创 2021-08-02 23:20:56 · 592 阅读 · 1 评论 -
Vue3 =>Vue3直通车,对比Vue2更新了什么
1.直通车2.设计目标3.VDOM重构前4.VDOM重构后5.原创 2021-07-31 17:16:37 · 156 阅读 · 0 评论 -
Vue3+ElementPlus+Koa2 全栈开发后台系统=>开发流程,如何理解通用后台,需求介绍②
1.项目规划2.项目开发流程3.如何理解通用后台4.需求介绍原创 2021-07-31 15:49:31 · 253 阅读 · 0 评论 -
Vue3+ElementPlus+Koa2 全栈开发后台系统 => 需要了解的一切①
1.技术选型2.能做到什么?3.开发概述4.涵盖部分内容5.包含技术栈6.系统模块7.开发流程8.核心技术9.权限RBAC10.审批流11.审批流程图12.项目图1.登陆2.首页3.模块13.章节介绍14.得到的收获...原创 2021-07-31 15:37:00 · 701 阅读 · 0 评论 -
Vue3 => Vue3.0+TypeScript打造企业级组件库 1
1.创建一个vue3+ts的项目npm i -g @vue/clivue create vue3-json-schema-form选择最后一项后按照这个来选择1.Manually select feature2.Vue version,Babel,TS,Linter,Unit3.3.X4.nO5.yES6.pRETTIER7.Lint on Save,Lint and fix on commit8.Jest9.congif files10.yes or no原创 2021-07-30 00:22:10 · 740 阅读 · 7 评论 -
Vue=>之自定义组件的v-model
1. vue官网的文档2.定制 v-model父组件<template> <div> <p>vue 高级特性</p> <hr> <!-- 自定义 v-model --> <p>{{name}}</p> <CustomModel v-model="name"/> <!-- 等同原创 2021-07-05 14:33:06 · 238 阅读 · 0 评论 -
Vue3系列 =>.vue文件出现 type declarations can only be used in TypeScript files.
在 *.vue 文件中的script标签上有指定 lang 参数吗?<script lang="ts"></script>如果你喜欢手动vue片段来生成结构的话,可能会出现这个问题属实离谱…原创 2021-06-09 23:19:25 · 2463 阅读 · 2 评论 -
Vue3系列 =>完美的Vue项目是怎样的?
完美的Vue项目具有的1.数据的展示-最好是有多级复杂数据的展示2.数据的创建-可以发散出多个功能3.组件的抽象-循序渐进的组件开发4.整体状态数据结构的设计和实现5.权限管理和控制6.API数据接口开发流程1.将UI划分出组件的层级2.创建应用的静态版本3.组件属性分析...原创 2021-06-05 21:47:58 · 155 阅读 · 1 评论 -
Vue3系列 =>Suspense 异步请求好帮手
Suspense组件是Vue3中的知名功能之一。它们允许我们的应用程序在等待异步组件时渲染一些后备内容,可以让我们创建一个平滑的用户体验。值得庆幸的是,Suspense组件非常容易理解,它们甚至不需要任何额外的导入!可以解决异步请求的困境; Suspense是Vue3推出的一个内置的特殊组件; 如果使用Suspense,需要返回一个Promise本文主要是展示一下加载多个异步组件的场景,遇到不稳定问题,及解决方法(加载单个,只需要引入单个组件即可)1.创建第一个组件:AsyncS原创 2021-06-05 17:45:35 · 360 阅读 · 0 评论 -
Vue3系列 =>Vue3初体验 ref ,computed , reactive, toRefs使用
<template> <div id="app"> <img alt="Vue logo" src="./assets/logo.png"> <h1>{{count}}</h1> <h1>{{double}}</h1> <button @click="increase">????+1</button> </div></template>原创 2021-05-19 23:13:14 · 496 阅读 · 1 评论