当前位置：首页 > news >正文

【1.0】vue3的创建

news 2026/5/12 18:05:10

【1.0】vue3的创建

【一】vue3介绍

vue2的所有东西，vue3都兼容
vue3中写js代码由两种，组合式和配置项
- 配置项api，就是vue2的写法，将数据放进data，方法放进methods等
```
    	export default{data(){return {}},methods:{}}
```
- 组合式，就是一个功能，上面直接写变量，下一行可以直接写函数，但是得return返回出去
```
const items = ref([{ message: 'Foo' }, { message: 'Bar' }])
function add(){  }
```

【二】vue3项目创建

#1 什么是vite？—— 新一代前端构建工具。
优势如下：
开发环境中，无需打包操作，可快速的冷启动。
轻量快速的热重载（HMR）。
真正的按需编译，不再等待整个应用编译完成。# 2 兼容性注意
Vite 需要 Node.js 版本 18+，20+。然而，有些模板需要依赖更高的 Node 版本才能正常运行，当你的包管理器发出警告时，请注意升级你的 Node 版本
官网：https://cn.vitejs.dev/

vue-cli创建和vue2基本一致

（1）vue-cli创建

【1】cmd命令，“D：”+enter进入d盘或者输入vue ui进入网页创建

【2】创建项目

```
vue create vue3_0815（项目名）
```

【3】选配置

mannly自定义
router/vuex/babel/选中
版本3.x
history版本

（2）vue-vite创建（推荐）

【1】点进官网

```
https://cn.vitejs.dev/
```

【2】配置镜像站

cmd查看本地镜像
```
npm config get registry
```

配置淘宝的镜像站

npm config set registry https://registry.npmmirror.com

【3】创建项目

    # 创建项目方式一(后期还是要输入project_name)npm create vite@latest# 创建项目方式二:指定名字npm create vite@latest vue3_demo002# 创建项目方式三cnpm create vite@latest vue3_demo002# 创建项目方式四cnpm create vite vue3_demo002

回车 选择vue，下一步选择js

【4】打开

用pycharm打开

右上角 edit_configurations
加号npm
--在script中输入serve（vue-cli)
--在script中输入dev（vue-vite)

我在npm run dev报错，是因为没有install vue点击那个感叹号提示自动下载的

【5】补充

vue-cli和vite区别在页面上，命令一个是serve一个是dex，都可以在package.json中修改

