1. 犀牛前端部落首页
  2. vue

vite快速入门教程

vite快速入门教程

Vite是什么

Vite是一个开发环境工具,旨在提高我们的开发速度。

最近俺看了一下尤雨溪大大在B站上的直播,直播中他也谈到了这款工具,最近花了很多精力在做这件事情。

在尤玉溪推特上也可以看到相关的推文:

As I was going to bed, I had an idea about a no-bundler dev setup (using native browser ES imports), but with support for Vue SFCs **with hot reload**. Now it’s almost 6AM and I have PoC working. The hot reload is so fast it’s near instant.

尤大大Twitter

本质上是利用了浏览器对于script标签type=”module”会发送一个请求。

Vite允许您使用单文件组件开发Vue应用程序,而不需要任何捆绑步骤。导入是浏览器作为本地ES模块导入请求的。

开发环境服务器拦截对.vue文件的请求,并动态地编译它们。而且速度很快。

实践

我们创建以下文件:

Comp.vue

<template>
  <button @click="count++">{{ count }}</button> 
</template>

<script>
export default {
  data: () => ({ count: 0 })
}
</script>

<style scoped>
button{
  font-size: 2rem;
}
</style>

index.html

<div id="app"></div>
<script type="module">
  import { createApp } from 'vue'
  import Comp from './Comp.vue'

  createApp(Comp).mount('#app')
</script>

然后在终端输入:

npx vite

浏览器打开http://localhost:3000,修改vue文件后将会热更新。

生产环境打包

现在,我们构建用于生产环境的Application。

创建package.json

{
  "scripts": {
    "build": "vite build"
  }
}

运行

npm i -D vite
npm run build

查看dist文件夹中的代码。

两种常见的问题:

问题一:Error: Cannot find module ‘tslib’

npm i -D tslib

问题二: Error: ENOENT: no such file or director

手动创建一个空的dist文件夹

总结

起步很容易,开发过程也很快,因为我可以立即看到我的变化。它就像一个动态编译设置。所以这看起来很有希望,也许在未来某一天,这将是我们开发所有Vue项目的方式。

原创文章,作者:犀牛前端部落,如若转载,请注明出处:https://www.pipipi.net/3439.html

发表评论

登录后才能评论

评论列表(4条)