【Vue3 + Vite】Vite搭建 项目解构 Vue快速学习 第一期

文章目录

  • Vue3介绍
  • Vue3通过Vite实现工程化：
  • 一、Vite创建Vue3工程化项目
    • 1.1 Vite+Vue3项目的创建、启动、停止
    • 1.2 Vite+Vue3项目的目录结构
  • 二、Vite+Vue3 项目组件(SFC入门)
    • 2.1 什么是VUE的组件 ?
    • 2.2 什么是.vue文件 ?
    • 2.3 工程化vue项目如何组织这些组件?
  • 三、Vite+Vue3 关于样式的导入方式
  • 四、Vite+Vue3 响应式和setup函数
    • 需求： 实现一个计数器
    • 代码实现计数器：
    • 响应式说明：
  • 总结
    • Vite创建Vue3工程化项目 流程图解：
    • Vue 组件：
    • 工程文件之间的关系：
    • 注意点 bug

Vue3介绍

1

  • Vue是一款用于构建用户界面的 JavaScript 框架。
  • 它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。
  • 无论是简单还是复杂的界面，Vue 都可以胜任。
  • VUE官网

Vue的两个核心功能：

  • 声明式渲染：Vue 基于标准 HTML 拓展了一套模板语法，使得我们可以声明式地描述最终输出的 HTML 和 JavaScript 状态之间的关系。
  • 响应性：Vue 会自动跟踪 JavaScript 状态并在其发生变化时响应式地更新 DOM
    2

Vue3通过Vite实现工程化：

Vite官方文档
2

Vite的介绍：
项目搭建脚手架，比如：webpack

一、Vite创建Vue3工程化项目

1.1 Vite+Vue3项目的创建、启动、停止

vscode 命令行 直接运行 创建Vite：

npm create vite@latest

输入y回车即可,下次使用vite就不会出现了，第一次运行会出现：
1
之后选择vue+JavaScript（or TS）选项。

安装项目所需依赖 :

  • cd进入刚刚创建的项目目录
  • npm install or npm i命令安装基础依赖
  • 启动项目 :
    npm run dev
  • 停止项目：
    命令行上 ctrl+c
  • 查看项目下的package.json
{"name": "demo01-vue3","private": true,"version": "0.0.0","type": "module","scripts": {"dev": "vite","build": "vite build","preview": "vite preview"},"dependencies": {"vue": "^3.3.11"},"devDependencies": {"@vitejs/plugin-vue": "^4.5.2","vite": "^5.0.8"}
}

启动成功：http://localhost:5173/
1

1.2 Vite+Vue3项目的目录结构

2

  • public/ 目录：用于存放一些公共资源，如 HTML 文件、图像、字体等，这些资源会被直接复制到构建出的目标目录中。
  • src/ 目录：存放项目的源代码，包括 JavaScript、CSS、Vue 组件、图像和字体等资源。在开发过程中，这些文件会被 Vite 实时编译和处理，并在浏览器中进行实时预览和调试。以下是src内部划分建议：
      1. assets/ 目录：用于存放一些项目中用到的静态资源，如图片、字体、样式文件等。
      1. components/ 目录：用于存放组件相关的文件。组件是代码复用的一种方式，用于抽象出一个可复用的 UI 部件，方便在不同的场景中进行重复使用。
      1. layouts/ 目录：用于存放布局组件的文件。布局组件通常负责整个应用程序的整体布局，如头部、底部、导航菜单等。
      1. pages/ 目录：用于存放页面级别的组件文件，通常是路由对应的组件文件。在这个目录下，可以创建对应的文件夹，用于存储不同的页面组件。
      1. plugins/ 目录：用于存放 Vite 插件相关的文件，可以按需加载不同的插件来实现不同的功能，如自动化测试、代码压缩等。
      1. router/ 目录：用于存放 Vue.js 的路由配置文件，负责管理视图和 URL 之间的映射关系，方便实现页面之间的跳转和数据传递。
      1. store/ 目录：用于存放 Vuex 状态管理相关的文件，负责管理应用程序中的数据和状态，方便统一管理和共享数据，提高开发效率。
      1. utils/ 目录：用于存放一些通用的工具函数，如日期处理函数、字符串操作函数等。
  • vite.config.js 文件：Vite 的配置文件，可以通过该文件配置项目的参数、插件、打包优化等。该文件可以使用 CommonJS 或 ES6 模块的语法进行配置。
  • package.json 文件：标准的 Node.js 项目配置文件，包含了项目的基本信息和依赖关系。其中可以通过 scripts 字段定义几个命令，如 dev、build、serve 等，用于启动开发、构建和启动本地服务器等操作。
  • Vite 项目的入口为 src/main.js 文件，这是 Vue.js 应用程序的启动文件，也是整个前端应用程序的入口文件。在该文件中，通常会引入 Vue.js 及其相关插件和组件，同时会创建 Vue 实例，挂载到 HTML 页面上指定的 DOM 元素中。

