【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…
阅读更多...
阅读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;而不依赖于多个单独的…
阅读更多...
漏洞原理反射型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…
阅读更多...
Unity 开发过程中如何优化内存

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

在开发Unity游戏时&#xff0c;优化内存使用是非常重要的。这不仅可以提高游戏性能&#xff0c;还能保证游戏在各种设备上都能顺利运行。以下是一些关于如何在Unity中优化内存使用的建议&#xff1a; 1. 了解并监控您的内存使用情况&#xff1a;您可以使用Unity的Profiler工具…
阅读更多...
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模块快速定义需要爬取的…
阅读更多...
有趣的数学 了解TensorFlow的自动微分的实现

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

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

ETCD高可用架构涉及常用功能整理

ETCD高可用架构涉及常用功能整理 1. etcd的高可用系统架构和相关组件1.1 Quorum机制1.2 Raft协议 2. etcd的核心参数2.1 常规配置2.2 特殊优化配置2.2.1 强行拉起新集群 --force-new-cluster2.2.2 兼容磁盘io性能差2.2.3 etcd存储quota 3. etcd常用命令3.1 常用基础命令3.1.1 列…
阅读更多...
Java 数据结构篇-深入了解排序算法（动态图 + 实现七种基本排序算法）

Java 数据结构篇-深入了解排序算法（动态图 + 实现七种基本排序算法）

&#x1f525;博客主页&#xff1a; 【小扳_-CSDN博客】 ❤感谢大家点赞&#x1f44d;收藏⭐评论✍ 文章目录 1.0 实现冒泡排序 2.0 实现选择排序 2.1 选择排序的改良升级 3.0 实现堆排序 4.0 实现插入排序 5.0 实现希尔排序 6.0 实现归并排序 6.1 递归实现归并排序 6.2 使用…
阅读更多...
HarmonyOS鸿蒙学习基础篇 - 通用事件

HarmonyOS鸿蒙学习基础篇 - 通用事件

一、引言 HarmonyOS鸿蒙是华为推出的分布式操作系统&#xff0c;旨在为各种智能设备提供统一的操作系统。鸿蒙系统的一大特色是其强大的分布式能力&#xff0c;而通用事件则是实现这一能力的关键技术之一&#xff0c;本篇博客将介绍HarmonyOS鸿蒙中的通用事件。 二、 点击事件…
阅读更多...
STM32-LwESP 移植

STM32-LwESP 移植

LwESP 是一个专门解析 Espressif 公司旗下 ESP 系列芯片 AT 指令的开源库&#xff0c;具有以下特性&#xff1a; 支持 Espressif 公司 ESP32, ESP32-C2, ESP32-C3, ESP32-C6 和 ESP8266 芯片。独立平台&#xff0c;采用 C99 标准编写&#xff0c;易于移植。允许不同的配置来优…
阅读更多...
通讯录项目（终）

通讯录项目（终）

Start And Stick 上一期我们将通讯录的项目的基本功能已经实现&#xff0c;这一篇文章我们将对通讯录进行完善。 目录 Start And Stick 上期回顾&#xff1a; 上期必要代码&#xff1a; 数据打印&#xff1a; 代码讲解&#xff1a; 头部插入数据&#xff1a; 代码讲解&…
阅读更多...
【Linux】专栏文章索引

【Linux】专栏文章索引

为了方便 快速定位 和 便于文章间的相互引用等 作为一个快速准确的导航工具 Linux 目录&#xff1a; &#xff08;一&#xff09;CentOS 7 安装&配置Python
阅读更多...
CSS 多色正方形上升

CSS 多色正方形上升

<template><view class="loop cubes"><view class="item cubes"></view> <!-- 方块1 --><view class="item cubes"></view> <!-- 方块2 --><view class="item cubes"></vie…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023