✨✨博主简介:一个会bbox的?‍?

✨✨个人主页:沫洺的主页

 ??系列专栏: ? JavaWeb专栏? JavaSE专栏 ? Java基础专栏?vue3专栏

??如果文章对你有所帮助请留下三连✨✨

?Vite介绍

• ?Vite是一种新型的前端构建工具，它能显著改善前端开发体验。
• ?Vite 是一个面向现代浏览器的更轻, 更快的 web 应用开发工具
• ?它基于 ECMAScript 标准原生模块系统 (ES Modules) 实现
• ?它的出现是为了解决 webpack 在开发阶段使用 webpack-dev-server 冷启动时间过长, 另外, webpack-hmr 热更新反应速度慢的问题
• ?使用 Vite 创建的项目就是一个普通的 vue3 的应用, 没有太多特殊的地方, 相比基于 vue-cli 创建的项目, 也少了很多的配置文件和依赖,
• ?Vite 项目依赖
  • ?Vite (命令行工具)
  • ?@vue/compiler-sfc (用来编译项目中的 .vue文件, vue2 中使用的是 vue-template-compiler)
• ?这里需要注意的是, Vite 目前只支持 vue3.0的版本, 创建项目的时候通过指定使用不同的模板也可以支持其他的框架

Vite官方中文文档:Vite官方中文文档

?Vite项目创建

步骤:

1.?查看npm版本(非必要)---npm --version

2.?npm更新版本(非必要)---npm install -g npm

3.?创建项目---npm init vite@latest vue3demo -- --template vue-ts

4.?vscode打开项目

5.?运行命令---npm install---npm run dev

?接下来具体操作一下

?查看npm版本,最新版本就不用更新了

 ?创建项目

 ?vscode打开项目

?新建终端

? 输入npm install

? 结构说明

? 运行npm run dev(CTRL+C选y结束运行)

?Vite项目入门 

 ?组合式API：setup()

<template>
  <p>hello vite</p>
  <hr>
  {{count}}
  <hr>
  <button @click="incrment">+1</button>
  <hr>
  <button @click="incrmentPlus(5)">+5</button>
</template>

<script  lang="ts">
import { ref } from 'vue'
export default {
  setup() {//setup() 钩子是在组件中使用组合式 API 的入口
    const count = ref(99);
    const incrment = () => {
      count.value += 1
    }
    const incrmentPlus = (num: number) => {
      count.value += num
    }
    //返回值会暴露给模板和其他的选项式 API 钩子
    return { count, incrment, incrmentPlus }
  }
}
</script>

 ? 代码优化

<template>
  <p>hello vite</p>
  <hr>
  {{count}}
  <hr>
  <button @click="incrment">+1</button>
  <hr>
  <button @click="incrmentPlus(5)">+5</button>
</template>

<script setup lang="ts">
    import { ref } from 'vue'
    const count = ref(99);
    const incrment = () => {
      count.value += 1
    }
    const incrmentPlus = (num: number) => {
      count.value += num
    }
</script>

 ?使用优化后的代码来编写会更加方便

<template>
  <p>hello vite</p>
  <hr>
  {{count}}
  <hr>
  <button @click="incrment">+1</button>
  <hr>
  <button @click="incrmentPlus(5)">+5</button>
  <hr>
  <input v-model="email"/>
  <input v-model="password">
  <button @click="register">注册</button>
</template>

<script setup lang="ts">
import { ref } from 'vue'
    const count = ref(99);
    const incrment = () => {
      count.value += 1
    }
    const incrmentPlus = (num: number) => {
      count.value += num
    }
    const email = ref('123@123');
    const password = ref('123');
    const register = ()=>{
      console.log(email.value,password.value)
    }
</script>

? 项目打包

 ?打包npm run build