尤雨溪在 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

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

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

Comp.vue

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

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

<style scoped>
button { color: red }
</style>

main.js

import { createApp } from 'vue'
import Comp from './Comp.vue'

createApp(Comp).mount('#app')

三丶啟動

• cd vue-vite 進入目錄
• vite 啟動項目

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

 

 

 

ctrl+鼠標左鍵點擊進去看到這樣的頁面就代表你啟動成功了

 

 

 

然后你可以嘗試修改 Comp.vue 看看效果是不是那樣神奇，不用預編譯，且支持熱更新

 vite地址 點這里

點擊跳轉原文