浅尝前端新玩具Vite ⚡（实战篇）

2020年11月05日 00:12 · 阅读 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结合其他框架和依赖的介绍，下篇见。