Vite
WebYanXin
一起探讨最前沿的前端技术,希望做出一款自动补全修复前端Bug的工具出来。
展开
-
前端系列三十二:TS字面量类型跟Any类型
字面量类型: 使用模式: ' 字面量类型配合联合类型一起使用 '使用场景: 用来' 表示一组明确的可选值列表 '写法: function changeDirection( direction: 'up' | 'down' | ' left ' | ' right ') { consloe.log( direction ) }解释: 参数direction 的值只能是 up/down/left/right 中的任意一个优势: 相比于string 类型, 使...原创 2021-12-31 11:30:41 · 835 阅读 · 0 评论 -
前端系列三十一:TS枚举类型跟元组
枚举类型:枚举的功能类似于字面量类型+联合类型组合的功能,也可以 ' 表示一组明确的可选值 '枚举:' 定义一组命名常量 ' , 它描述一个值, 该值可以是这些命名常量的一个定义枚举写法:enum Direction { Up, Down,Left,Right } function changeDirection( direction: Direction ) { console.log( direction ) }解释:1.使用'enum' 关键字定义枚举...原创 2021-12-31 11:26:35 · 992 阅读 · 0 评论 -
前端系列三十:TS接口跟类型推断
接口:当一个对象类型被多次使用时,一般都会使用'接口 (interface)' ;来描述对象的类型, 达到'复用'的目的解释:1.使用' interface ' 关键字来声明接口。 2.接口名称 (比如, 此处的 IPerson),可以是任意合法的变量名称3.声明接口后,直接 ' 使用接口名称作为变量的类型 '。4.因为每一行只有一个属性类型, 因此,属性类型后没有 ; (分号) 写法: interface Iperson {...原创 2021-12-31 11:22:48 · 2289 阅读 · 0 评论 -
前端系列十九:Vue项目中引入外部JS报错原因
第一步:在Vue中引入某个组件时,在Vue单页面找不到组件注册时,这个时候该考虑组件是否在Vue里的html页面里是否是用 <script></script>标签引入的第三方JS文件示例: <script src=http://xingcuan.com/he/we-sitemap/master/sitemap.0.1.js></script>第二步:引入功能正常后,可能浏览器控制台会报类似于:sitemap.0.1.js:1 Un..原创 2021-12-30 10:07:38 · 8141 阅读 · 1 评论 -
前端系列十八:Vue3加TS封装axios改动对比
旧版使用Vue3封装axios全局方法:通过在src的api文件下定义的axios请求逻辑文件暴露出去,在plugins文件api.ts下引入axios文件,挂载定义全局的方法app.config.globalProperties.$api在main.ts里通过引入api文件进行全局注册新版使用Vue3封装axios全局方法:在src下api文件夹里定义请求数据逻辑,再把文件暴露出去在plugins文件引入axios文件,api.ts下定义全局方法app.provide('$api')在原创 2021-12-30 10:01:47 · 169 阅读 · 0 评论 -
前端系列十八:Vue3加TS封装改动总结
页面 axios 的注册机制:之前在Vue3中封装的版本:通过在src的api文件下定义的axios请求逻辑文件暴露出去,在plugins文件api.ts下引入axios文件,挂载定义全局的方法app.config.globalProperties.$api在main.ts里通过引入api文件进行全局注册最新在Vue3中封装的版本:在src下api文件夹里定义请求数据逻辑,再把文件暴露出去在plugins文件引入axios文件,api.ts下定义全局方法app.provide('$.原创 2021-12-30 09:56:01 · 395 阅读 · 0 评论 -
前端系列十七:解决Vue中每次使用less需要引入文件问题
完成自动注入公用变量和混入问题解决方案:使用vuecvli的style-resoures-loader插件来完成自动注入到每个less文件或者vue组件中style标签中在项目下执行一条命令: vue add style-resources-loader 添加一个vuecli插件安装完成后在vue.config.js中自动添加配置,如下: module.exports= { pluginOptions: { ...原创 2021-12-30 09:49:06 · 267 阅读 · 0 评论 -
前端系列十六:Vue3中Vuex持久化
第一步:首先,我们需要安装一个vuex的插件 vuex-persistedstate来支持vuex的状态持久化 npm i vuex-persistedstate第二步:在src/store文件夹下新建modeuls文件,在modules下新建user.js和cart.js src/store/modules/users.js写法: / 用户模块 export default { namespace...原创 2021-12-30 09:47:17 · 1491 阅读 · 0 评论 -
前端系列十五:Vue3组合API跟封装axios
组合API-依赖注入:使用provide函数和inject函数完成后代组件通讯使用场景: 有一个父组件,里头有子组件,有孙组件,有很多后代组件,共享父组件数据 需要引入 provide父组件写法: import { provide } from 'vue' setup( ) { const money = 100 //将数据提供给后代组件 provide provide( 'money' , money ) return...原创 2021-12-30 09:44:27 · 767 阅读 · 0 评论 -
前端系列八:Vue3项目中定义全局方法遇到的问题
步骤一:在src文件夹下,自己定义一个文件夹,再建一个公共文件例如:api.ts,在里面定义export default{install: (app: any, options: any) => {下面这段代码是在Vue3里定义公共方法的$api公共方法名app.config.globalProperties.$api ="这后面就是要写定义的公共方法函数"}}步骤二:在main.ts文件里 引入定义的公共方法文件 例如引入前面的api.ts,引入后,在main...原创 2021-12-28 10:42:43 · 1138 阅读 · 0 评论 -
前端系列七:在Vue3+TS+Vite插件的初始化项目模块报错的问题
细节问题:当我们使用Vite创建Vue3项目时,项目创建完成时,在script里有 setup lang="ts"因为export default 是JS的导出模式,这个时候没有把script里的setup lang="ts" 去掉就会报模块错误问题原创 2021-12-28 10:37:49 · 1026 阅读 · 1 评论 -
前端系列六:Vue3项目中遇到的原型方法问题
Vue3项目中引入插件报错问题:Cannot read properties of undefined (reading '$api')无法读取未定义的属性(读取“$api”)思路:先去查一下Vue3在原型上写法是否有改变;Vue3在原型上定型方法已经跟Vue2不同;解决方案:Vue2中定义原型方法:Vue.prototype.$api = function(){consloe.log("Vue2定义方法")}Vue3中定义原型方法:app.config.globalPr原创 2021-12-28 10:34:55 · 723 阅读 · 0 评论 -
前端系列五:Vue3中利用js跳转页面
goPage() { this.Z$router.push({path:"/",query:{search:'超人'}})}原创 2021-12-28 10:28:32 · 505 阅读 · 0 评论 -
前端系列四:Typescript中遇到多个any影响性能解决方案
第一种方案:可以在项目创建初期去tsconfig.json里去配置:"noImplicitThis": true这样可以当表达式值为any类型的时候,生成一个错误第二种方案:let xj: unknow = '小新'let b: string = xj as stringunknown(不知道是什么类型)加as(类型断言告诉是什么类型)搭配使用的话可以解决any的问题但是前提是要能确定或者知道我这个值是用什么类型的,也不知道会不会有性能问题,还得再研究一下第三种方案:let .原创 2021-12-28 10:26:45 · 457 阅读 · 0 评论 -
前端系列三:Vite和Webpack区别及Vite特点总结
Vite启动同一项目时速度要优于Webpack如果使用Webpack保存内容时它会再去编译,再告诉编译时间,会有编译时间的问题,随着项目越来越大编译时间缺点会越来越明显Vite改变内容时会告诉你热更新了速度超越秒级同一代码量级,Webpack可能需要几秒,而Vite可能只需要几十毫秒更新速度超过秒级开发体验优于Webpack,构建过程可以称为没有构建过程Vite在开发模式下不需要打包可以直接运行,使用的是ES6的模块化加载规则Vue-cli开发模式下必须对项目打包才可以运行V原创 2021-12-24 15:58:32 · 1827 阅读 · 1 评论