Vue入门到关门之Vue3项目创建

2024-05-07 00:44

本文主要是介绍Vue入门到关门之Vue3项目创建,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

一、vue3介绍

1、为什么要学习vue3?

vue3的变化:

首先vue3完全兼容vue2,但是vue3不建议用vue2的写法;其次,vue3拥抱TypeScript,之前vue2使用的JavaScript,ts完全兼容js

最后之前学的vue2 是配置项api,而vue3是组合式api

optionsAPI(旧) => compositionAPI(新), 效果: 代码组织更方便了, 逻辑复用更方便了 非常利于维护!!

vue3新特性:

  • 数据响应式原理重新实现 (ES6 proxy 替代了 ES5 的 Object.defineProperty)

  • 解决了: 例如数组的更新检测等bug, 大大优化了响应式监听的性能 —覆写

  • (原来检测对象属性的变化, 需要一个个对属性递归监听) proxy 可以直接对整个对象劫持

  • 虚拟DOM - 新算法 (更快 更小)

  • 提供了composition api, 可以更好的逻辑复用

  • 模板可以有多个根元素

  • 源码用 typescript 重写, 有更好的类型推导 (类型检测更为严格, 更稳定)

  • 废弃了 eventbus 过滤器

官方文档:

  • vue3官方文档:Vue.js - The Progressive JavaScript Framework | Vue.js
  • vue3中文文档:Vue.js

小结: vue3 性能更高, 体积更小, 更利于复用, 代码维护更方便

2、配置项api与组合式api快速体验

(1)配置项api

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script><style></style>
</head>
<body>
<div id="app"><p>{{count}}</p><br><button @click="handleAdd">点我加1</button>
</div>
</body>
<script>let app=Vue.createApp({data(){return {count:100}},methods:{handleAdd(){this.count++}}})app.mount("#app")
</script>
</html>

(2)组合式api

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script><style></style>
</head>
<body>
<div id="app"><p>{{count}}</p><br><button @click="handleAdd">点我加1</button>
</div>
</body>
<script>let app=Vue.createApp({setup() {let count=Vue.ref(0)let handleAdd=()=>{count.value++}return {count,handleAdd}},})app.mount("#app")
</script>
</html>

(3)API风格

  • 选项式API(配置项api),也就是之前vue2中用的用法
Vue.createApp({data:function(){},methods:{},watch:{}# 同一个功能的代码,分到不同地方,代码越多,越乱
})
  • 组合式API,之后vue3中的用法
