每天学一点vue3

话说UI库提供的功能是越来越强了，比如这个 element 的 Cascader 实在是太强大了，拿过来准备好数据就可以直接使用了。 另一个就是想小改一下数据结构。 Cascader 默认的数据结构是前端非常喜欢的“套娃”式结构，这个嘛前端正常，但是对于后端来说就很头痛了，因为…

我们都知道Vuex是专门为Vue开发的一套状态管理方式，换个角度来看呢，就是给Vue2.x的不足之处打补丁的方式。 像 getter、action都是为了实现代码复用而采取的方式，就连module也是因为不方便单独编写管理模块而设计的。 而在Vue3的环境下，以及没有这些不足了…

也许这个问题比较基础吧，找了半天也没找到，有的说要安装插件，有的说要改什么配置，晕晕的，害得我一直以为工程化的开发环境下无法直接进行调试呢，直到有一天，偶然发现了。。。（另外这是vue3，没试过vue2 是啥样的。） 以往的经验呢，想要调试我们写的js代码，会按F12 找到 S…

开始尝试做自己的状态管理。 我么可以写一个单独的js文件，然后用import的方式引入进来，然后我们就可以做统一的处理了。 在函数内部定义 userInfo，然后在return的时候加上readonly作为限制，这样可以就以避免误操作而导致直接改变状态。 这里获取状态有两种方式…

一番整理之后，属性方面更简洁了一些，而且也方便了一些，另外也不是太乱了。 每个控件都需要设置一些属性，那么还是统一管理一下的好，于是设置了一个js文件来统一管理。 分为两个部分：基础属性和扩展属性。 这个是每个控件都需要的属性。 这个是针对各类控件设计的，比如多行文本框需要设置…

把表单需要的属性，统统放入json里面，然后用require（方便） 或者aioxs（可以热更新）加载进来，这样就可以实现动态渲染了。 比如要实现公司信息的添加、修改，那么只需要加载公司信息需要的json即可。 想要实现员工信息的添加、修改，那么只需要加载员工信息需要的json…

就是一个单独的CheckBox，这个一般用在用户注册的时候，选择同意条款的地方。 一个方框，打个勾勾就可以用软件，否则不让你用。 特点就是返回true和false。 共用函数都已经分离出去了，所以这里设置一下模板就好。 可能是UI库觉得框框打对号不好看吧，于是做了这种开关的方式…

就是一个单独的CheckBox，这个一般用在用户注册的时候，选择同意条款的地方。 一个方框，打个勾勾就可以用软件，否则不让你用。 特点就是返回true和false。 共用函数都已经分离出去了，所以这里设置一下模板就好。 可能是UI库觉得框框打对号不好看吧，于是做了这种开关的方式…

UI库的日期组件嘛，还是很强大的，稍微封装一下就好，主要还是为了可以统一接口。 我们可以设置几个字典来区分一下。 然后在做个管理类。 主要就是依据类型做一下具体的处理。 UI库的日期组件返回的是标准的Date()，这个好像没啥，只是不管是年月类型，还是年周类型，都是返回date…

把表单需要的属性，统统放入json里面，然后用require（方便） 或者aioxs（可以热更新）加载进来，这样就可以实现动态渲染了。 比如要实现公司信息的添加、修改，那么只需要加载公司信息需要的json即可。 想要实现员工信息的添加、修改，那么只需要加载员工信息需要的json…

官网有一个url组件的例子，但是比较简陋，基本不太好用，那么我们来完善一下。 官网还是很灵活的嘛，把三个部分都给分开演示了。那我们就把他们合并在一起把。 接收父组件的v-model的属性值，并且提交数据的代码抽象出来放在独立的js文件里面，这样各种组件就都可以拿来用了。 这样写…

是的，在开源世界里面就是这么简单，我们完全可以在开源的UI库的基础上实现自己的想法。 便于切换UI库。 可以应对版本升级。 可以循环绑定控件。 折腾后自己用着舒服。 一般UI库都会提供一些列的控件，比如form分类下面的控件，就可以有十多个，那么要封装的话，首先就要确定接口，否…

一般UI库都会提供一个form控件，非常方便好用，自己其中的item还是需要一行一行的写，比较麻烦。那么能不能循环出来呢？ 好长，有点眼晕。这个表单只有七个成员，如果再多点代码会更长。 想要for循环，直接用这样的组件应该是不可能的，组件名称不一样，组件的参数也都不一样（v-m…

先整理一下 input 的 type 都提供了哪些类型。 原：HTML5之前的类型。 新：HTML5提供的新的类型。 具体使用方式下面说。 准备工作做好了，我们开始做组件。 这个比较简单，就是把 input 具有的属性都给绑定上。 这里要感谢vue的数据绑定功能，没有设置的属性…

在工程化项目里面，默认会设置views和components这两个文件夹，而两个文件夹里面放的又都是.vue文件，既然是同类型的文件，为啥要设置两个文件夹呢？因为用途有点区别。 按照使用方式，.vue文件可以分为页面、组件和控件三类。 一般存放在views目录里面，一开始我还以…

我只是想学一下vue，官网上说vue是“渐进式的”，啥意思呢？一直是晕晕的。那么只好用笨办法了——官网的代码一行一行敲出来看看效果呗。 简单的都学的差不多了，然后发现大家都在用“工程化”的方式做开发。 webpack、node、npm、cnpm、yarn、脚手架、开发环境、测试…

vue的全家桶和UI库，采用传统的方式加载（CND、script）。 自己写的js代码，采用ES6的 import 方式加载。 目录结构采用vuecli建立的项目的目录结构。 入口页面用vite项目的 index.html。 不用babel做转义（因为还不会用）。 不用webp…

这是开发中、大型项目的必备技能，网上资料也很多，这里只是一个简单的综合性的介绍。包括vue的全家桶、建立项目的几种方式、UI库的简单使用等。 可以和上一篇的cnd方式做项目做一下对比。 这个就要归功于node了。建立项目的时候，会自动创建一个node的服务，这样我们就可以边写代…

感觉vue3的新特性很舒服，这样才是写软件的感觉嘛。打算用Vue实现自己的一些想法。 Vue3还有几个必备库，比如Vue-Router（负责路由导航）、Vuex（状态管理、组件间通信），还有第三方UI库，比如element Plus、Antdv、Vant 等。 这里会介绍他们的…