前端系列-6 使用Vue3搭建前端工程与setup语法糖介绍

news2024/11/14 16:36:35

背景

本文介绍如何使用vue3脚手快速搭建一个前端项目,并对生成的项目结构进行简单介绍,然后介绍setup语法糖。前端入门的同学可基于本文内容快速搭建属于自己的项目。

vue官网资料显示, vue3开发的项目相对vue2, 具有打包后体积变小,极速启动服务、渲染速度快、内存减少、拥抱ts编程等优点。

1.项目搭建

vue3脚手架是基于vite构建工具, vite类似与webpack用于打包前端项目

1.1 项目初始化

初始化指令npm create vue@latest, 根据提示进行选择性按照,这里进行最简化安装(仅支持了ts),如下所示:

D:\Data\Code\front>npm create vue@latest
Need to install the following packages:
create-vue@3.10.4
Ok to proceed? (y) y

Vue.js - The Progressive JavaScript Framework

√ 请输入项目名称: ... vue3-demo-ewen
√ 是否使用 TypeScript 语法? .../ 是
√ 是否启用 JSX 支持? .../ 是
√ 是否引入 Vue Router 进行单页面应用开发? .../ 是
√ 是否引入 Pinia 用于状态管理? .../ 是
√ 是否引入 Vitest 用于单元测试? .../ 是
√ 是否要引入一款端到端(End to End)测试工具? » 不需要
√ 是否引入 ESLint 用于代码质量检测? .../ 是
√ 是否引入 Vue DevTools 7 扩展用于调试? (试验阶段) .../ 是

正在初始化项目 D:\Data\Code\front\vue3-demo-ewen...

项目初始化完成,可执行以下命令:
 cd vue3-demo-ewen
  npm install
  npm run dev

npm notice
npm notice New minor version of npm available! 10.5.0 -> 10.8.1
npm notice Changelog: https://github.com/npm/cli/releases/tag/v10.8.1
npm notice Run npm install -g npm@10.8.1 to update!
npm notice

D:\Data\Code\front>

生成项目的目录如下所示:
在这里插入图片描述
项目包括以下几个部分:
[1] 配置文件
vite.config.ts是vite打包工具的配置文件;tsconfig.json、tsconfig.app.json、tsconfig.node.json是TypeScript配置文件;package.json是npm包管理工具配置文件。整个项目开发过程中,除了需要修改package.json外,其他配置文件几乎不需要关注。

[2] public资源
存放网页图标等资源文件。

[3] 项目代码
index.html和src文件夹。

[4] 其他
.gitignore git忽略文件,README.md 说明文档;

1.2 helloworld案例

删除src文件夹内所有文件,并在src路径下创建如下文件:
main.ts文件:

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

App.vue文件:

<script setup lang="ts">
</script>

<template>
 <div>Hello World</div>
</template>

<style scoped>
</style>

整个项目的入口文件为index.html文件,在index.html中定义了一个id为"app"的div元素以及引入了src/main.ts文件:

<!DOCTYPE html>
<html lang="en">
   <!-- ... -->
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

在main.ts文件中,使用createApp函数创建一个Vue应用实例,并将App.vue作为根组件传递给这个实例。然后,通过调用mount方法将Vue应用挂载到app元素上。之后,Vue将接管这个元素,并将其内部的内容替换为App.vue组件的渲染结果。
说明:后续开发可在App.vue根组件的基础上进行。可以在根组件中开发页面,或者引入其他组件。

1.3 项目运行

运行npm install根据package.json文件下载项目所需要的依赖,在根目录新增node_modules,并放在该路径下。执行npm run dev指令运行前端项目,访问路径如下所示:

VITE v5.3.4  ready in 465 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

2.vue组件

自定义的vue组件以.vue文件结尾,一般放在component文件夹下。
每个vue组件由3个部分组成: (1) template定义组件的结构,(2) script中定义前端逻辑,(3) style定义组件的样式;
如下所示:

<script setup lang="ts">
</script>

<template>
 <div>Hello World</div>
</template>

<style scoped>
</style>

其中,script setup lang="ts"表示支持typescript(可以写ts,也可以写js),且使用setup语法糖。

在<script>中可以引入其他组件、ts脚本、样式, 如下所示:

<script setup lang="ts">
    // 导入HelloWorld.vue文件
 import HelloWorld from './components/HelloWorld.vue'
</script>

<template>
<!-- 引入HelloWorld.vue后,这里可以直接使用HelloWorld标签 /> --> 
    <HelloWorld msg="You did it!" />
</template>

<style scoped>
</style>

上述通过import HelloWorld from './components/HelloWorld.vue'引入HelloWorld.vue组件,也可用于引入css/scss或者js/ts等文件。

另外, ./components/HelloWorld.vue也可替换为 @/components/HelloWorld.vue. @是一个别名表示src目录,定义于vite.config.ts中:

