朋友们都知道TienChin项目的前端使用的是Vue3。当我们浏览了Vue3官网，回过头来看TienChin项目的前端时，发现还是有很多不一样的地方。在这里，宋哥今天就来给大家分享一下Vue3中一些有趣的插件和配置。学完相信你会明白TienChin项目前端的很多写法。1.Vite首先给大家介绍一下Vite。虽然在Vue3中不是必须的，但是考虑到TienChin项目的前端用的就是这个，我说几句吧。Vite（法语是“quick”的意思，发音为/vit/，发音类似“veet”）是一款全新的前端构建工具，可以显着提升前端开发体验。它主要由两部分组成：开发服务器，它提供了基于原生ES模块的丰富内置功能，例如惊人的快速热模块更新（HMR）。一组构建指令，将你的代码与Rollup捆绑在一起，它预先配置为输出高度优化的静态资产以用于生产。Vite旨在提供开箱即用的配置，而其插件API和JavaScriptAPI带来了高度的可扩展性和完整的类型支持。如果你对它完全陌生，不妨回忆一下我们之前在vhr中给大家介绍过的Webpack。其实这个Vite就相当于Webpack。与Webpack的传统工具相比，Vite最大的特点就是速度快。Vite通过将应用程序中的模块一开始就分为两类：依赖项和源代码来改善开发服务器启动时间，因为依赖项变化很小，而源代码是变化频繁的东西。不知道小伙伴们看到这里有没有想到我们Java里面也有类似的东西，那就是SpringBoot热加载。SpringBoot的热加载使用了两个类加载器：一个是基类加载器，专门用来加载一些第三方类；另一个是重启类加载器，专门用来加载我们自己写的类。热加载时，只需要重启类加载器即可工作。那么对于我们Java工程师来说，大家都知道Vite是一个项目构建工具。我将使用Vite来演示下一个示例。2.自动导入常用方法在TienChin项目中，小伙伴们看到很多需要导入才能使用的方法，不用导入也可以使用。我创建了一个项目来向您展示它。我们使用Vite来构建一个项目。如果你的npm版本是6.x，执行以下命令创建一个Vue3项目：npmcreatevite@latestmy-vue-app--templatevue如果你的npm版本是7+，执行以下命令创建一个Vue3项目:npmcreatevite@latestmy-vue-app----templatevueVue项目创建成功后，没有router什么的，需要我们自己安装。这个常规操作我就不说了。2.1传统写法下面我举一个简单的例子。例如，MyVue01页面上有一个按钮。点击后可以跳转到MyVue02页面。那么我们的点击事件可以这样写：首先我们需要从vue-router中导入useRouter函数，然后调用这个函数获取路由器对象，然后调用路由器中的push方法完成页面跳转。在之前的Vue2中，我们通常是通过this.$router来获取router对象，然后使用router对象来实现页面导航操作。但是在Vue3中，没有这个，但是Vue3提供了一个getCurrentInstance方法来获取当前的Vue实例，所以页面会跳转，我们也可以这样写：这里的proxy和之前Vue2中的这个类似。宋哥这里以路由器为例给大家演示一下。如果是Vuex/Pinia，也有类似的写法，就不一一演示了。不管上面那种写法，都需要先导入一个函数，然后才能开始使用。但是，虽然我们在TienChin项目的前端代码中也有import，但是没有像上面两个例子这样的import。这是怎么回事？这是在自动导入工具的帮助下完成的。2.2自动导入前端有一个工具插件叫unplugin-auto-import，通过它可以自动导入一些方法。使用该方法的步骤如下：(1)安装插件：npmiunplugin-auto-import-D由于该插件只是辅助开发，安装时加上-D参数，会安装到devDependencies中.(2)配置插件：插件的配置在项目根目录下的vite.config.js文件中配置，内容如下：import{defineConfig}from'vite'importvuefrom'@vitejs/plugin-vue'importAutoImportfrom'unplugin-auto-import/vite'//https://vitejs.dev/config/exportdefaultdefineConfig({plugins:[vue(),AutoImport({//你可以自定义生成文件的位置，默认在根目录下，用ts放到src目录下//dts:'src/auto-imports.d.ts',imports:['vue','vue-router']})]})朋友们注意注释掉的代码，插件配置好，项目启动后，会在node_modules/unplugin-auto-import/auto-imports.d.ts生成一个文件默认，但是这个文件生成的位置可以通过配置dts属性来修改。imports指的是需要自动导入的方法在哪里。以我们上一篇文章中的两种情况为例，useRouter是vue-router中的一个方法，getCurrentInstance方法是vue中的，所以这里导入我选择了vue和vue-router，当然小伙伴们在开发中，如果需要的话，还可以导入Vuex/Pinia等，配置好插件后，当我们需要再次使用以上方法时，不需要导入，直接使用即可：useRouter也不需要导入。<脚本设置>constrouter=useRouter();函数go(){router.push("/my02");}之后，vue和vue-router中的所有方法都可以不用导入，其他组件中的方法还是和以前一样，必须导入才能使用。3.去除组件的后缀在Vue2中，我们在导入组件的时候，可能习惯于省略.vue后缀。毕竟在用WebStorm开发的时候，系统在自动导入的时候也会帮我们省略掉这个后缀。写法类似如下：importMyVue01from"../views/MyVue01";从“../views/MyVue02”导入MyVue02；但是现在在Vite中，如果你还这么写，就会报错，类似下面这样：现在你必须写后缀，但是有些人就是不习惯写后缀，那怎么办呢？我们可以在vite.config.js中添加如下配置，这样就不需要写.vue、.js等后缀了import{defineConfig}from'vite'importvuefrom'@vitejs/plugin-vue'importAutoImportfrom'unplugin-auto-import/vite'//https://vitejs.dev/config/exportdefaultdefineConfig({plugins:[vue(),AutoImport({//你可以自定义放置的位置文件生成，默认在根目录下，建议用ts放在src目录下//dts:'src/auto-imports.d.ts',imports:['vue','vue-router']})],resolve:{extensions:['.js','.ts','.jsx','.tsx','.json','.vue']}})嗯，现在大家明白天津项目的前端为什么不写.vue了。4.name属性问题在Vue2中，我们可以通过以下方式为Vue组件设置名称：在Vue3中，如果我们把setup写到script节点中，是不能定义名字的。如果我们还需要使用name属性，那么我们可以再定义一个script节点，专门用来配置name属性，如下：提示我们可以在debug页面看到自定义的组件名：但是这种写法有些麻烦。vite-plugin-vue-setup-extend插件可以简化Vue3中name属性的设置。安装插件后，我们可以直接在script节点中定义name属性的值。安装方法如下：npminstallvite-plugin-vue-setup-extend-D安装完成后，在vite.config.js中再次配置，如下：import{defineConfig}from'vite'importvuefrom'@vitejs/plugin-vue'importAutoImportfrom'unplugin-auto-import/vite'importVueSetupExtendfrom'vite-plugin-vue-setup-extend'//https://vitejs.dev/config/exportdefaultdefineConfig({plugins:[vue(),AutoImport({//确定生成自定义文件的位置，默认为根目录，建议使用ts放在src目录下//dts:'src/auto-imports.d.ts',imports:['vue','vue-router']}),VueSetupExtend()],resolve:{extensions:['.js','.ts','.jsx','.tsx','.json','.vue']}})VueSetupExtend是vite-plugin-vue-setup-extend插件配置。配置完成后，我们可以通过如下方式定义name属性：直接在脚本节点中添加一个name属性即可。
