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

VUE CLI - 使用VUE脚手架创建前端项目工程

news 来源：原创 2025/8/2 22:09:24

前言

前端从这里开始，本文将介绍如何使用VUE脚手架创建前端工程项目

1.预准备（编辑器和管理器）

编辑器：推荐使用Vscode，WebStorm，或者Hbuilder（适合刚开始练手使用），个人感觉上面这些编辑器都比较方便~看个人习惯吧，我使用的是WebStorm（需要破解）。
Node.JS：Vue 脚手架是基于 Node.js 的环境来运行的，它需要 Node.js 提供的运行时环境和包管理工具 npm 来进行项目的创建、依赖安装等操作。下载地址：Node.js 中文网
包管理工具npm：随 Node.js 一起安装，无需额外操作。它是 JavaScript 的默认包管理工具，能方便地安装、更新和卸载 Vue 脚手架以及项目所需的各类依赖包。使用上相对简单直接，对于一般的 Vue 项目开发完全能够满足需求。当然如果你习惯Yarn，也可以使用Yarn代替。

2.安装VUE脚手架

在Windows系统终端中，输入如下命令，进行脚手架的安装：

npm install -g @vue/cli
// 如果需要更换npm的下载源，可以先使用以下命令进行换源
npm config set registry https://registry.npmmirror.com  // 换为淘宝源
npm config get registry  // 查看淘宝镜像

使用 Vue -V，查看VUE脚手架是否安装成功，显示版本信息

3.使用脚手架创建VUE工程

在你的工程目录下，使用 vue create 【项目名】创建工程，需要注意项目名不能有大写字母。

接着界面提示你选择一个预设配置（preset），主要有以下选项：

Default ([Vue 3] babel, eslint)：使用 Vue 3 的默认配置，包含 Babel 和 ESLint。
Default ([Vue 2] babel, eslint)：使用 Vue 2 的默认配置，包含 Babel 和 ESLint。
Manually select features：手动选择功能，可以自定义项目配置。

选择第三个自定义选项，回车。接着出现下面的选项，分别代表：

Babel：JavaScript 编译工具，用于将 ES6+ 代码转换为向后兼容的 JavaScript 版本。
TypeScript：一种静态类型检查语言，编译为 JavaScript。
Progressive Web App (PWA) Support：为项目添加 PWA 支持，使网页应用可以像原生应用一样工作。
Router：Vue 的官方路由管理器，用于构建单页应用（SPA）。
Vuex：Vue 的状态管理库，用于管理应用的状态。（不过现在一般使用Pinia~）
CSS Pre-processors：CSS 预处理器（如 Sass、Less 等）。
Linter / Formatter：代码检查和格式化工具，用于保持代码风格一致。
Unit Testing：单元测试工具，用于测试代码的各个部分。
E2E Testing：端到端测试工具，用于测试整个应用流程。

依据你的项目需要选择需要的部分，使用键盘上的 空格键 选择或取消选择功能。按 A 可以全选所有功能。选择完之后，直接回车。

选择你的VUE版本，是VUE2还是VUE3

接着会跳出几个问题，是否使用类组件语法，是否使用TS语言，是否启用路由的历史模式（history mode），使 URL 更美观（去掉 #）。最后选择错误检查和代码风格规范，如果你希望代码自动格式化且减少风格争议，建议选择 ESLint + Prettier。

VUE CLI - 使用VUE脚手架创建前端项目工程

前言前端从这里开始，本文将介绍如何使用VUE脚手架创建前端工程项目 1.预准备（编辑器和管理器） 编辑器：推荐使用Vscode，WebStorm，或者Hbuilder（适合刚开始练手使用），个…...

编程日记 2025/8/2 22:09:24

Nginx高级配置

目录一.网页的状态页二. Nginx第三方模块 2.1 echo模块三. 变量 3.1 内置变量 3.2 自定义变量四. 自定义访问日志 (优化) 4.1 自定义访问日志的格式 4.2 自定义json 格式日志五. Nginx压缩功能六 . HTTPS 功能 6.1 https概述 6.2 配置实例-----自签名证…...

编程日记 2025/8/1 11:21:28

