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

【1.0】vue3的创建

news 2026/5/12 8:13:06

【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

基于GitHub Actions打造自动化工作流：测试、构建、部署

从手工到自动化的测试交付变革在软件研发流程中，测试从来不是孤立环节。每一次代码提交，都可能触发一轮新的构建、部署与验证。传统模式下，测试人员往往需要等待开发手动打包、手动部署到测试环境，再通过人工触发或定时执行测试脚…...

编程新知 2026/5/12 8:05:11

Armv8/v9架构中的A64系统指令与预测限制机制详解

1. A64系统指令概述在Armv8/v9架构中，A64系统指令(System Instructions)是处理器特权级别操作的核心机制。这些指令运行在EL1及以上异常级别，用于控制系统寄存器、内存管理单元、虚拟化扩展和安全状态等关键功能。与常规数据处理指令不同，系统…...

编程新知 2026/5/12 6:18:39

想让你的Linux终端也下起‘代码雨’？手把手教你安装配置cmatrix屏保（CentOS/Ubuntu双系统保姆级教程）

让你的Linux终端下起"代码雨"：cmatrix屏保终极玩法指南第一次在《黑客帝国》里看到绿色字符如瀑布般倾泻而下的场景时，那种科技感与未来感是否让你心驰神往？现在，你完全可以在自己的Linux终端里复刻这一经典画面。cmat…...

编程新知 2026/5/12 6:06:26

Flutter for OpenHarmony学习资料搜索与PDF阅读器技术文章

Flutter for OpenHarmony学习资料搜索与PDF阅读器技术文章欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net 🚀 Flutter for OpenHarmony 学习资料搜索与 PDF 阅读器开发实战大家好！今天带大家从零开始打造一款专…...

编程新知 2026/5/12 3:47:44

从“共和国之辉”到AI原生应用：一个关于“哥布林”诞生的技术启示录

从“共和国之辉”到AI原生应用：一个关于“哥布林”诞生的技术启示录 2025年7月，一篇名为《Where the goblins came from》的文章在Hacker News上引发了超过710票的热议。当大多数技术评论者将目光聚焦于AI模型的最新突破时，这篇来自OpenAI的文…...

编程新知 2026/5/12 3:14:11

uniapp发开微信小程序处理手机物理按键逻辑

注意:wx.enableAlertBeforeUnload 需要微信小程序基础库 2.32.3 及以上版本如果版本不够，会发 fail 回调，在onLoad里面使用wx.enableAlertBeforeUnload开启物理返回键拦截在onUnload里面处理确认逻辑,wx.disableAlertBeforeUnload关闭物理返回键拦截监听…...

编程新知 2026/5/12 2:47:19