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

【1.0】vue3的创建

news 2026/3/28 6:16:38

【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

5分钟搞定Meson交叉编译：手把手教你配置ARM64目标平台（附DPDK实例）

Meson交叉编译实战指南：从零构建ARM64平台的DPDK应用第一次接触交叉编译时，我盯着满屏的工具链路径和架构参数发愣——这简直像在解译外星密码。直到发现Meson的交叉编译配置文件，才发现原来构建跨平台应用可以如此优雅。本文将带你用Meson这…...

编程新知 2026/3/28 6:06:28

Minica 源码解读：深入理解证书生成的核心算法【免费下载链接】minica minica is a small, simple CA intended for use in situations where the CA operator also operates each host where a certificate will be used. 项目地址: https://gitcode.com/gh_mirr…...

编程新知 2026/3/28 5:52:12

HunyuanVideo-Foley私有部署全攻略：RTX4090D专用优化，轻松搭建AI视频生成环境

HunyuanVideo-Foley私有部署全攻略：RTX4090D专用优化，轻松搭建AI视频生成环境在AI视频生成领域，最令人沮丧的莫过于看着别人的演示视频效果惊艳，而自己却卡在环境配置和模型部署的泥潭中。从CUDA版本冲突到显存不足崩溃&#xf…...

编程新知 2026/3/28 5:24:03

ImageSearch本地图片搜索引擎：从技术原理到实战应用

ImageSearch本地图片搜索引擎：从技术原理到实战应用【免费下载链接】ImageSearch 基于.NET8的本地硬盘千万级图库以图搜图案例Demo和图片exif信息移除小工具分享项目地址: https://gitcode.com/gh_mirrors/im/ImageSearch 价值定位：重新定义本地…...

编程新知 2026/3/28 4:54:06

新手必看：Carsim与Simulink联合仿真搭建AEB系统的5个关键步骤

从零搭建AEB系统：Carsim与Simulink联合仿真实战指南在自动驾驶技术快速发展的今天，自动紧急制动系统（AEB）已成为车辆安全领域的重要研究方向。对于车辆工程专业的学生和自动驾驶初学者而言，掌握Carsim与Simulink的联合…...

编程新知 2026/3/28 4:26:00

揭秘联发科设备Bootloader解锁：mtkclient-gui实战指南与深度解析

揭秘联发科设备Bootloader解锁：mtkclient-gui实战指南与深度解析【免费下载链接】mtkclient-gui GUI tool for unlocking bootloader and bypassing authorization on Mediatek devices (Not maintained anymore) 项目地址: https://gitcode.com/gh_mirrors/mt/m…...

编程新知 2026/3/28 3:53:48

Python原生AOT编译到底稳不稳？我们压测了7类生产负载：高并发API、实时流处理、边缘AI推理——结果出乎意料（附完整benchmark报告）

第一章：Python原生AOT编译方案2026实战案例全景概览Python原生AOT（Ahead-of-Time）编译在2026年已进入工程化落地深水区，主流方案如Nuitka 2.0、PyO3 Rust AOT Pipeline、以及新兴的CPython官方实验分支cpython-aot，均…...

编程新知 2026/3/28 3:21:20

DBA_RECYCLEBIN purge指定日期前的表

SummaryHow to purge DBA_RECYCLBIN for objects older than x days/minutes? or do we have RECYCLEBIN RETENTION feature or truncate recyclebin ?--------------------------------------------------------------------------------------DBA_RECYCLEBIN has a column …...

编程新知 2026/3/28 1:25:43