Docker镜像搬运工：深入解析export与import，实现容器环境无缝迁移！

Docker作为现代开发运维的利器，其镜像和容器的管理技巧直接影响效率。当我们需要跨环境迁移容器状态时，docker export和docker import这对组合命令就能大显身手。本文带你彻底搞懂它们的核心逻辑、使用场景及避坑指南！ 一、Docker export&…...

编程日记 2025/7/31 22:14:12

数字孪生实战笔记（1）数字孪生的含义、应用及技术体系

一、含义数字孪生（Digital Twin）是一种通过数字化模型在虚拟世界中实时映射和模拟物理实体、系统或过程的技术。它的核心目的是通过对现实对象的建模、感知、分析和预测，实现对物理世界的全面感知、智能控制和优化决策。数字孪生实体对象 …...

编程日记 2025/8/2 16:06:58

计算机网络 4-2-2 网络层（IPv4）

2.7 网络地址转换NAT 引入端口号：IP地址端口号→一个特定的进程，（不同主机可能存在相同端口号） 网络层实现了“主机到主机”的通信。网络层在IP数据报的首部，指明源IP地址、目的IP地址传输层实现了“端到端” &#…...

编程日记 2025/7/29 18:33:50

第二个简单的SpringBoot和Vue前后端全栈的todoapp案例

项目源于哔哩哔哩，按视频手敲了一下，补充上代码和一些细节。全栈项目实践：1小时快速入门SpringBootvue3element-plus_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV1LH4y1w7Nd/?spm_id_from333.1387.favlist.content.click&vd_…...

编程日记 2025/8/1 6:05:25

探秘 Canva AI 图像生成器：重塑设计创作新范式

Canva 凭借简洁易用的界面和海量模板资源，早已成为设计师和普通用户的心头好。而 Canva AI 图像生成器的推出，更是为设计领域带来了一场深刻变革，以智能化的手段重塑了图像创作的方式与边界。技术内核：AI 如何驱动图像生成 Can…...

编程日记 2025/7/31 22:57:06

栈应用：辅助站（c++）

干货今天讲讲最大辅助栈和最小辅助栈主栈进入元素的时候最大辅助栈:保证新元素大于等于(辅助栈)顶的时候，再进入辅助栈这样就能保证最大辅助栈的栈顶元素是主栈中的最大值主栈出栈的时候最大辅助栈:主栈出栈元素如果等于(辅助栈)的栈顶元素，再…...

编程日记 2025/8/1 10:00:34

AI时代的数据可视化：未来已来

你有没有想过，数据可视化在未来会变成什么样？随着人工智能（AI）的飞速发展，数据可视化已经不再是简单的图表和图形，而是一个充满无限可能的智能领域。AI时代的可视化不仅能自动解读数据，还能预测…...

编程日记 2025/7/30 19:34:15

常见音频主控芯片以及相关厂家总结

音频主控芯片是音频设备（如蓝牙耳机、音箱、功放等）的核心组件，负责音频信号的解码、编码、处理和传输。以下是常见的音频主控芯片及其相关厂家，按应用领域分类： 蓝牙音频芯片主要用于无线耳机、音箱等设备&#xff0…...

编程日记 2025/8/1 10:49:13

湖仓一体架构在金融典型数据分析场景中的实践

在数字经济与金融科技深度融合的今天，数据已成为金融机构的核心战略资产。然而，传统数据架构面临着三大困局，制约着金融机构数据价值的充分释放。一、需求驱动更多银行数据分析场景金融机构，特别是银行业，面临着双重…...

编程日记 2025/7/29 18:33:34

VBA —— 学习Day5

子程序与函数子程序：实现特定功能的程序代码块子程序语法： [修饰符] Sub 子程序名称([参数1，参数2，参数3]) 代码块 End Sub 子程序如何调用： 1 . 子程序名 [参数1，参数2，...] 2. Cal…...

编程日记 2025/8/2 13:53:04

Flink 实时数据一致性与 Exactly-Once 语义保障实战

在构建企业级实时数仓的过程中，“数据一致性” 是保障指标准确性的核心能力，尤其是在金融、电商、医疗等对数据敏感度极高的场景中。Flink 作为流批一体的实时计算引擎，其内建的 Exactly-Once 语义为我们提供了强有力的保障机制。本篇将围绕如何实现端到端的数据一致性、如何…...

