vue3+ts 项目初始化配置 -- eslint+prettier 格式化校验一、配置 @ 代替 src 目录，引入文件时可以省略 .vue 、.js 等等二、项目中引入scss三、引入公共样式四、引入组件报红色波浪线五、 有些语法不认识需要在vscode中安装 Volar 插件六-1、自动导包（vue、vue-router、element-plus、element-plus样式）六-2、element-plus 中的 dropDown 里面鼠标划过出现黑色边框七、配置方向代理和端口号八、父子组件通讯九、pinia的使用（另外一种是一个方式请看pinia的使用）十、vue-router的使用十一、vue3结合keep-alive和transition的使用十二、axios二次封装十三、eslint + prettier十四、husky十五、浏览器兼容问题十六、自定义指令十七、三方包全局引入（如 Echarts）十八、获取 dom 元素十九、自定义hooks二十、vue 国际化二十一、修改 elementPlus 主题（定制）二十二、切换深色、浅色、主题色一、配置 @ 代替 src 目录，引入文件时可以省略 .vue 、.js 等等步骤： 一、 yarn add @types/node 二、vite.config.ts 中 和 plugins 平齐 配置resolve:{// 引入文件时可以省略 .vue 、.js 等等extensions:['.vue','.js','.jsx','.ts','.tsx'],alias:{'@':path.resolve(__dirname,'src'),},}注意 path 需要引入importpathfrom"path"注意：配置完路径别名之后，用路径别名引入 ts、vue文件会报错 在 compilerOptions 对象里面配置如下：// 修改引入ts文件报错"baseUrl":"./","paths":{"@/*":["src/*"]}二、项目中引入scss只需要在项目中下载sass scss即可： yarn add sass scss三、引入公共样式@charset"utf-8";/*全局样式*/body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,figure,input,textarea,select,div{margin:0;padding:0;box-sizing:border-box;}html{font-size:10px;height:100%;overflow:hidden}body{word-wrap:break-word;height:100%;overflow:hidden;font-size:14px;color:#333}fieldset,a img,.bor0{border:0;}li{list-style:none;}/*a,u,s,del{color:#666;text-decoration:none;} !*文本没有修饰*!*//*i,em,b{font-style:normal;font-weight:100;}!*文本不倾斜不加粗*!*/a img{border:0;}img{vertical-align:middle;}table{border-collapse:collapse;}input,textarea{outline:none;}/*去除谷歌点击蓝色虚框*/textarea{resize:none;}/*禁止多行文本输入框的拖动*/#app{height:100%;overflow:hidden;}.ind2{text-indent:2em;}.l{float:left;}.r{float:right;}.rel{position:relative;}.abs{position:absolute;}.over{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}/*溢出出现省略号*/.vcenter:after{content:"";display:inline-block;vertical-align:middle;height:100%;width:0;}.clear{zoom:1;}.clear:after{content:"";display:block;clear:both;}/*清除浮动*/.cu{cursor:pointer;}/*鼠标指针为手型*/.el-textarea__inner{font-family:"Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;}::-webkit-scrollbar{width:6px;height:6px;background:transparent;}::-webkit-scrollbar-thumb{background:transparent;border-radius:4px;}:hover::-webkit-scrollbar-thumb{background:hsla(0,0%,53%,0.4);}:hover::-webkit-scrollbar-track{background:hsla(0,0%,53%,0.1);}四、引入组件报红色波浪线在vite-env.d.ts 声明文件中配置如下： declare module"*.vue"{import{DefineComponent}from"vue"constcomponent:DefineComponent{},{},anyexportdefaultcomponent}五、 有些语法不认识需要在vscode中安装 Volar 插件六-1、自动导包（vue、vue-router、element-plus、element-plus样式）步骤： 一、yarn add element-plus unplugin-auto-importunplugin-vue-components vite-plugin-style-importconsola 二、在vite.config.ts 中（ 在plugins数组内，和vue()平级 ）：importAutoImportfrom'unplugin-auto-import/vite'importComponentsfrom'unplugin-vue-components/vite'import{ElementPlusResolver}from'unplugin-vue-components/resolvers'// 自动导入element-plus的样式//createStyleImportPlugin({//resolves: [ElementPlusResolve()],//libs: [//{//libraryName: 'element-plus',//esModule: true,//resolveStyle: (name: string) = {//return `element-plus/theme-chalk/${name}.css`//}//}//]//}),Components({//自定义的模块dirs:['src/components'],extensions:['vue','ts'],resolvers:[ElementPlusResolver({importStyle:'sass'})]}),AutoImport({// 插件进行自动导入相关的依赖库//安装两行后你会发现在组件中不用再导入ref，reactive等imports:['vue','vue-router'],// 可选，用于自动导入组件类型dts:'src/components.d.ts'})注意：自动导包引入之后要是使用ts + eslint 的项目 在引入 ref、useRouter 等之后 报错，需要在tsconfig.json文件中 的include数组中加入"auto-imports.d.ts""include":["env.d.ts","src/**/*","src/**/*.vue","auto-imports.d.ts"// 新加的],修改element主题色css:{preprocessorOptions:{scss:{api:"modern-compiler",additionalData:`@use "@/static/styles/element.scss" as *;`,// static/styles/element.scss 写上自己修改的主体色}}},elementUI 中的 tree 组件点击高亮 需要设置 highlight-current 同时需要设置 node-key="id"， 点击按钮取消高亮 需要 设置 treeRef.value.setCurrentKey(null)六-2、element-plus 中的 dropDown 里面鼠标划过出现黑色边框:deep(.el-tooltip__trigger:focus-visible){outline:unset;}七、配置方向代理和端口号在vite.config.ts中，与 plugins 平齐：server:{port:8080,//自定义端口// 是否开启 httpshttps:false,open:true,proxy:{'/api':{// 后台地址target:'http://127.0.0.1:8300/',changeOrigin:true,rewrite:path=path.replace(/^\/api/,'')},'/api2':{// 后台地址target:'http://127.0.0.1:8956/',changeOrigin:true,rewrite:path=path.replace(/^\/api2/,'')}}}八、父子组件通讯父组件传值给子组件（方式一）： 父组件：Child:msg="msg"/Child子组件： defineProps{msg:string}()父组件传值给子组件（方式二--默认值）： 父组件：Child:msg="msg"/Child子组件（使用 withDefaults ，两个参数，第一个参数和上面的是一样的， 第二个参数是默认值）：withDefaults(defineProps{msg:string}(),{msg:"默认值"})// 父组件 往 子组件传值（在 js 中的 方式 ）defineProps({message:{type:String,default:"默认值"}})子传父： 父组件：Common @giveFatherStr="handleData"/CommonconsthandleData=(val:string)={console.log(val);}子组件：constemit=defineEmits(['giveFatherStr'])constgiveFatherData=()={emit("giveFatherStr","传给父组件的值")}子传父（方式二）： 父组件是一样的 子组件：constemit=defineEmits{(event:"giveFatherStr",flag:string):void}()button @click="emit('giveFatherStr', '传过去的值')"传值/buttondefineModel 的使用父组件Child v-model:inputVal="val"/letval=ref("初始值")// 子组件使用inputVal子组件input v-model="val"
vite+ts+vue3项目初始化 -- eslint+prettier代码格式化
vue3+ts 项目初始化配置 -- eslint+prettier 格式化校验一、配置 @ 代替 src 目录，引入文件时可以省略 .vue 、.js 等等二、项目中引入scss三、引入公共样式四、引入组件报红色波浪线五、 有些语法不认识需要在vscode中安装 Volar 插件六-1、自动导包（vue、vue-router、element-plus、element-plus样式）六-2、element-plus 中的 dropDown 里面鼠标划过出现黑色边框七、配置方向代理和端口号八、父子组件通讯九、pinia的使用（另外一种是一个方式请看pinia的使用）十、vue-router的使用十一、vue3结合keep-alive和transition的使用十二、axios二次封装十三、eslint + prettier十四、husky十五、浏览器兼容问题十六、自定义指令十七、三方包全局引入（如 Echarts）十八、获取 dom 元素十九、自定义hooks二十、vue 国际化二十一、修改 elementPlus 主题（定制）二十二、切换深色、浅色、主题色一、配置 @ 代替 src 目录，引入文件时可以省略 .vue 、.js 等等步骤： 一、 yarn add @types/node 二、vite.config.ts 中 和 plugins 平齐 配置resolve:{// 引入文件时可以省略 .vue 、.js 等等extensions:['.vue','.js','.jsx','.ts','.tsx'],alias:{'@':path.resolve(__dirname,'src'),},}注意 path 需要引入importpathfrom"path"注意：配置完路径别名之后，用路径别名引入 ts、vue文件会报错 在 compilerOptions 对象里面配置如下：// 修改引入ts文件报错"baseUrl":"./","paths":{"@/*":["src/*"]}二、项目中引入scss只需要在项目中下载sass scss即可： yarn add sass scss三、引入公共样式@charset"utf-8";/*全局样式*/body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,figure,input,textarea,select,div{margin:0;padding:0;box-sizing:border-box;}html{font-size:10px;height:100%;overflow:hidden}body{word-wrap:break-word;height:100%;overflow:hidden;font-size:14px;color:#333}fieldset,a img,.bor0{border:0;}li{list-style:none;}/*a,u,s,del{color:#666;text-decoration:none;} !*文本没有修饰*!*//*i,em,b{font-style:normal;font-weight:100;}!*文本不倾斜不加粗*!*/a img{border:0;}img{vertical-align:middle;}table{border-collapse:collapse;}input,textarea{outline:none;}/*去除谷歌点击蓝色虚框*/textarea{resize:none;}/*禁止多行文本输入框的拖动*/#app{height:100%;overflow:hidden;}.ind2{text-indent:2em;}.l{float:left;}.r{float:right;}.rel{position:relative;}.abs{position:absolute;}.over{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}/*溢出出现省略号*/.vcenter:after{content:"";display:inline-block;vertical-align:middle;height:100%;width:0;}.clear{zoom:1;}.clear:after{content:"";display:block;clear:both;}/*清除浮动*/.cu{cursor:pointer;}/*鼠标指针为手型*/.el-textarea__inner{font-family:"Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;}::-webkit-scrollbar{width:6px;height:6px;background:transparent;}::-webkit-scrollbar-thumb{background:transparent;border-radius:4px;}:hover::-webkit-scrollbar-thumb{background:hsla(0,0%,53%,0.4);}:hover::-webkit-scrollbar-track{background:hsla(0,0%,53%,0.1);}四、引入组件报红色波浪线在vite-env.d.ts 声明文件中配置如下： declare module"*.vue"{import{DefineComponent}from"vue"constcomponent:DefineComponent{},{},anyexportdefaultcomponent}五、 有些语法不认识需要在vscode中安装 Volar 插件六-1、自动导包（vue、vue-router、element-plus、element-plus样式）步骤： 一、yarn add element-plus unplugin-auto-importunplugin-vue-components vite-plugin-style-importconsola 二、在vite.config.ts 中（ 在plugins数组内，和vue()平级 ）：importAutoImportfrom'unplugin-auto-import/vite'importComponentsfrom'unplugin-vue-components/vite'import{ElementPlusResolver}from'unplugin-vue-components/resolvers'// 自动导入element-plus的样式//createStyleImportPlugin({//resolves: [ElementPlusResolve()],//libs: [//{//libraryName: 'element-plus',//esModule: true,//resolveStyle: (name: string) = {//return `element-plus/theme-chalk/${name}.css`//}//}//]//}),Components({//自定义的模块dirs:['src/components'],extensions:['vue','ts'],resolvers:[ElementPlusResolver({importStyle:'sass'})]}),AutoImport({// 插件进行自动导入相关的依赖库//安装两行后你会发现在组件中不用再导入ref，reactive等imports:['vue','vue-router'],// 可选，用于自动导入组件类型dts:'src/components.d.ts'})注意：自动导包引入之后要是使用ts + eslint 的项目 在引入 ref、useRouter 等之后 报错，需要在tsconfig.json文件中 的include数组中加入"auto-imports.d.ts""include":["env.d.ts","src/**/*","src/**/*.vue","auto-imports.d.ts"// 新加的],修改element主题色css:{preprocessorOptions:{scss:{api:"modern-compiler",additionalData:`@use "@/static/styles/element.scss" as *;`,// static/styles/element.scss 写上自己修改的主体色}}},elementUI 中的 tree 组件点击高亮 需要设置 highlight-current 同时需要设置 node-key="id"， 点击按钮取消高亮 需要 设置 treeRef.value.setCurrentKey(null)六-2、element-plus 中的 dropDown 里面鼠标划过出现黑色边框:deep(.el-tooltip__trigger:focus-visible){outline:unset;}七、配置方向代理和端口号在vite.config.ts中，与 plugins 平齐：server:{port:8080,//自定义端口// 是否开启 httpshttps:false,open:true,proxy:{'/api':{// 后台地址target:'http://127.0.0.1:8300/',changeOrigin:true,rewrite:path=path.replace(/^\/api/,'')},'/api2':{// 后台地址target:'http://127.0.0.1:8956/',changeOrigin:true,rewrite:path=path.replace(/^\/api2/,'')}}}八、父子组件通讯父组件传值给子组件（方式一）： 父组件：Child:msg="msg"/Child子组件： defineProps{msg:string}()父组件传值给子组件（方式二--默认值）： 父组件：Child:msg="msg"/Child子组件（使用 withDefaults ，两个参数，第一个参数和上面的是一样的， 第二个参数是默认值）：withDefaults(defineProps{msg:string}(),{msg:"默认值"})// 父组件 往 子组件传值（在 js 中的 方式 ）defineProps({message:{type:String,default:"默认值"}})子传父： 父组件：Common @giveFatherStr="handleData"/CommonconsthandleData=(val:string)={console.log(val);}子组件：constemit=defineEmits(['giveFatherStr'])constgiveFatherData=()={emit("giveFatherStr","传给父组件的值")}子传父（方式二）： 父组件是一样的 子组件：constemit=defineEmits{(event:"giveFatherStr",flag:string):void}()button @click="emit('giveFatherStr', '传过去的值')"传值/buttondefineModel 的使用父组件Child v-model:inputVal="val"/letval=ref("初始值")// 子组件使用inputVal子组件input v-model="val"