vite的运行界面

  • 在安装了 Vite 的项目中，可以在 npm scripts 中使用 vite 可执行文件，或者直接使用 npx vite 运行它。下面是通过脚手架创建的 Vite 项目中默认的 npm scripts：(package.json)
{"scripts": {"dev": "vite", // 启动开发服务器，别名：`vite dev`，`vite serve`"build": "vite build", // 为生产环境构建产物"preview": "vite preview" // 本地预览生产构建产物}
}
  • 运行设置端口号：(vite.config.js)
//修改vite项目配置文件 vite.config.js
export default defineConfig({plugins: [vue()],server:{port:3000}
})

二、Vite+Vue3 项目组件(SFC入门)

2.1 什么是VUE的组件 ?

  • 一个页面作为整体,是由多个部分组成的,每个部分在这里就可以理解为一个组件
  • 每个.vue文件就可以理解为一个组件,多个.vue文件可以构成一个整体页面
  • 组件化给我们带来的另一个好处就是组件的复用和维护非常的方便
    2.1

2.2 什么是.vue文件 ?

  • 传统的页面有.html文件.css文件和.js文件三个文件组成(多文件组件)

  • vue将这文件合并成一个.vue文件(Single-File Component，简称 SFC,单文件组件)

  • .vue文件对js/css/html统一封装,这是VUE中的概念 该文件由三个部分组成 <script> <template> <style>

    • template标签 代表组件的html部分代码 代替传统的.html文件
    • script标签 代表组件的js代码 代替传统的.js文件
    • style标签 代表组件的css样式代码 代替传统的.css文件

2.3 工程化vue项目如何组织这些组件?

  • index.html是项目的入口,其中 <div id ='app'></div>是用于挂载所有组建的元素
  • index.html中的script标签引入了一个main.js文件,具体的挂载过程在main.js中执行
  • main.js是vue工程中非常重要的文件,它决定这项目使用哪些依赖,导入的第一个组件
  • App.vue是vue中的核心组件,所有的其他组件都要通过该组件进行导入,该组件通过路由可以控制页面的切换

2.3

三、Vite+Vue3 关于样式的导入方式

2

  • 在.vue文件中的style标签中

  • 将CSS样式保存到独立的CSS文件中，哪个文件需要，就导入即可

    • 在 script 标签中引入 :
      • import './style/test.css';
      • 2
    • style标签中引入 :
      • @import './style/test.css';
      • 2

  • 全局引入 在main.js中 添加导入:

    • import './style/test.css';
    • 写引入的资源的相对路径即可！
    • 某个样式需要在所有.vue中生效 使用全局
    • 这样

四、Vite+Vue3 响应式和setup函数

需求： 实现一个计数器

2

  • App.vue
<script>//存储vue页面逻辑js代码
</script><template><!-- 页面的样式的是html代码-->
</template><style scoped>/** 存储的是css代码! <style scoped> 是 Vue.js 单文件组件中用于设置组件样式的一种方式。它的含义是将样式局限在当前组件中，不对全局样式造成影响。 */
</style>

代码实现计数器：

<script setup>//存储vue页面逻辑js代码
import { ref } from "vue";let count = ref(1);function countIncrease() {// 通过.value修改响应式数据count.value++;
}function countDecrease() {count.value--;
}function showCountChange() {alert(count.value);
}
</script><template><div><button @click="countIncrease">+</button><!-- ref响应式数据在绑定到html上时不需要.value --><span v-text="count"></span><button @click="countDecrease">-</button><button @click="showCountChange">显示</button></div>
</template><style scoped>
</style>

响应式说明：

  • 响应式数据：在数据变化时，vue框架会将变量最新的值更新到DOM树中，即页面数据实时更新。
  • 非响应式数据：数据变化，不会实时更新
  • vue2 中 ， 数据默认就是响应式的
  • vue3 中 ， 数据需要经过 ref / reactive 函数 处理 才是响应式的。
    • ref / reactive 函数由 vue框架提供，直接 import 导入即可使用
    • ref使用需要注意的是，在script标签中操作响应数据要通过 .value的形式

<script type="module" setup> 通过setup关键字
可以省略 export default {setup(){ return{}}}这些冗余的语法结构

总结

npm create vite
npm install 
npm run dev

maven ：

  1. 依赖下载
  2. 项目管理

npm 依赖下载
vite 项目管理

Vite创建Vue3工程化项目 流程图解：

2

Vue 组件：

1
vue

工程文件之间的关系：

2

  • App.vue 合体
<script setup>
import HelloWorld from "./components/HelloWorld.vue";
import HelloVue from "./components/HelloVue.vue";
</script><template><div><HelloVue></HelloVue><h1 class="testColor">Hello App Vue</h1><HelloWorld></HelloWorld></div>
</template><style scoped>
.testColor {color: red;
}
</style>
  • 组件一：Hello World
<script setup>
</script><template><h1 class="read-the-docs">Hello World</h1>
</template><style scoped>
.read-the-docs {color: #888;
}
</style>
  • 组件二：Hello Vue3
<script setup>
</script><template><h1 id="greenColor">Hello Vue3</h1>
</template><style scoped>
#greenColor {color: green;
}
</style>

