码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2020-07-12 12:13:13      阅读:130      评论:0      收藏:0      [点我收藏+]

标签:热更新   temp   ctrl   exp   跳转   编译   img   type   ref   

前言


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

点击跳转原文

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

标签:热更新   temp   ctrl   exp   跳转   编译   img   type   ref   

原文地址:https://www.cnblogs.com/ZXH-null/p/13287705.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!