尤雨溪在 vue3.0 beta 上推荐的 no webpack 小工具 vite

前言

在4月21日晚，Vue作者尤雨溪在哔哩哔哩直播分享了Vue.js 3.0 Beta最新进展。里面尤大大所提到他最近在做的这个小工具 vite ,一个实验性的no build的vue开发服务器。(这个小工具可以支持热更新,且不用预编译)

既然感兴趣那就着手试试，上手体验体验

一丶安装

命令行复制以下

mkdir vue-vite 新建文件夹
npm init - y 初始化项目
npm i vite - g 全局安装vite
npm i vue@next 安装vue3.0 beta版

二丶新建文件

在项目目录下新建一下文件

index.html

1 <div id="app"></div>
2 <script type="module">
3 import { createApp } from 'vue'
4 import Comp from './Comp.vue'
5 
6 createApp(Comp).mount('#app')
7 </script>

Comp.vue

 1 <template>
 2   <button @click="count++">{{ count }}</button>
 3 </template>
 4 
 5 <script>
 6 export default {
 7   data: () => ({ count: 0 })
 8 }
 9 </script>
10 
11 <style scoped>
12 button { color: red }
13 </style>

main.js

1 import { createApp } from 'vue'
2 import Comp from './Comp.vue'
3 
4 createApp(Comp).mount('#app')

三丶启动

cd vue-vite 进入目录
vite 启动项目

然后你就可以看到一下命令行启动提示了

ctrl+鼠标左键点击进去看到这样的页面就代表你启动成功了

然后你可以尝试修改 Comp.vue 看看效果是不是那样神奇，不用预编译，且支持热更新

vite地址点这里

点击跳转原文