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

前言

        前端从这里开始,本文将介绍如何使用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。

 

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/80476.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

make和makefile的使用,以及写一个简单的进度条程序

1.自动化构建-make/makefile 1.1 背景 一个工程文件中的文件不计其数,其按类型、功能、模块放在若干目录中,makefile定义了一系列规则来指定哪些文件需要先编译,哪些文件需要后编译,哪些文件需要重新编译,甚至于过呢…

数据结构中的栈与队列:原理、实现与应用

前言:栈和队列是计算机科学中两种最基础的线性数据结构,它们的独特操作规则和广泛的应用场景使其成为每一位开发者必须掌握的核心知识。本文将通过生活案例、代码实现和实际应用场景,带您深入理解这两种数据结构的精髓。 1.栈(Sta…

如何选择自己喜欢的cms

选择内容管理系统cms what is cms1.whatcms.org2.IsItWP.com4.Wappalyzer5.https://builtwith.com/6.https://w3techs.com/7. https://www.netcraft.com/8.onewebtool.com如何在不使用 CMS 检测器的情况下手动检测 CMS 结论 在开始构建自己的数字足迹之前,大多数人会…

SDC命令详解:使用all_outputs命令进行查询

相关阅读 SDC命令详解https://blog.csdn.net/weixin_45791458/category_12931432.html all_outputs命令用于创建一个输出端口对象集合,关于设计对象和集合的更详细介绍,可以参考下面的博客。 Synopsys:设计对象https://chenzhang.blog.csdn…

vue 中的ref

vue 中的ref vue 中的ref 1. ​​ref​​ ** 的基本作用** 在 Vue 中&#xff0c;ref 是用来获取 DOM 元素或者组件实例的一种方式。对于 <el-form> 组件&#xff0c;通过 ref 可以获取到该表单组件的实例&#xff0c;进而调用表单组件提供的各种方法和访问其属性。 …

数据库版本控制工具--flyway

一. 什么是Flyway Flyway 是一款开源的数据库迁移工具。它采用简单直观的方式管理数据库变更&#xff0c;通过版本化的迁移脚本确保数据库结构的一致性和可重复性。无论是开发环境、测试环境还是生产环境&#xff0c;Flyway 都能确保数据库变更按照预期顺序执行&#xff0c;避…

C++使用PoDoFo库处理PDF文件

&#x1f4da; PoDoFo 简介 PoDoFo 是一个用 C 编写的自由开源库&#xff0c;专用于 读取、写入和操作 PDF 文件。它适用于需要程序化处理 PDF 文件的应用程序&#xff0c;比如批量生成、修改、合并、提取元数据、绘图等。 &#x1f31f; 核心特点 特性说明&#x1f4c4; P…

论文分享➲ arXiv2025 | TTRL: Test-Time Reinforcement Learning

TTRL: Test-Time Reinforcement Learning TTRL&#xff1a;测试时强化学习 https://github.com/PRIME-RL/TTRL &#x1f4d6;导读&#xff1a;本篇博客有&#x1f9a5;精读版、&#x1f407;速读版及&#x1f914;思考三部分&#xff1b;精读版是全文的翻译&#xff0c;篇幅较…

dify插件接入fastmcp示例

文章目录 1. 使用python完成mcp服务1.1 准备环境&#xff08;python安装fastmcp&#xff09;1.2 mcp服务端示例代码1.3 启动mcp服务端 2. dify接入2.1 安装MCP SSE和 Agent 策略&#xff08;支持 MCP 工具&#xff09; 插件2.2 dify agent插件配置mcp:2.3 mcp服务配置&#xff…

Linux 挖矿木马排查命令清单

Linux 挖矿木马排查命令清单 1. 系统资源使用情况检查 # 查看CPU、内存使用情况 top -c# 检查CPU占用最高的进程 ps aux --sort-%cpu# 查找可疑进程名 ps -ef | grep -i miner\|cpu\|GPU\|xmr# 检查网络连接情况 lsof -i2. 可疑进程和隐藏进程检查 # 检查僵尸进程 ps -ef | …

PyTorch 中如何针对 GPU 和 TPU 使用不同的处理方式

一个简单的矩阵乘法例子来演示在 PyTorch 中如何针对 GPU 和 TPU 使用不同的处理方式。 这个例子会展示核心的区别在于如何获取和指定计算设备&#xff0c;以及&#xff08;对于 TPU&#xff09;可能需要额外的库和同步操作。 示例代码&#xff1a; import torch import tim…

自主shell命令行解释器

目标 能处理普通命令能处理内建命令 实现原理 用下面的时间轴来表示时间发生次序。时间从左向右。shell由标识为sh的方块&#xff0c;它随着时间从左向右移动。 shell从用户读入字符串“ls”。shell建立一个新的进程&#xff0c;然后等待进程中运行ls程序并等待进程结束。 …

如何在sheel中运行Spark

启动hdfs集群&#xff0c;打开hadoop100:9870&#xff0c;在wcinput目录下上传一个包含很多个单词的文本文件。 启动之后在spark-shell中写代码。 // 读取文件&#xff0c;得到RDD val rdd1 sc.textFile("hdfs://hadoop100:8020/wcinput/words.txt") // 将单词进行切…

【入门】数字走向II

描述 输入整数N&#xff0c;输出相应方阵。 输入描述 一个整数N。&#xff08; 0 < n < 10 ) 输出描述 一个方阵&#xff0c;每个数字的场宽为3。 #include <bits/stdc.h> using namespace std; int main() {int n;cin>>n;for(int in;i>1;i--){for(…

Python自动化-python基础(下)

六、带参数的装饰器 七、函数生成器 运行结果&#xff1a; 八、通过反射操作对象方法 1.添加和覆盖对象方法 2.删除对象方法 通过使用内建函数: delattr() # 删除 x.a() print("通过反射删除之后") delattr(x, "a") x.a()3 通过反射判断对象是否有指定…

重新定义高性能:Hyperlane —— Rust生态中的极速HTTP服务器

重新定义高性能&#xff1a;Hyperlane —— Rust生态中的极速HTTP服务器 &#x1f680; 为什么选择Hyperlane&#xff1f; 在追求极致性能的Web服务开发领域&#xff0c;Hyperlane 凭借其独特的Rust基因和架构设计&#xff0c;在最新基准测试中展现出令人惊艳的表现&#xff…

通俗的理解MFC消息机制

1. 消息是什么&#xff1f; 想象你家的门铃响了&#xff08;比如有人按门铃、敲门、或者有快递&#xff09;&#xff0c;这些都是“消息”。 在 MFC 中&#xff0c;消息就是系统或用户触发的各种事件&#xff0c;比如鼠标点击&#xff08;WM_LBUTTONDOWN&#xff09;、键盘输入…

腾讯开源SuperSonic:AI+BI如何重塑制造业数据分析?

目录 一、四款主流ChatBI产品 二、ChatBI应用案例与实际落地情况 三、SuperSonic底层原理 3.1、Headless BI 是什么 3.2、S2SQL 是什么 3.3、SuperSonic 平台架构 四、ChatBI应用细节深挖 五、与现有系统的集成方案 六、部署和安全 七、开源生态、可扩展性与二次开…

AI生成视频推荐

以下是一些好用的 AI 生成视频工具&#xff1a; 国内工具 可灵 &#xff1a;支持文本生成视频、图片生成视频&#xff0c;适用于广告、电影剪辑和短视频制作&#xff0c;能在 30 秒内生成 6 秒的高清视频&#xff08;1440p&#xff09;&#xff0c;目前处于免费测试阶段。 即…

OrangePi Zero 3学习笔记(Android篇)5 - usbutils编译(更新lsusb)

目录 1. Ubuntu中编译 2. AOSP编译 3. 去掉原来的配置 3. 打包 4. 验证lsusb 在Ubuntu中&#xff0c;lsusb的源代码源自usbutils。而OrangePi Zero 3中lsusb的位置可以看文件H618-Android12-Src/external/toybox/Android.bp&#xff0c; "toys/other/lsusb.c",…