Vue.createApp({setup() {# 所有代码写在这里面# 变量,函数,监听属性,生命周期# 同一个功能的代码,会在一起}
})
  • 如果当你打算用 Vue 构建完整的单页应用,推荐采用组合式 API + 单文件组件

(4)拥抱TypeScript

  • 之前学习vue2的时候用的都是js代码,在vue3既可以使用js也可以使用ts
  • ts是由微软推出的,但是最终也还是要被编译成js才能运行在浏览器中
  • 如果使用ts写,可以避免很大错误,因为ts是js的超集,ts完全兼容js,也优化了js的一些问题

二、vue3项目创建和启动

1、 vue-cli创建

  • 这种创建方式已经被官方不推荐使用了
  • 官方文档:https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create
## 查看@vue/cli版本,确保@vue/cli版本在4.5.0以上
vue --version
## 安装或者升级你的@vue/cli
npm install -g @vue/cli
## 创建
vue create vue3_demo001
## 启动
cd vue3_demo001
npm run serve
  • 如果没有配置cnpm的话,也可以配置直接配置npm的镜像站,效果是一样的
# 配置npm镜像站
npm config set registry https://registry.npmmirror.com
# 查看npm镜像站    
npm config get registry

2、使用vite创建(推荐)

这种方式目前是官方推荐使用的,Vite 官方文档:Vite | 下一代的前端工具链

(1)什么是vite?

Vite(法语意为 “快速的”,发音 /vit/,发音同 “veet”)是一种新型前端构建工具,能够显著提升前端开发体验。它的工作流程与传统方式不同:

  • **传统方式:**webpack启动项目 -> webpack进行打包编译->将打包的结果交给浏览器 ->浏览器运行

    • 先抓取并构建你的整个应用,然后才能提供服务。
    • 更新速度会随着应用体积增长而直线下降。
  • **vite 方式:**vite启动项目 -> 将打包编译的工作交给了浏览器->浏览器直接解析业务

    • Vite 以 原生 ESM 方式提供源码。这实际上是让浏览器接管了打包程序的部分工作。
    • Vite 只需要在浏览器请求源码时进行转换并 按需提供源码。
    • 根据情景动态导入代码,即只在当前屏幕上实际使用时才会被处理。

(2)为什么使用vite?

优势

  • 💡 极速的服务启动,使用原生 ESM 文件,无需打包
  • ⚡️ 轻量快速的热重载,始终极快的模块热重载(HMR)
  • 🛠️丰富的功能,对 TypeScript、JSX、CSS 等支持开箱即用
  • 📦传统构建 与 vite构建对比图

在这里插入图片描述

(3)使用vite需要注意的地方

**兼容性注意:**Vite 需要 Node.js 版本 18+,20+。然而,有些模板需要依赖更高的 Node 版本才能正常运行,当你的包管理器发出警告时,请注意升级你的 Node 版本。

(4)vite创建vue3

① 指定名字创建
  • 使用cnpm create vite vue3_demo001创建完的项目是没有安装依赖的,也没有安装插件

在这里插入图片描述

  • 打开项目,安装依赖cnpm install

在这里插入图片描述

  • 运行项目npm run dev或者pycharm配置运行项目

在这里插入图片描述

② 不指定名字创建
  • 使用cnpm create vue@latest创建可以自选插件的vue3项目,但还是不带依赖

在这里插入图片描述

(5)使用vite和vue3创建项目的文件简单解释

  • main.js
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
createApp(App).mount('#app') # 没有使用第三方插件
  • HelloWorld.vue 组合式api写法,跟之前不一样了
<script setup>import { ref } from 'vue'defineProps({msg: String,})const count = ref(0)
</script>
<template>
<h1>{{ msg }}</h1>
<div class="card"><button type="button" @click="count++">count is {{ count }}</button></div>
</template>
  • 后期我们可以自己引入 vuex,pinia,vue-router,代码需要自己写
  • 以后在vue3上,建议使用pinia 做状态管理,pinia更适合组合式api的写法,而pinia和vuex是一个功能

这篇关于Vue入门到关门之Vue3项目创建的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


原文地址:
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.chinasem.cn/article/965854

相关文章

从入门到精通MySQL联合查询

《从入门到精通MySQL联合查询》:本文主要介绍从入门到精通MySQL联合查询,本文通过实例代码给大家介绍的非常详细,需要的朋友可以参考下... 目录摘要1. 多表联合查询时mysql内部原理2. 内连接3. 外连接4. 自连接5. 子查询6. 合并查询7. 插入查询结果摘要前面我们学习了数据库设计时要满

深度解析Java项目中包和包之间的联系

《深度解析Java项目中包和包之间的联系》文章浏览阅读850次,点赞13次,收藏8次。本文详细介绍了Java分层架构中的几个关键包:DTO、Controller、Service和Mapper。_jav... 目录前言一、各大包1.DTO1.1、DTO的核心用途1.2. DTO与实体类(Entity)的区别1

从入门到精通C++11 <chrono> 库特性

《从入门到精通C++11<chrono>库特性》chrono库是C++11中一个非常强大和实用的库,它为时间处理提供了丰富的功能和类型安全的接口,通过本文的介绍,我们了解了chrono库的基本概念... 目录一、引言1.1 为什么需要<chrono>库1.2<chrono>库的基本概念二、时间段(Durat

解析C++11 static_assert及与Boost库的关联从入门到精通

《解析C++11static_assert及与Boost库的关联从入门到精通》static_assert是C++中强大的编译时验证工具,它能够在编译阶段拦截不符合预期的类型或值,增强代码的健壮性,通... 目录一、背景知识:传统断言方法的局限性1.1 assert宏1.2 #error指令1.3 第三方解决

如何在Spring Boot项目中集成MQTT协议

《如何在SpringBoot项目中集成MQTT协议》本文介绍在SpringBoot中集成MQTT的步骤,包括安装Broker、添加EclipsePaho依赖、配置连接参数、实现消息发布订阅、测试接口... 目录1. 准备工作2. 引入依赖3. 配置MQTT连接4. 创建MQTT配置类5. 实现消息发布与订阅

springboot项目打jar制作成镜像并指定配置文件位置方式

《springboot项目打jar制作成镜像并指定配置文件位置方式》:本文主要介绍springboot项目打jar制作成镜像并指定配置文件位置方式,具有很好的参考价值,希望对大家有所帮助,如有错误... 目录一、上传jar到服务器二、编写dockerfile三、新建对应配置文件所存放的数据卷目录四、将配置文

python如何创建等差数列

《python如何创建等差数列》:本文主要介绍python如何创建等差数列的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录python创建等差数列例题运行代码回车输出结果总结python创建等差数列import numpy as np x=int(in

前端如何通过nginx访问本地端口

《前端如何通过nginx访问本地端口》:本文主要介绍前端如何通过nginx访问本地端口的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、nginx安装1、下载(1)下载地址(2)系统选择(3)版本选择2、安装部署(1)解压(2)配置文件修改(3)启动(4)

怎么用idea创建一个SpringBoot项目

《怎么用idea创建一个SpringBoot项目》本文介绍了在IDEA中创建SpringBoot项目的步骤,包括环境准备(JDK1.8+、Maven3.2.5+)、使用SpringInitializr... 目录如何在idea中创建一个SpringBoot项目环境准备1.1打开IDEA,点击New新建一个项

从入门到精通MySQL 数据库索引(实战案例)

《从入门到精通MySQL数据库索引(实战案例)》索引是数据库的目录,提升查询速度,主要类型包括BTree、Hash、全文、空间索引,需根据场景选择,建议用于高频查询、关联字段、排序等,避免重复率高或... 目录一、索引是什么?能干嘛?核心作用:二、索引的 4 种主要类型(附通俗例子)1. BTree 索引(