背景承接前两篇：vue3.0尝鲜-从ToDoList开始（一）vue3.0尝鲜-理解变化（二）第三篇新鲜出炉，主要是说官网推荐vite和之前用法的区别，用typescript实战一个类element-ui的Dialog组件，使用更高级的Vue3.0API~_~ViteVite是一个Web开发和构建工具，它正在开发期间通过原生ES模块导入为您的代码提供服务，并将其与Rollup捆绑在一起用于生产。快如闪电的冷服务器启动快速热模型替换（HMR）真正的按需编译其实是先启动服务（koa），如果需要某个文件再编译。这导致Vite启动服务的速度比Webpack快得多，即“按需编译”。需要注意的是：TypeScript有内置支持，可以直接使用less/sass/stylus/postcss也有内置支持（需要单独安装对应的编译器）git地址使用vite初始化项目npminitvite-appcdnpminstallnpmrundev安装配置installsass,eslint,prettier(注意版本号)//.eslintrc.jsmodule.exports={parser:'vue-eslint-parser',parserOptions:{parser:'@typescript-eslint/parser',//指定ESLint解析器ecmaVersion:2020,//允许解析现代ECMAScript特性sourceType:'module',//允许用于导入ecmaFeatures:{tsx:true,//允许解析tsx//jsx:true,//允许解析JSX},},plugins:['@typescript-eslint'],extends:['plugin:@typescript-eslint/recommended','plugin:vue/vue3-recommended','prettier/@typescript-eslint',//使用eslint-config-prettier从@typescript-eslint/禁用ESLint规则eslint-plugin会与prettier'plugin:prettier/recommended'冲突，//Enableseslint-plugin-prettier和eslint-config-prettier。这会将更漂亮的错误显示为ESLint错误。确保这始终是扩展数组中的最后一个配置。],rules:{//js/ts'eol-last':'error','no-trailing-spaces':'error','comma-style':['error','last'],'逗号-dangle':['error','always-multiline'],引号:['error','single',{avoidEscape:true,allowTemplateLiterals:true}],camelcase:['error',{properties:'never'}],semi:['error','never'],indent:['error',2,{SwitchCase:1}],'object-curly-spacing':['error','always'],'arrow-parens':['error','as-needed'],'@typescript-eslint/explicit-module-boundary-types':'off','@typescript-eslint/no-explicit-any':'off','@typescript-eslint/member-delimiter-style':['error',{multiline:{delimiter:'none',requireLast:false,},singleline:{delimiter:'semi',requireLast:true,},},]],//vue'vue/no-v-html':'off','vue/singleline-html-element-content-newline':'off','vue/html-self-closing':['error',{html:{void:'never',normal:'never',component:'always',},},],'vue/max-attributes-per-line':['error',{singleline:3,multiline:1,},],'vue/require-default-prop':'off','vue/html-closing-bracket-spacing':'error',},};配置typescript//vue-shim.d.tsdeclaremodule'*.vue'{import{Component,ComponentPublicInstance}from'vue'const_default:Component&{new():ComponentPublicInstance}exportdefault_default}//source.d.tsimportVuefrom'vue'declaremodule'*.vue'{exportdefaultVue}declaremodule'*.json'declaremodule'*.png'declaremodule'*.jpg'likeelement-ui对话框组件css可以直接使用elemnt，主题自己下载，引入dialog组件需要2个组件（全局maskcomponent,dialogcomponent)//dialog.ts//对话框提取逻辑//全局引用importDialogfrom'./components/dialog/index'constapp=createApp(App)app.component(Dialog.name,Dialog)//遮罩层组件//用法v-model.modelValue(原：visible.sync="dialogVisible"上一篇介绍)这是一条消息~~~
取消确定
至此，在使用vue3.0+typescript开发对话框组件后，我们对vue3.0的开发有了更进一步的了解。在这个过程中，我们需要注意安装的插件的版本。如果报错，估计是版本安装不对。下篇文章会介绍路由器~希望大家喜欢~代码github地址
