浅尝前端新玩具Vite ⚡(实战篇)

·  阅读 5896

前言

随着vue发展到今天已然是三大主流框架之一,在国内更是备受追捧,成为了找工作的必备技能,vue3发布已经有一段时间,其中令我最为感兴趣的是vite这个新工具,所以迫不及待创建项目尝试了一下。

Vite的定义

面向现代浏览器的一个更轻、更快的Web应用开发工具,基于ECMAScript标准原生模块系统(ES Modules)实现。

Vite的特点

  • 闪电般快速的冷服务器启动

  • 即时热模块更换(HMR)

  • 真正的按需编译

实际上,刚接触这个这个框架给人最直观的感受就是轻巧、利落,冷启动速度可以说是秒开,开发体验极度舒适,真应了尤大发表的感言让人再也不想用webpack。

为什么Vite启动速度快?

vite利用现代浏览器原生支持ESM特性,省略了对模块的打包,只有具体去请求某个文件时才会按需编译,vite会根据import导入替换路径在前面加上@modules,然后去node_modules寻找相关依赖,再分别对template、script、style进行处理;而webpack会提前把所有模块进行编译,所以随着项目越来越大,启动速度也就越慢。下面进入图解环节:

创建项目

npm init vite-app demo
复制代码

在命令窗口里输入这句命令即可创建一个vite的项目,而且还非常贴心的提示了后续操作,所以我这里就不多说了,按照命令窗口的提示安装依赖就好。

目录结构还是和以前一样,业务都写在src里

然后执行npm run dev  启动项目

项目启动后你会看到一个这样的页面,和以往的hello vue不同,这里简单的实现了一个计数器功能

这里还是以vue2的方式实现的小功能,实际上这里可以用vue3的Composition API入口 setup实现,需要注意的是在setup里是没有实例对象this的,声明的变量必须在函数底部统一返回才能使用,并且他的执行是在旧生命函数里面的beforeCreate和created之间。

Vite与TypeScript

前端应用的复杂度不断飙升,这带来的问题就是维护性以及扩展性会变差,使用ts编写代码会大大降低调试bug的时间,安装ts依赖后,在vue3里你只需要在script标签上加一个lang='ts'就可以引入ts愉快的编码了。

在vite项目里使用ts是再合适不过了,vite目前就只适用于vue3的版本(这里不考虑其余框架),而vue3就是用ts写的,所以对ts开发者非常友好,如果没有用过ts也没关系,vue3只是对ts使用者更友好,而不是只能用ts(当然这里还是推荐大家用ts)。

Vite打包

vite打包内部采用的是Rollup完成的应用打包,因为vite高度依赖ES Modules特性所以只支持现代浏览器,抛弃IE市场,如果你需要兼容IE需要另做处理,详情可以参考这里。

你只需要在终端执行 npm run build 打包过程轻松又愉快,先不要高兴的太早,这时候如果你打开dist文件下的打包文件会发现页面显示不出来,一拍脑门想起来在vue.config.js里面配置一下publicPath: './',不过当你做完这一切之后发现并没有解决问题,why?在这里先不要慌,只需要继续向下看。

解决办法:

这是因为vue打包后的路径默认是根路径,而在vite里面的配置文件是vite.config.js,所以同理,你只需要在配置里写上base: './'即可轻松解决。

配置路由和状态管理

路由配置

// router/index
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
const routes: Array<RouteRecordRaw> = 
[  
 {    
    path: '/',
    name: 'Home',
    component: import('/@views/Home')
 }, 
 {    
    path: '/user',
    name: 'User',
    component: () => import('/@views/User')
 }
]
const router = createRouter({  
    history: createWebHistory(process.env.BASE_URL), 
    routes
})
export default router
复制代码

vuex配置

// store/index
import { createStore } from 'vuex'
export default createStore({
    state: {},  
    mutations: {},
    actions: {},
    modules: {}
})
复制代码

更轻量的依赖注入工具 provide、inject 函数可以替代vuex,两者可根据个人习惯二选一。

import { provide, inject } from 'vue'


const Ancestor = {
  setup() {
    provide("name", "我是父组件向子组件传递的值"); 
  }
}

const Descendent = {
  setup() {
    const name = inject("name")
    return {
      name
    }
  }
}
复制代码

结语

经过介绍大家应该对vite有一个初步的理解了,值得一说的是vite开发体验真的舒适,嗯?我是不是说过这句话了😅,当然,跟webpack强大的生态相比,vite还是略显弱小,所以短时间内想应用在实际项目里不现实。

好了,到这里对于vite的尝试就结束了,后续还会更新关于vue3结合其他框架和依赖的介绍,下篇见。

分类:
代码人生
标签: