前言
随着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之前。
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可以使用vue2.7。
你只需要在终端执行 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结合其他框架和依赖的介绍,下篇见。