编程日记 2025/7/29 13:53:38

Java云原生到底是啥，有哪些技术

☁️ Java云原生：程序员の修仙飞升指南（附渡劫技巧） 一、修仙世界观：传统程序 vs 云原生程序 🏡 传统Java程序（老宅院） 特点：单体大瓦房、扩建要拆墙（耦合度高&#xf…...

编程日记 2025/7/31 7:47:45

IPM IMI111T-026H 高效风扇控制板

概述： REF-MHA50WIMI111T 是一款专为风扇驱动设计的参考开发板，搭载了英飞凌的IMI111T-026H iMOTION™智能功率模块(IPM)。这个模块集成了运动控制引擎(MCE)、三相栅极驱动器和基于IGBT的功率级，全部封装在一个紧凑的DSO22封装中。REF-MHA50…...

编程日记 2025/7/29 18:33:23

JavaScript基础-局部作用域

在JavaScript中，理解不同种类的作用域是掌握这门语言的关键之一。作用域决定了变量和函数的可访问性（即可见性和生命周期）。与全局作用域相对应的是局部作用域，它限制了变量和函数只能在其定义的特定范围内被访问。本文将深入探讨…...

编程日记 2025/7/30 5:39:13

[特殊字符]Meilisearch：AI驱动的现代搜索引擎

前言大家好，我是MAI麦造！ 上文介绍一了Manticore Search 这款轻量级的搜索引擎，这次又有了新的发现！传送门： Elasticsearch太重？它的超轻量的替代品找到了！ 这是一个让我超级兴奋的AI搜索引…...

编程日记 2025/8/2 2:26:20

K8S Svc Port-forward 访问方式

在 Kubernetes 中，kubectl port-forward 是一种本地与集群内资源（Pod/Service）建立临时网络隧道的访问方式，无需暴露服务到公网，适合开发调试、临时访问等场景。以下是详细使用方法及注意事项： 1. 基础用…...

编程日记 2025/7/29 18:33:13

SD06_前后端分离项目部署流程(采用Nginx)

本文档详细描述了如何在Ubuntu 20.04服务器上从零开始部署Tlias前后端分离系统。Tlias系统由Spring Boot后端（tlias-web-management）和Vue前端（vue-tlias-management）组成。目录环境准备安装MySQL数据库部署后端项目部署前端项…...

编程日记 2025/8/1 19:42:34

计算机网络：家庭路由器WiFi信号的发射和手机终端接收信号原理？

WiFi路由器与手机之间的信号传输涉及多个技术层面的协作，以下是其工作原理的详细步骤：一、数据封装与协议处理应用层数据生成用户操作（如浏览网页、视频播放）产生数据包，经TCP/IP协议栈逐层封装，添加IP地址（网络层）和MAC地址（数据链路层）。协议封装数据包被封装…...

编程日记 2025/8/2 22:09:21

【Redis】string

文章目录 string 字符串常用命令设置和获取setgetmget & mset 计数操作incr & incrbydecr & decrbyincrbyfloat 字符串操作appendstrlengetrangesetrange string 字符串关于 Redis 的字符串，有几点需要注意 Redis 所有的 key 的类型都是字符串类型va…...

编程日记 2025/7/29 7:01:09

vue3的响应式设计原理

Vue 3 的响应式设计是其核心特性之一，依赖于 Proxy 和依赖收集机制，相比 Vue 2 的 Object.defineProperty，Vue 3 的响应式系统更加高效、灵活且易于维护。以下是 Vue 3 响应式设计的核心原理： 一、核心机制概览使用 Proxy 实现…...

编程日记 2025/8/2 22:09:23

学习黑客5 分钟深入浅出理解Linux Logs [特殊字符]

5 分钟深入浅出理解Linux Logs 📝 大家好！今天我们将探索Linux系统中的日志机制——这是系统管理和安全分析的重要组成部分。在网络安全学习特别是TryHackMe平台上的挑战中，理解和分析日志是发现入侵痕迹、追踪攻击者行为和收集证据的关键技…...

