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

【1.0】vue3的创建

news 2026/2/7 17:16:02

【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

接口测试中缓存处理策略

在接口测试中，缓存处理策略是一个关键环节，直接影响测试结果的准确性和可靠性。合理的缓存处理策略能够确保测试环境的一致性，避免因缓存数据导致的测试偏差。以下是接口测试中常见的缓存处理策略及其详细说明： 一、缓存处理的核…...

编程新知 2026/2/6 20:34:30

第19节 Node.js Express 框架

Express 是一个为Node.js设计的web开发框架，它基于nodejs平台。 Express 简介 Express是一个简洁而灵活的node.js Web应用框架, 提供了一系列强大特性帮助你创建各种Web应用，和丰富的HTTP工具。使用Express可以快速地搭建一个完整功能的网站。 Expre…...

编程新知 2026/2/5 3:48:44

JavaSec-RCE

简介 RCE(Remote Code Execution)，可以分为:命令注入(Command Injection)、代码注入(Code Injection) 代码注入 1.漏洞场景：Groovy代码注入 Groovy是一种基于JVM的动态语言，语法简洁，支持闭包、动态类型和Java互操作性&#xff0c…...

编程新知 2026/2/6 2:47:15

装饰模式（Decorator Pattern）重构java邮件发奖系统实战

前言现在我们有个如下的需求，设计一个邮件发奖的小系统， 需求 1.数据验证 → 2. 敏感信息加密 → 3. 日志记录 → 4. 实际发送邮件装饰器模式（Decorator Pattern）允许向一个现有的对象添加新的功能，同时又不改变其…...

编程新知 2026/2/1 21:34:47

DockerHub与私有镜像仓库在容器化中的应用与管理

哈喽，大家好，我是左手python！ Docker Hub的应用与管理 Docker Hub的基本概念与使用方法 Docker Hub是Docker官方提供的一个公共镜像仓库，用户可以在其中找到各种操作系统、软件和应用的镜像。开发者可以通过Docker Hub轻松获取所…...

编程新知 2025/10/8 10:56:25

cf2117E

原题链接：https://codeforces.com/contest/2117/problem/E 题目背景： 给定两个数组a,b，可以执行多次以下操作：选择 i (1 < i < n - 1)，并设置或，也可以在执行上述操作前执行一次删除任意和。求…...

编程新知 2026/2/4 15:29:40

Frozen-Flask ：将 Flask 应用“冻结”为静态文件

Frozen-Flask 是一个用于将 Flask 应用“冻结”为静态文件的 Python 扩展。它的核心用途是：将一个 Flask Web 应用生成成纯静态 HTML 文件，从而可以部署到静态网站托管服务上，如 GitHub Pages、Netlify 或任何支持静态文件的网站服务器。 &am…...

编程新知 2025/12/5 20:57:13