{"name": "vue3_vite0815","private": true,"version": "0.0.0","type": "module","scripts": {"dev": "vite",---可以是script，此时就是run serve"build": "vite build","preview": "vite preview"},

【三】快速体验组合式

<!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>

【四】快速体验配置项

<!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>

【五】拥抱ts

# 1 之前写vue2用js
# 2 vue3-->ts-->微软推出的--》最终要被编译成js才能运行在浏览器中-使用ts写，可以避免很大错误-ts是js的超集---》ts完全兼容js# 3 我们学的是vue2+js+vue-router+vuex+elementuivue3+js+vue-router+pinia+elementui-plus# 4 变化新的生命周期钩子data 选项应始终被声明为一个函数移除keyCode支持作为 v-on 的修饰符

【1.0】vue3的创建

【1.0】vue3的创建【一】vue3介绍 vue2的所有东西，vue3都兼容 vue3中写js代码由两种，组合式和配置项配置项api，就是vue2的写法，将数据放进data，方法放进methods等 export default{data(){return {}},methods:…...

编程日记 2024/8/22 23:18:00

刷刷前端手写题

闭包用途闭包闭包让你可以在一个内层函数中访问到其外层函数的作用域防抖描述前面所有触发都被取消，最后一次执行，在规定时间之后才会触发，也就是说如果连续快速的触发，用户操作频繁，但只会执行一次。常用场…...

编程日记 2024/8/22 23:16:59

论文解读：LONGWRITER: UNLEASHING 10,000+ WORD GENERATION FROM LONG CONTEXT LLMS

摘要现象：当前的大预言模型可以接受超过100,000个tokens的输入，但是却难以生成超过2000个token的输出。原因：监督微调过程(SFT)中看到的样本没有足够长的样本。解决方法： Agent Write，可以将长任务分解为子任务&a…...

编程日记 2024/8/22 23:15:58

一文了解Ansible原理以及常见使用模块

ansible使用手册 1. 简述 Ansible 是一种开源的自动化工具，主要用于配置管理、应用程序部署和任务自动化。它使用简单的 YAML 语言来定义自动化的任务【playbook】，使得配置和部署变得更加直观和易于管理。基于SSH协议连接到远程主机来执行指令。 2…...

编程日记 2024/8/22 23:14:57

JavaEE从入门到起飞（九） ~Activiti 工作流

工作流当一道流程逻辑需要用到多个表单的提交和多个角色的审核共同完成的时候，就可以使用工作流。工作流一般使用的是第三方技术，也就是说别人帮你创建数据库表和service层、mapper层，你只需要注入工具接口即可使用。原理：一…...

编程日记 2024/8/22 23:13:56

微服务的保护

一、雪崩问题及解决方案 1.雪崩问题微服务之间，一个微服务依赖多个其他的微服务。当一个微服务A依赖的一个微服务B出错时，微服务A会被阻塞，但其他不依赖于B的微服务不会受影响。当有多个微服务依赖于B时，服务器支持的线程和并…...

编程日记 2024/8/22 23:12:55

2024前端面试题-网络篇

1.跨域问题同源策略：需要协议、域名、端口号相同跨域原因：不符合同源策略便会产生跨域问题解决跨域：JSONP、配置代理、通过CORS解决 2.RPC和HTTP的区别主要区别是序列化和反序列化，RPC通过二进制高效传输，HTTP是j…...

编程日记 2024/8/22 23:10:53

移情别恋c++ ദ്ദി˶ｰ̀֊ｰ́ ) ——6.vector

1.杨辉三角 . - 力扣（LeetCode） 在「杨辉三角」中，每个数是它左上方和右上方的数的和。 class Solution { public:vector<vector<int>> generate(int numRows) {vector<vector<int>> arr;int i 0;int j 0;for (i…...

编程日记 2024/8/22 23:09:52

设计模式---简单工厂模式

简单工厂模式（Simple Factory Pattern） 是一种创建型设计模式，它定义了一个工厂类，通过这个工厂类可以创建不同类型的对象。简单工厂模式的主要目的是将对象的创建逻辑集中在一个地方，简化客户端的代码，使得…...

编程日记 2024/8/22 23:08:51

Vue | Vue 中的 refInForde 用法

refInFor：如果你在渲染函数中给多个元素都应用了相同的 ref 名，那么 $refs.myRef 会变成一个数组。 vue中的refInFor属性是Vue框架中用于在循环渲染的元素上设置引用的一种方式。‌ 在Vue中，‌ref属性通常用于给元素或子组件注册引用信息&am…...

编程日记 2024/8/22 23:05:41

【原创】java+swing+mysql房屋租赁管理系统设计与实现

个人主页：程序员杨工个人简介：从事软件开发多年，前后端均有涉猎，具有丰富的开发经验博客内容：全栈开发，分享Java、Python、Php、小程序、前后端、数据库经验和实战文末有本人名片，希望和大家…...

编程日记 2024/8/22 23:02:38

Django 中render、redirect 和 HttpResponse的区别

在 Python 的 Web 框架 Django 中，render, redirect 和 HttpResponse 是用于处理 HTTP 响应的不同函数，它们各自有不同的用途： HttpResponse： HttpResponse 是 Django 中最基本的响应对象，用于返回给客户端的 HTTP 响应…...

编程日记 2024/8/22 22:59:34

CRYPTO 2020

分类文章编号安全模型1-6公钥加密，功能加密，见证加密7-12后量子密码13-20密码分析21-31最佳论文32-34多方安全计算35-49真实应用50-55零知识证明56-62格和相关难题63-68泄露和外包加密69-74非交互式零知识证明，共识和延迟函数75-79构建80-85Security Models 1. Handling Ad…...

编程日记 2024/8/22 22:58:33

java 函数接口Consumer简介与示例【函数式编程】【Stream】

Java 8 中的消费者接口Consumer 是一个函数接口，它可以接受一个泛型类型参数，它属于java.util.function包。我们来看看Java函数接口库中的定义： FunctionalInterface public interface Consumer<T> {/*** Performs this operation o…...

编程日记 2024/8/22 22:54:29

黑神话：悟空-配置推荐

显卡推荐（按类别整理） 1. GTX 10系列、GTX 16系列： 如果希望体验光线追踪，建议根据预算升级到RTX 40系列显卡。对于1080p分辨率，至少需要RTX 4060才能流畅运行。 2. RTX 20系列： RTX 2060、RTX 2070&#…...

编程日记 2024/8/22 22:53:27

Android14 蓝牙设备类型修改

Android14 蓝牙设备类型设置修改设置文章目录 Android14 蓝牙设备类型设置修改设置一、前言二、修改蓝牙设备类型1、蓝牙设备类型和对应的属性2、Debug设备设置和获取蓝牙设备类型3、系统源码中设置蓝牙设备类型4、Java代码中设置蓝牙prop属性可行吗？ 三、其他1、A…...

编程日记 2024/8/22 22:50:25

vue3 语法糖＜script setup＞

在 Vue 3 中，<script setup>是一种新的语法糖，它极大地简化了组件的编写方式。 <script setup> 是在单文件组件 (SFC) 中使用组合式 API 的编译时语法糖。当同时使用 SFC 与组合式 API 时该语法是默认推荐。基本概念简洁的语法&#xf…...

编程日记 2024/8/22 22:47:22

微服务设计原则——高性能：异步与并发

文章目录 1.异步1.1 调用异步1.2 流程异步1.3 数据流异步1.4 小结 2.并发2.1 请求并发2.2 冗余请求2.3 小结参考文献 1.异步对于处理耗时长的任务，如果采用同步等待的方式，会严重降低系统的吞吐量，可以采用异步化进行解决。异步&#xf…...

编程日记 2024/8/22 22:46:21

机器学习——决策树，朴素贝叶斯

一.决策树决策树中的基尼系数（Gini Index）是用于衡量数据集中不纯度（或混杂度）的指标。基尼系数的取值范围在0到0.5之间，其中0表示数据完全纯（同一类别），0.5表示数据完全混杂。基…...

编程日记 2024/8/22 22:44:19

C语言基础（十）

编译预处理命令： 预编译命令在C语言中用于在编译前进行一些特定的处理和控制，帮助程序员更灵活地管理源代码和控制编译过程。 C语言常用的预编译命令： #include：用于包含头文件，将另一个文件的内容插入到当前文件中…...

编程日记 2024/8/22 22:43:18

单片机开发者如何通过Taotoken调用大模型API优化代码注释

🚀 告别海外账号与网络限制！稳定直连全球优质大模型，限时半价接入中。 👉 点击领取海量免费额度单片机开发者如何通过Taotoken调用大模型API优化代码注释对于单片机开发者而言，编写清晰、准确的代码注释是提升项目可…...

编程新知 2026/5/12 16:44:34

从找石油到防灾害：地震勘探技术如何跨界守护城市安全？

地震勘探技术的跨界革命：从油气勘探到城市安全守护者上世纪20年代，当第一批地球物理学家尝试用炸药激发地震波来寻找石油时，他们或许不会想到，这项技术会在百年后成为保护现代城市安全的"透视眼"。传统的地震勘探技术…...

编程新知 2026/5/12 16:34:21

LeRobot：开源机器人学习的终极指南 - 从零到真实世界的AI机器人控制

LeRobot：开源机器人学习的终极指南 - 从零到真实世界的AI机器人控制【免费下载链接】lerobot 🤗 LeRobot: Making AI for Robotics more accessible with end-to-end learning 项目地址: https://gitcode.com/GitHub_Trending/le/lerobot LeRobo…...

编程新知 2026/5/12 16:28:14

SIGTRAN协议：电信网络IP化的关键技术解析

1. SIGTRAN：下一代电信网络的信令传输基石2003年全球电信业寒冬中，一个技术决策正在悄然改变行业格局。当运营商们紧缩资本开支时，AT&T、Verizon等巨头却不约而同地加大了对IP网络的投入。这背后隐藏着一个关键技术转折——传统TDM网络向…...

编程新知 2026/5/12 15:37:48

MODCAR：一种高效并发工业通信协议

什么是 MODCAR？MODCAR 是一个面向工业现场总线与以太网的并发通信协议。它的名字由两部分组成：MOD —— 致敬经典的 Modbus 协议，继承了其功能码、寄存器/位操作等易用特性。CAR —— Concurrent Access & Response（并发访问与…...

编程新知 2026/5/12 14:32:03

终极ComfyUI视频插件指南：从零开始构建AI视频生成工作流

终极ComfyUI视频插件指南：从零开始构建AI视频生成工作流【免费下载链接】ComfyUI-WanVideoWrapper 项目地址: https://gitcode.com/GitHub_Trending/co/ComfyUI-WanVideoWrapper 你是否曾梦想过让静态图片“活”起来，或者让文字描述直接变成生动…...

编程新知 2026/5/12 14:05:33

从龟速到极速：如何用trackerslist项目彻底解决BT下载瓶颈

从龟速到极速：如何用trackerslist项目彻底解决BT下载瓶颈【免费下载链接】trackerslist Updated list of public BitTorrent trackers 项目地址: https://gitcode.com/GitHub_Trending/tr/trackerslist 你是否曾经面对BT下载时那令人沮丧的进度条&#xff1…...

编程新知 2026/5/12 9:55:07