zoukankan      html  css  js  c++  java
  • 尤雨溪在 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地址 点这里

    点击跳转原文

  • 相关阅读:
    HUST 1372 marshmallow
    HUST 1371 Emergency relief
    CodeForces 629D Babaei and Birthday Cake
    CodeForces 629C Famil Door and Brackets
    ZOJ 3872 Beauty of Array
    ZOJ 3870 Team Formation
    HDU 5631 Rikka with Graph
    HDU 5630 Rikka with Chess
    CodeForces 626D Jerry's Protest
    【POJ 1964】 City Game
  • 原文地址:https://www.cnblogs.com/ZXH-null/p/13287705.html
Copyright © 2011-2022 走看看