✨✨个人主页:沫洺的主页
📚📚系列专栏: 📖 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 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