再通过 main.js 将合体App 塞到 index.html中显示
3

  • 为什么格式会自动居中，因为,默认有一个style.css
  • 2

注意点 bug

  • Internal server error: v-text will override element children.
    使用v-text指令时，元素内部不能有内容：
    bug
  • ref is not defined
    2
    导入 vue 的 ref 函数 才能使用

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【NodeJS】004- NodeJS的模块化与包管理工具

【NodeJS】004- NodeJS的模块化与包管理工具

模块化 1. 介绍 1.1.什么是模块化与模块 ? 将一个复杂的程序文件依据一定规则（规范）拆分成多个文件的过程称之为 模块化 其中拆分出的 每个文件就是一个模块 ，模块的内部数据是私有的，不过模块可以暴露内部数据以便其他模块使用 1.2 什么是模块化项目 ? 编码时是按照模…
阅读更多...
23. 集合类

23. 集合类

集合 1. 概述2. 分类2.1 单列集合&#xff08;Collection&#xff09;2.2 双列集合&#xff08;Map&#xff09; 单列集合 Collection、List、Set、ArrayList、LinkedList’、Vector、HashSet、TreeSet、LinkedHashSet双列集合 Map、HashTable、HashMap、TreeMap、Properties、…
阅读更多...
docker 部署及命令

docker 部署及命令

一、容器概述 1、为什么要用到容器&#xff1f; ①容器可以屏蔽底层操作系统的差异性&#xff0c;让业务应用不管在哪里都是使用容器的环境运行&#xff0c;从而保证开发测试环境与生产环境的一致性 ②容器部署起来非常便捷和迅速&#xff0c;缩短开发测试部署的周期时间 2…
阅读更多...
Springboot最佳包结构

