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

點擊跳轉原文