尤雨溪在 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地址 點這裡

點擊跳轉原文