前言

在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地址 点这里

点击跳转原文