Springboot最佳包结构

目录 概述 无默认package 入口类 包结构 概述 我们在构建Springboot项目的时候&#xff0c;我们可以很灵活的去管理我的们class&#xff0c;以及创建包结构&#xff0c;但是有一些原则我们要牢记在心。 无默认package Springboot中的一些注解例如ComponentScan&#xff…
阅读更多...
《Python 简易速速上手小册》第10章：Python 项目实战（基于最新版 Python3.12 编写）

《Python 简易速速上手小册》第10章：Python 项目实战（基于最新版 Python3.12 编写）

注意&#xff1a;本《Python 简易速速上手小册》 核心目的在于让零基础新手「快速构建 Python 知识体系」 文章目录 <mark >注意&#xff1a;本《Python 简易速速上手小册》<mark >核心目的在于让零基础新手「快速构建 Python 知识体系」 10.1 项目规划和结构10.1…
阅读更多...
阅读go语言工具源码系列之gopacket（谷歌出品）----第二集 layers-巧妙的抽象与无聊的协议包

阅读go语言工具源码系列之gopacket（谷歌出品）----第二集 layers-巧妙的抽象与无聊的协议包

上一集中我们讲到了wpcap.dll的go封装方法&#xff0c;对于linux系统下libpcap的go封装采用的是常用的cgo方式&#xff0c;想了解的可以看看pcap文件夹中的pcap_unix.go。 我们得到了wpcap.dll的go调用&#xff0c;就可以利用它来进行列举所有网络设备&#xff0c;例如以下代码…
阅读更多...
知识产权如何转为实缴资本，实操

知识产权如何转为实缴资本，实操

网上已传疯了&#xff0c;相关部门要求企业注册资本认缴的必须在5年内完成实缴&#xff0c;这一下子引起企业老板们着急了。以前公司注册时&#xff0c;很多老板因为是认缴资本&#xff0c;完全凭脑袋一拍&#xff0c;写上注册资金5000万&#xff0c;有的甚至写上几个小目标。现…
阅读更多...
11.Elasticsearch应用（十一）

11.Elasticsearch应用（十一）

Elasticsearch应用&#xff08;十一&#xff09; 1.什么是自动补全 现代的搜索引擎&#xff0c;一般都会提供Suggest as you type的功能 帮助用户在输入搜索的过程中&#xff0c;进行自动补全或者纠错。通过协助用户输入更加精准的关键词&#xff0c;提高后续搜索阶段文档的…
阅读更多...
【GitHub项目推荐--开源翻译模型】【转载】

【GitHub项目推荐--开源翻译模型】【转载】

开源翻译模型 Seamless M4T 旨在提供高质量的翻译&#xff0c;使来自不同语言的人们能够轻松地通过语音和文本进行交流&#xff0c;支持 101 种语言用于语音输入、96 种文本语言输入/输出、 可以输出 35 种语音语言。 此统一模型支持多个任务&#xff0c;而不依赖于多个单独的…
阅读更多...
2024.1.27 寒假训练记录（10）

2024.1.27 寒假训练记录（10）

下午训练赛的榜歪得吓人&#xff0c;来补一下题。 文章目录 CF 1646B Quality vs QuantityCF 1326C Permutation PartitionsCF 1355D Game With ArrayAT ARC99B Snuke NumbersAT exawizards2019C Snuke the WizardCF 1788F XOR, Tree, and Queries CF 1646B Quality vs Quantit…
阅读更多...
漏洞原理反射型XSS漏洞

漏洞原理反射型XSS漏洞

漏洞原理XSS漏洞 1 反射型XSS php基础链接 Web渗透编程语言基础-CSDN博客 正常思维 http://127.0.0.1/websec/day01/xss_reflect.php?name%E6%88%91%E6%98%AF%E8%B0%81 http://127.0.0.1/14_WEBSEC/DAY01/xss_reflect.php?name我是谁 黑客思维 http://127.0.0.1/websec…
阅读更多...
centos 离线安装yum

