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

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

    点击跳转原文

  • 相关阅读:
    PHP学习笔记十二【数组排序】
    PHP学习笔记十一【数组】
    PHP学习笔记十【数组】
    PHP学习笔记九【数组二】
    PHP学习笔记八【数组】
    Codeforces 612E
    Codeforces 616E
    codeforce #339(div2)C Peter and Snow Blower
    poj 1113 Mall
    poj 2187 Beauty Contest
  • 原文地址:https://www.cnblogs.com/Object-L/p/12753936.html
Copyright © 2011-2022 走看看