export default defineConfig({
  plugins: [
    vue(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

2.setup用法和setup语法糖

vue3中没有了this概念,变量和方法直接在setup中定义,用法如下所示:

<script lang="ts">
export default {
    name: 'Person',
    setup() {
        // 数据
        let name ='ewen'
     
        //方法
        function changName() {
            name = "ewens";
        }       
        return {name,  changeName}
        // 等价于 return {name:name,  changeName:changeName}
    }
}
</script>

通过setup语法糖,可以简化为:

<script setup lang="ts">
    // 数据
    let name ='ewen'

    //方法
    function changeName() {
        name = "ewens";
    }       
</script>

此时,可以直接在组件的template中直接使用name和changeName方法,如下所示:

<script setup lang="ts">
    // 数据
    let name ='ewen'

    //方法
    function changeName() {
        name = "ewens";
        console.log("name is "+name)
    }    
</script>

<template>
 <div >{{name}}</div>
 <button @click="changeName">修改名称</button> 
</template>

<style scoped>
</style>

点击修改名称按钮,浏览器的console显示"name is ewens"。
说明此时name数据已被修改,而页面仍显示ewen;原因是name不是响应式数据,这部分内容后续介绍。
可通过如下方式将name修改为响应式,从而点击修改名称时,页面显示变化:

<script setup lang="ts">
import { ref } from 'vue';  
    // 数据
    let name =ref('ewen');

    //方法
    function changeName() {
      name.value = "ewens";        
    }
</script>

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【网络】socket和udp协议

socket 一、六个背景知识1、Q1&#xff1a;在进行网络通信时&#xff0c;是不是两台机器在进行通信&#xff1f;2、端口号3、端口号vs进程PID4、目的端口怎么跟客户端绑定的呢&#xff1f;也就是怎么通过目的端口去找到对应的进程的呢&#xff1f;5、我们的客户端&#xff0c;怎…

textblob文本处理、词性分析与情感分析

1 前言 textBlob 是一個简单易用的 NLP库&#xff0c;基于 NLTK 和 pattern库&#xff0c; 提供了文本处理和情感分析等功能。 安装 textblob0.18.0 nltk3.8.1测试环境&#xff1a;Python3.10.9 使用前&#xff0c;先运行下面代码先下载些文件 import nltk nltk.download…

机器学习 | 阿里云安全恶意程序检测

目录 一、数据探索1.1 数据说明1.2 训练集数据探索1.2.1 数据特征类型1.2.2 数据分布1.2.3 缺失值1.2.4 异常值1.2.5 标签分布探索 1.3 测试集探索1.3.1 数据信息1.3.2 缺失值1.3.3 数据分布1.3.4 异常值 1.4 数据集联合分析1.4.1 file_id 分析1.4.2 API 分析 二、特征工程与基…

「YD-221WA无线多合一变送器」让高效监测触手可及!

前言 近年来&#xff0c;伴随着“中国制造2025”、“互联网”在我国的全面推进&#xff0c;智能无线仪表设备在工业控制领域大规模应用。“设备上云”成为众多企业实现数字化转型升级的重要策略&#xff0c;为提升仪表设备管理软件的网络化、智能化、易维护性等方面提供了强有…

问题记录-SpringBoot 2.7.2 整合 Swagger 报错

详细报错如下 报错背景&#xff0c;我将springboot从2.3.3升级到了2.7.2&#xff0c;报了下面的错误&#xff1a; org.springframework.context.ApplicationContextException: Failed to start bean documentationPluginsBootstrapper; nested exception is java.lang.NullPo…

1.3、校验码

校验码 简介奇偶校验编码方法分类注意练习题 CRC循环冗余校验模2除法异或运算模2除法计算过程 循环冗余校验CRC过程练习题选择题 海明校验步骤练习题 简介 计算机在接收相应信息的时候&#xff0c;能够识别的都是一些电信号或者转化后的0 1二进制。那包括我们在网络上传递信息…

昇思25天学习打卡营第16天|LLM-MindNLP ChatGLM-6B StreamChat

打卡 目录 打卡 任务说明 环境配置 部署方式 ChatGLM-6B 体验截图示例 ChatGLM-6B 模型结构解析如下 ChatGLM2-6B 模型结构解析如下 任务说明 加载智谱清言的chatglm模型权重文件&#xff08;目前有4个版本&#xff09;&#xff0c;本次主要尝试了chatglm-6b。 chatgl…

人工智能(AI)在办公场所的广泛应用

人工智能&#xff08;AI&#xff09;在办公场所的广泛应用正逐步改变着我们的工作方式和效率。随着技术的进步&#xff0c;越来越多的公司和组织开始采用各种AI技术来优化工作流程、提升生产力&#xff0c;并提供更好的用户体验。以下是人工智能在办公方面的一些主要作用和影响…

C++中,虚函数的作用详解

我个人认为虚函数的作用有两个&#xff1a; 增加安全性&#xff1b;提醒子类去做该做的事情。 提高效率&#xff1b;不是指程序执行效率&#xff0c;而是编码效率。 首先我这里要纠正一下&#xff1a; 一个函数被定义为虚函数&#xff0c;不代表这个函数未被实现&#xff1…

leetcode.nvim使用cookie无法登陆问题

错误描述&#xff1a; 使用力扣 (LeetCode) 全球极客挚爱的技术成长平台 的cookie在neovim上使用leetcode.nvim进行登录会出现curl xxx -D xxxx的报错。 解决方法&#xff1a; 使用LeetCode - The Worlds Leading Online Programming Learning Platform这个网站的cookie进行登…

这7款高效爬虫工具软件,非常实用!

在当今数据驱动的时代&#xff0c;自动化爬虫工具和软件成为了许多企业和个人获取数据的重要手段。这里会介绍6款功能强大、操作简便的自动化爬虫工具&#xff0c;用好了可以更高效地进行数据采集。 1. 八爪鱼采集器 八爪鱼是一款功能强大的桌面端爬虫软件&#xff0c;主打可…

轮船控制系统nmea2000电缆组件 7/8 T型连接器

NMEA 2000 7/8 T型连接器概述 NMEA 2000 7/8 T型连接器是专为船舶控制系统设计的电缆组件&#xff0c;主要用于连接船上的各种电子设备和系统&#xff0c;如GPS接收器、自动驾驶仪、风速和风向传感器、深度声纳等。这些设备通过NMEA 2000总线共享数据&#xff0c;包括导航信息…

1.Fabric框架

要了解Fabric&#xff0c;首先要知道Hyperledger开源项目。 2015年12月&#xff0c;由开源世界的旗舰组织Linux基金会牵头&#xff0c;30家初始企业成员共同宣布Hyperledger联合项目成立。Hyperledger 超级账本&#xff0c;是首个面向企业应用场景的分布式账本平台&#xff0c…

【算法】深入理解并优化算法:提升软件开发效率与质量

目录 一、算法的基本概念 输入 输出 确定性 有限性 有效性 二、常见算法类型 1. 排序算法 选择排序&#xff08;Selection Sort&#xff09; 插入排序&#xff08;Insertion Sort&#xff09; 快速排序&#xff08;Quick Sort&#xff09; 归并排序&#xff08;Mer…

搜维尔科技:Movella推出面向自主机器和边缘人工智能应用的Xsens MTi传感器组合

Movella近日宣布针对自主机器和边缘人工智能应用&#xff0c;已增强旗下的Xsens MTi™惯性传感器模块。Xsens MTi传感器可与NVIDIA Jetson™平台轻松集成&#xff0c;用于边缘人工智能和机器人技术&#xff0c;并与NVIDIA Jetson AGX Orin™、NVIDIA Jetson Orin™ NX和NVIDIA …

基本聚集函数和case的应用

文章目录 1.基本聚集函数(1)基本聚集函数的介绍(2)使用基本聚集函数的简单例子&#xff08;1&#xff09;查询最大年龄&#xff0c;最小年龄年龄和平均年龄<1>最大年龄<2>最小年龄<3>平均年龄 (2&#xff09;配合上where语句&#xff0c;查询女士的平均年龄(…

虚拟化环境中如何实现以业务为中心的网络隔离?Everoute 推出虚拟专有云网络(VPC)功能

目前&#xff0c;不少企业都利用云计算和虚拟化技术提升 IT 系统灵活性、敏捷性和成本效益。然而&#xff0c;云环境的“多租户”特性也为业务安全带来了新的挑战&#xff0c;如何保障不同业务主体或租户之间的数据安全和网络隔离&#xff0c;成为企业关注的焦点。 作为 Smart…

(C++) 智能指针指定删除器

文章目录 ⌚前言⏲️注意 ⌚unique_ptr⏲️说明⏲️实例 ⌚shared_ptr⏲️说明⏲️实例 ⌚拓展⏲️函数类型 & 函数指针类型 ⌚END&#x1f31f;关注我 ⌚前言 自C11后&#xff0c;推出了三个智能指针。其中 unique_ptr和shared_ptr可以指定删除器。 但两者的形式却不太一…

【Canvas与艺术】红底白色压边五角星

【成图】 【代码】 <!DOCTYPE html> <html lang"utf-8"> <meta http-equiv"Content-Type" content"text/html; charsetutf-8"/> <head><title>精确压边五角星版本2</title><style type"text/css&qu…

Java IO模型深入解析:BIO、NIO与AIO

Java IO模型深入解析&#xff1a;BIO、NIO与AIO 一. 前言 在Java编程中&#xff0c;IO&#xff08;Input/Output&#xff09;操作是不可或缺的一部分&#xff0c;它涉及到文件读写、网络通信等方面。Java提供了多种类和API来支持这些操作。本文将从IO的基础知识讲起&#xff…