[前端] 通过Vite创建项目

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

📚📚系列专栏: 📖 JavaWeb专栏📖 JavaSE专栏 📖 Java基础专栏📖vue3专栏 

                           📖MyBatis专栏📖Spring专栏📖SpringMVC专栏📖SpringBoot专栏

                           📖Docker专栏📖Reids专栏📖MQ专栏📖SpringCloud专栏     

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

🌈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 vitep>
  <hr>
  {{count}}
  <hr>
  <button @click="incrment">+1button>
  <hr>
  <button @click="incrmentPlus(5)">+5button>
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 vitep>
  <hr>
  {{count}}
  <hr>
  <button @click="incrment">+1button>
  <hr>
  <button @click="incrmentPlus(5)">+5button>
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 vitep>
  <hr>
  {{count}}
  <hr>
  <button @click="incrment">+1button>
  <hr>
  <button @click="incrmentPlus(5)">+5button>
  <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