centos 离线安装yum

1先找一套相同cpu的虚拟机下载rpm 2 如果新的虚拟机没有yum源就替换 修改yum源-CSDN博客 1.2使用wget下载yum源配置文件 (1)备份本地yum源配置文件 备份命令&#xff1a; mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base.repo.bak(2)下载yum源配置文…
阅读更多...
Unity 开发过程中如何优化内存

Unity 开发过程中如何优化内存

在开发Unity游戏时&#xff0c;优化内存使用是非常重要的。这不仅可以提高游戏性能&#xff0c;还能保证游戏在各种设备上都能顺利运行。以下是一些关于如何在Unity中优化内存使用的建议&#xff1a; 1. 了解并监控您的内存使用情况&#xff1a;您可以使用Unity的Profiler工具…
阅读更多...
Qt Bezier闭合曲线插值（2D）

Qt Bezier闭合曲线插值（2D）

文章目录 一、简介二、实现代码三、实现效果参考资料一、简介 标准的Bezier曲线拟合并不能穿过所有节点，这是由于其随着节点数量的增加，其多项式阶数也在增加，最终其形状也会越发复杂且难以控制。因此就有学者提出，使用三阶贝塞尔曲线分段去插值一条整体光滑的曲线，这样不…
阅读更多...
echarts option series smooth

echarts option series smooth

echarts option series smooth 平滑处理 smooth&#xff1a;0.3 echarts_04_line.html <!DOCTYPE html> <html lang"en"><head> <meta charset"utf-8"> <title></title> </head><body><div id&quo…
阅读更多...
【Git版本控制】以及搭建gitlab服务

【Git版本控制】以及搭建gitlab服务

目录 一、Git介绍二、Git安装与全局配置1、git的全局配置&#xff1a;2、为常用的指令配置别名&#xff1a;3、Git初始化本地代码仓库4、Git的基础命令 三、分支四、Git远程仓库1、操作远程仓库2、从远程仓库克隆3、从远程仓库中抓取和拉取 五、Gitlab sever部署期间出现遇到的…
阅读更多...
python爬虫demo——爬取历史平均房价

python爬虫demo——爬取历史平均房价

简单爬取历史房价 需求 爬取的网站汇聚数据的城市房价 https://fangjia.gotohui.com/ 功能 选择城市 https://fangjia.gotohui.com/fjdata-3 需要爬取年份的数据&#xff0c;等等 https://fangjia.gotohui.com/years/3/2018/ 使用bs4模块 使用bs4模块快速定义需要爬取的…
阅读更多...
python asyncio异步编程

python asyncio异步编程

一、协程 协程（Coroutine），也可以被称为微线程，是一种用户态内的上下文切换技术。简而言之，其实就是通过一个线程实现代码块相互切换执行。 对于协程而言，并不是计算机所提供的，计算机所提供的只有进程和线程、而协程则是通过程序员人为所创造的。我们通常将协程称为微线…
阅读更多...
javaScript的书写位置

javaScript的书写位置

javascript的书写位置有哪些呢&#xff1f;有什么注意事项吗&#xff1f;让我为大家介绍一下吧&#xff01; 1.内部 注意&#xff1a;书写位置尽量写到文档末尾</ body>的前面 在我们内部书写JS的时候 <!DOCTYPE html> <html lang"en"> <hea…
阅读更多...
有趣的数学 了解TensorFlow的自动微分的实现

有趣的数学 了解TensorFlow的自动微分的实现

一、简述 这里主要介绍了TensorFlow的自动微分（autodiff）功能如何工作，以及与其他解决方案的比较。假设您定义了一个函数，并且需要计算它的偏导数和，通常用于执行梯度下降（或某些其他优化算法）。可用的主要选择是手动微分、有限差分近似、正向模式自动微分和反向模式自动…
阅读更多...
最新文章

Copyright @ 2022~2023