编程日记 2025/7/31 4:46:58

【Docker系列】docker inspect查看容器部署位置

💝💝💝欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。推荐:kwan 的首页,持续学…...

编程日记 2025/7/31 23:46:05

journalctl使用

journalctl 可以查看很多服务的日志，比如 docker，ollama 等。 1. 查看 xx 服务的最新日志（实时滚动） sudo journalctl -u docker -f -f 参数表示跟随（follow），会持续输出最新日志&#xff0…...

编程日记 2025/7/31 8:08:58

Satori：元动作 + 内建搜索机制，实现超级推理能力

Satori：元动作内建搜索机制，实现超级推理能力论文大纲一、背景：LLM 推理增强的三类方法1. 基于大规模监督微调（SFT）的推理增强2. 借助外部机制在推理时进行搜索 (RLHF / 多模型 / 工具)3. 现有局限性总结二、Sator…...

编程日记 2025/8/1 14:23:58

基于语言模型的依存关系分句和主题变换检测（基于词频和句段得分）的意思

🧠 一、基于语言模型的依存关系分句（Dependency-based Segmentation） ✅ 说人话： 用语言模型判断句子里的语法结构（谁依赖谁），找到合理的“断点”，把太长的句子拆成语法上更自然的小…...

编程日记 2025/8/1 13:38:05

计算机体系结构一些笔记

1、异构计算：CPU也像人类社会一样存在专业分工。异构计算（Heterogeneous Computing）是指不同类型的计算单元合作完成计算任务。每个计算单元采用不同的架构，分别擅长处理某一种类型的计算任务。整个计算任务分解为小的单位&…...

编程日记 2025/8/1 17:30:25

Go语言——goflow工作流使用

一、引入依赖这个很坑，他不允许连接带密码的redis，只能使用不带密码的redis，要带密码的话得自己改一下源代码，无语 go get github.com/s8sg/goflow二、画出我们的工作流程三、编写代码 package mainimport ("encoding/j…...

编程日记 2025/7/31 19:46:28

论文标题 Rational Retrieval Acts: Leveraging Pragmatic Reasoning to Improve Sparse Retrieval 论文地址 https://arxiv.org/pdf/2505.03676 代码地址 https://github.com/arthur-75/Rational-Retrieval-Acts 作者背景巴黎萨克雷大学，索邦大学&#xff…...

编程日记 2025/7/29 16:25:16

RV1126 ROS2环境交叉编译及部署（基于官方Docker）

RV1126 ROS2环境交叉编译及部署（基于官方Docker） 0 前言1 SDK源码更新1.1 启动Docker容器1.2 更新SDK源码1.3 SDK更新问题2 ROS2编译配置3 Buildroot rootfs编译ROS2的依赖包3.1 编译问题解决4 使用Docker交叉编译ROS24.1 准备Linux(Ubuntu) PC机的依赖环境4.1.1 Ubuntu PC机…...

编程日记 2025/8/1 4:49:47

每日脚本学习5.10 - XOR脚本

xor运算的简介异或就是对于二进制的数据可以进行同0异1 简单的演示 ： 结果是这个就是异或异或的作用 1、比较两数是否相等 2、可以进行加密加密就是需要key 明文 :0b010110 key : 0b1010001 这个时候就能进行加密明文 ^ key密文还有这个加密比…...

编程日记 2025/7/29 5:35:59

深圳SMT贴片加工厂制造流程解析

内容概要作为大湾区电子制造产业链的重要节点，深圳SMT贴片加工厂凭借精密的生产体系与技术创新，构建了涵盖12道核心工序的标准化流程。从PCB基板的来料检验开始，通过全自动贴片机的高精度元件定位、SPI三维锡膏检测、智能温控回流焊接等关键…...

编程日记 2025/7/29 16:25:11

英语六级---2019.6 卷二仔细阅读2

文章 Officials at the White House announced a new space policy focused on managing the increasing number of satellites that companies and governments are launching into space. Space Policy Directive-3 lays out general guidelines for the United States to mi…...

编程日记 2025/8/1 15:29:50

前言

1.预准备（编辑器和管理器）

2.安装VUE脚手架

3.使用脚手架创建VUE工程

相关文章：