v3-components-mao v0.1.4

v3-components-mao

day01

问题一 启动项目，npm run dev时，报出错 Error: Cannot find module ‘vue-loader-v16/package.json的错误。

解决方案 ： 通过升级node和npm重新安装之后，重新npm i ,然后再次启动项目便成功了。

问题二 window7系统升级node的方式

不能通过 npm install -g n 的方式，而是通过去官网下载node,安装覆盖原文件即可。

day02

问题一 解释 shims-vue.d.ts的作用、使用.vue文件开发组件与tsx开发组件之间的区别优缺点；

1. shims-vue.d.ts的作用 是定义了 .vue结尾的文件的返回类型为DefineComponent格式

2. .vue开发组件，需要上下滚动去查看数据和方法。tsx方式，更有利于更有利于抽离公共的代码。

问题二 完成app等首页组件，实现点击菜单跳转，并且实现【实现路由组件】章节中最后描述的效果；

完成

知识点三 provide() 和 inject() 总结：

1. 可以实现嵌套组件之间的数据传递。
2. 这两个函数只能在 setup() 函数中使用。
3. 父级组件中使用 provide() 函数向下传递数据,provide("data", data);
4. 子级组件中使用 inject() 获取上层传递过来的数据。 provide() 和 inject() 定义格式：
5. function provide<T>(key: InjectionKey<T> | string, value: T): void
6. function inject<T>(key: InjectionKey<T> | string): T | undefined

Part2

0-10min

做了点击标题跳转到的首页，this.$ref做的跳转。这种方式比较笨，调用方法时，参数没有类型提示。使用designComponent解决 10-11：47 讲解了一下文档的内容 12-30 引入主题部分，添加input组件 30-34 input增加clear和focus方法 34-45 designComponent方法 参数-类型的定义（从源码找到 ExtractPropTypes ，继承它，实现参数类型提示） 46-51 designComponent方法 加强版，将 内容 填充了。利用defineComponent改造。 51-52 测试封装的designComponent 使用input组件测试designComponent 53-61 测试designComponent。 ---54 给其添加use方法 ----ref的使用

61-63-65 调用方法时，类型不提示错误，在找.65min时又能提示错误了，说是编辑器的原因。 72 designComponent基本功能实现 72-75 designComponent 中添加 provide 和 inject（use中）方法。 80 用designComponent改造app-navigator和app-navigator-page 81发现报错提示又有了新的提示 83min 提交代码designComponent的ref和inject类型提示功能

0-85min 以上 实现了一个定义组件的函数：designComponent，通过这个函数，可以使得我们在获取组件的引用（ref）以及注入（inject）组件提供（provide）的数据时，自动获取正确的类型提示以及约束，无需额外编写组件类型声明。

91 写button组件简单封装 94 封装组件导出方法：installPlugins。 97 button组件简单样式实现 104 使用rollup打包组件库 108尝试使用在浏览器中使用组件（建立了一个test.index.html）(108-111这3分钟在找vue@next CDN包链接) 116 测试使用rollup打包输入umd文件，并在html浏览器环境中使用。 使用webpack打包： 122 安装webpack 依赖的loader 124 简单讲解一下webpack配置文件 133 测试使用webpack打包输入umd文件，并在html浏览器环境中使用。 其中128-130 在找postcss的bug autoprefixer，postcss版本为8 autoprefixer@8 postcss@8

135 配置package.json，并讲项目上传至npm上 （npm publish),记得(taobao)先切换回npm. 1. 进入package.json， 在控制台输入 npm version patch， 设置版本号。（133min） 2. 将package.json中 "private": false,添加 "main":"dist/index.js","typing":"src/index.ts","files": ["src","dist"],files:将哪些文件发布到npm上面。 3. 先切换到npm源，nrm use npm 4. 执行 npm publish 指令 138 创建新项目 来使用npm我们上面上传的组件库，测试一下。 1).创建项目test-v3-components-mao 2).删除多余文件，仅保留app.vue。然后提交git 3).npm下载 v3-components-mao 包。npm i v3-components-mao -D 4). 全部引入组件库 import V3ComponentsMao from "v3-components-mao"; import "v3-components-mao/dist/index.css";app.use(V3ComponentsMao); 5). 使用组件 6). 把之前组件库开发时的 eslint配置复制到新项目。

全部引入

152 全部引入组件库，并且正确使用组件库类型提示功能。

按需引入

156 --- 159 通过安装npm i babel-plugin-import -D 来优化按需引入的路径。 1).配置vue.config.js导入样式 2).配置babel.config.js，plugins配置import参数
3).173 按需引入的情况下，自定义主题 4).用户自定义的组件，也能够适配主题