news 2026/7/13 17:01:52

Vue3.x核心技术与实战(八)

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
Vue3.x核心技术与实战(八)

一、为什么要学 Vue3?

1.1 Vue3 的优势

1.2 Vue2 选项式 API VS Vue3 组合式 API

1.3 Vue3 组合式 API VS Vue2 选项式 API

需求:点击按钮,让数字+1

二、用 create-vue 搭建 Vue3 项目

2.1 认识 create-vue

create-vue是Vue官方新的脚手架工具,底层切换到了vite(下一代构建工具),为开发提供极速响应


 

2.2 使用 create-vue 创建项目

1. 前提环境条件

  • 已安装 16.0 或更高版本的 Node.js
  • node -v

2. 创建一个 Vue 应用

  • npm init vue@latest
  • 这一指令将会安装并执行 create-vue


① Shift + 鼠标右键 => 打开 PowerShell 窗口

② 准备工作:确认 node 版本

③ 创建一个 Vue 应用

2.3 熟悉项目目录和关键文件

关键文件:

1. vite.config.js - 项目的配置文件基于vite的配置

2. package.json - 项目包文件核心依赖项变成了Vue3.x 和 vite

3. main.js - 入口文件createApp 函数创建应用实例

4. app.vue - 根组件SFC单文件组件 script - template - style

  • 变化一:脚本 script 和 模板 template 顺序调整
  • 变化二:模板 template 不再要求唯一根元素
  • 变化三:脚本 script 添加 setup 标识支持 组合式 API

5. index.html - 单页入口提供 id 为 app 的挂载点


 


Vue3 项目中需要暂时禁用一下Vue2 插件 Vetur

Vue3 项目中 下载插件 volar

三、组合式 API

3.1 setup 选项

3.1.1 setup 选项的写法和执行时机

setup 执行时期:

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/7/13 17:00:41

Vibe Coding 项目越做越多,网址和作品该怎么管理?

Vibe Coding 让做产品变得越来越快。一个想法,从提出需求、生成代码到部署上线,可能只需要几个小时。个人开发者、产品经理、设计师,甚至没有系统学过编程的普通用户,也开始拥有自己制作的网站、小工具、数据看板和产品原型。但项…

作者头像 李华
网站建设 2026/7/13 16:59:46

Tmax-27B-MLX-6bit工具调用完全指南:掌握Qwen3.5 XML格式的AI助手

Tmax-27B-MLX-6bit工具调用完全指南:掌握Qwen3.5 XML格式的AI助手 【免费下载链接】Tmax-27B-MLX-6bit 项目地址: https://ai.gitcode.com/hf_mirrors/mlx-community/Tmax-27B-MLX-6bit Tmax-27B-MLX-6bit是一款基于MLX框架的27B参数AI模型,专门…

作者头像 李华
网站建设 2026/7/13 16:58:32

3大核心功能:重新定义AI视频创作体验

3大核心功能:重新定义AI视频创作体验 【免费下载链接】Open-Generative-AI Unrestricted Open-source alternative to AI video platforms — Free AI image & video generation studio with 200 models (Flux, Midjourney, Kling, Sora, Veo). No content filt…

作者头像 李华
网站建设 2026/7/13 16:58:04

3分钟快速上手:用notepad--打造你的免费跨平台文本编辑利器

3分钟快速上手:用notepad--打造你的免费跨平台文本编辑利器 【免费下载链接】notepad-- 一个支持windows/linux/mac的文本编辑器,目标是做中国人自己的编辑器,来自中国。 项目地址: https://gitcode.com/GitHub_Trending/no/notepad-- …

作者头像 李华