vue 连载软件大陆 vue之新手村,vue创建运行指导(如:vue脚手架,创建启动项目,配置等)

news2024/10/7 20:33:55

第一章

’vue功法启动‘

宇宙之间,开天辟地,从无到有,有一颗蔚蓝色的星球,名为软件大陆,如今大陆上有着众多老牌家族势力的诞生,如:c家族、c++家族、java家族、.net家族、等,
而我们今天要说的是 HTML家族分支,vue家族,
曾经为老牌实力的vue家族,因曾经的一次大战后,就此陨落,族长拼死保族人方得以在H市的某处苟延残喘,而我们的主角小V从小便习得十八般武艺,如今更是得到了现今族长的亲睐,教他祖传vue功法习得
小V,小V你快进来,族长喊道,此时屋外便响起匆匆脚步声,兹拉,门被推开,映入眼帘的便是我们的主人公小V,小V急忙应答到,族长有何吩咐,族长说道:如今你已16岁有余,现在到何种境界了,让我来试探一二,紧接着,族长便抓住了小V的手腕,随之一股体内真气便进入了小V的身体,过会后,族长陡然大喜,哈哈哈哈 天不亡我vue家族呀,电之气一段,在这小小的H市内 竟然有如此天才,这真是不亡我vue家啊,竟然你有如此天赋,我便将我全部绝学传授于你,希望如此功法在你身上发扬光大,小V说道:谢谢族长我此生一定会带家族走上大陆的,族长说到 ,现在我就传与你黄阶高级技能,次功法能助你日后有着不小成就,此时族长手中陡然出现了一本 封面为 Node.js 的黄阶高级技能,族长说道,我们家族若想成就日后事业,Node.js次技能必不可少,此技能搭载酷睿系列,堪称利器,我们家族其他生态技能也依托于此,首先你要安装次技能

安装 Node.js:Vue 脚手架需要依赖 Node.js 运行环境。在您的计算机上安装最新版本的 Node.js。您可以从官方网站 Node.js虚空链接 下载适合您操作系统的安装包,并按照安装向导进行安装。

安装 Vue CLI:Vue CLI 是 Vue 的脚手架工具,通过它可以快速创建和管理 Vue 项目。打开命令行工具(如终端或命令提示符),运行以下命令来全局安装 Vue CLI:

npm install -g @vue/cli

自此小V习会了Node.js的基础篇章,得以可以将vue家族基础功法运用,此时族长又将vue基础功法掏出说到,我们这套技能需要搭载酷睿系列+Node.js+Vue基础技能方可运用自如,此时族长大喝一声,小辈看好了,我只教一次,

创建新项目:在命令行中,进入您想要创建项目的目录,然后运行以下命令来创建一个新的 Vue 项目:

vue create my-project

在这里,my-project 是您项目的名称,您可以替换成您自己喜欢的名称。在创建项目时,Vue CLI 会提示您选择一些配置选项,例如包管理工具、特性插件等。根据您的需求进行选择或直接按回车键使用默认设置。

族长说道 创建过后会出现以下选项,

在这里插入图片描述
次3本功法对应这,VUE3,VUE2,以及自选功法
而我今天传授于你的是自选功法,次功法变换莫测,可塑造性极强,是你日后的一张王牌,

在这里插入图片描述
族长又说道,次功法有很多种搭配组合的方法,会让你在日后的道路更加规范,走的更高 ,

在使用 Vue CLI 创建项目时,会出现一些自选项,这些选项用于配置您的项目。以下是一些常见的选项及其含义:
Babel:Babel 是一个 JavaScript 的编译器,用于将最新版本的 JavaScript 代码转换为向后兼容的版本,以确保在各个浏览器中都能正常运行。
TypeScript:TypeScript 是 JavaScript 的超集,增加了静态类型检查和其他扩展功能。如果您想在项目中使用 TypeScript,可以选择此选项。
Progressive Web App (PWA) Support:PWA 是一种利用现代 Web 技术创建的应用程序,具有类似原生应用的体验。通过选择此选项,您可以在项目中启用 PWA 支持。
Router:Vue Router 是 Vue.js 官方的路由管理器,用于实现单页面应用程序中的路由功能。选择此选项可以在项目中集成 Vue Router。
Vuex:Vuex 是 Vue.js 官方的状态管理库,用于管理应用程序中的状态。选择此选项可以在项目中集成 Vuex。
CSS Pre-processors:CSS 预处理器允许您使用类似编程语言的语法编写 CSS。您可以选择其中一种预处理器,如 Sass、Less 或 Stylus,以便在项目中使用。
Linter / Formatter:选择此选项后,您可以选择使用 ESLint 进行代码检查和风格规范,并选择代码格式化工具(如 Prettier)。
Unit Testing:选择此选项后,您可以选择使用哪种单元测试框架(如 Jest 或 Mocha)来为项目编写和运行单元测试。
E2E Testing:选择此选项后,您可以选择使用哪种端到端(End-to-End)测试工具(如 Cypress 或 Nightwatch)来为项目编写和运行端到端测试。
这些自选项使您能够根据您的项目需求进行定制配置。您可以选择需要的选项,也可以选择使用默认设置。一旦选择完成,Vue CLI 将根据您的选择配置并初始化您的项目。

在这里插入图片描述
族长列出了自己修行的功法,说这其中便是我修行的功法,若你想走向更高便要自行修行其中的奥义,
之后族长便创建了自己的功法谱,为小V进行演示,族长选择了2.x意思 是VUE家族2的版本

在这里插入图片描述
选择了sass/scss为css技能版本
在这里插入图片描述
至此是选择这个选项意味着您只希望 ESLint 在代码中发现错误时给出警告,而不会使构建过程中断。
ESLint 是一种用于检查 JavaScript 代码质量和规范的工具。它可以帮助您捕获常见的错误、规范代码风格并提供一致的代码约定。默认情况下,当 ESLint 在代码中发现错误时,Vue CLI 会阻止项目的构建,并显示错误信息。这有助于确保代码的质量和一致性。
但如果您选择 “ESLint with error prevention only” 选项,ESLint 仅会给出警告,而不会阻止项目的构建。这意味着即使在代码中存在一些错误或不符合规范的地方,项目仍然可以正常构建和运行。这对于一些开发者来说可能更加灵活,可以在开发过程中继续进行,而不必在每次保存时解决所有的 ESLint 错误。
需要注意的是,虽然项目可以继续构建和运行,但建议尽可能解决所有的 ESLint 错误和警告,以提高代码质量和可维护性。因此,在生产环境或发布之前,最好修复所有的 ESLint 错误,以确保代码的质量和一致性。
总结起来,选择 “ESLint with error prevention only” 选项意味着 ESLint 只会给出警告,而不会阻止项目构建。这样可以让您在开发过程中灵活处理错误和警告,但仍建议尽可能解决所有的 ESLint 错误和警告。

在这里插入图片描述

您更喜欢将Babel、ESLint等的配置放在哪里?
族长推荐放置在 package.json中更加方便管理

在这里插入图片描述
选择好后开始创建族长的技能书
在这里插入图片描述
在这里插入图片描述
至此 cd my-project 进入文件夹
npm run serve运行项目 至此第一章结束,
如果您喜欢请帮我点赞,收藏,您的点赞收藏对作者是种激励,谢谢

另有私活可私聊我,我将尽我所能

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

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

相关文章

Vue + electron 构建桌面应用程序

文章目录 需求分析解决 需求 使用Vue.js构建桌面应用程序 分析 选择一个Vue.js框架:选择一个适合你的Vue.js框架。推荐使用Electron,因为它是最流行的桌面应用程序框架之一,而且与Vue.js非常兼容。还有其他框架,如 Proton Native…

【C语言趣味教程】第一章:你好, 世界! 「热门 C 语言专栏《维生素C语言》2023 全新重制」

🔗 《C语言趣味教程》👈 猛戳订阅!!! ​—— 热门专栏《维生素C语言》的重制版 —— 💭 写在前面:这是一套 C 语言趣味教学专栏,目前正在火热连载中,欢迎猛戳订阅&#x…

SQL注入第三章节数据类型与提交方式

SQL注入第三章节数据类型与提交方式 3.1 SQL注入之数据类型 (1)数字型注入点 许多网页链接有类似的结构 http://xxx.com/users.php?id1。基于此种形式的注入,一般被叫做数字型注入点,缘由是其注入点 id 类型为数字&#xff0c…

02、Nginx目录结构与基本运行原理

一、目录: Nginx一般安装在/usr/local/nginx目录下(安装时–prefix可指定安装目录) conf #配置文件|-nginx.conf #主配置文件|-其他配置文件 #可通过那个include关键字,引入到了nginx.…

Redis(主从复制、哨兵模式、集群)概述及部署

Redis(主从复制、哨兵模式、集群)概述及部署 一、Redis主从复制1、Redis主从复制的概念2、Redis主从复制的作用3、Redis主从复制的流程4、Redis主从复制的搭建 二、Redis 哨兵模式1、哨兵模式的原理2、哨兵模式的作用3、哨兵模式的结构4、哨兵模式的搭建…

【Redisson】Redisson--分布式远程服务(Remote Service)

Redisson系列文章: 【Redisson】Redisson–基础入门【Redisson】Redisson–布隆(Bloom Filter)过滤器【Redisson】Redisson–分布式锁的使用(推荐使用)【分布式锁】Redisson分布式锁底层原理【Redisson】Redisson–限流器 文章目录 一、Redi…

java--类变量与实例变量--实验设计--村庄种树

目录 设计要求 设计流程图 程序代码 类Village代码 类MainClass代码 可以直接运行的代码 运行结果 类变量与实例变量的区别和类方法与实例方法的区别 idea的详细使用方法 设计要求 编写程序模拟两个村庄共同拥有一片森林;编写一个Village类,该类…

WebDAV之派盘本地个人云+RaiDrive

RaiDrive是一款Windows平台下的网络驱动器软件,可以将云存储、FTP、WebDAV等网络存储设备映射为本地磁盘,方便用户在本地访问、管理和备份云端数据。它支持的存储设备包括Google Drive、Microsoft OneDrive、DropBox、以及FTP、SFTP等等。使用RaiDrive,用户可以在本地用文件…

Java中规模软件开发实训——掌握财务自由的关键!解锁智能家庭记账系统的神奇力量!(家庭记账软件)

✨博主:命运之光 🌸专栏:Python星辰秘典 🐳专栏:web开发(html css js) ❤️专栏:Java经典程序设计 ☀️博主的其他文章:点击进入博主的主页 前言:财务自由&am…

【LeetCode】HOT 100(20)

题单介绍: 精选 100 道力扣(LeetCode)上最热门的题目,适合初识算法与数据结构的新手和想要在短时间内高效提升的人,熟练掌握这 100 道题,你就已经具备了在代码世界通行的基本能力。 目录 题单介绍&#…

LeetCode·每日一题·2679. 矩阵中的和·排序

作者:小迅 链接:https://leetcode.cn/problems/sum-in-a-matrix/solutions/2330084/pai-xu-zhu-shi-chao-ji-xiang-xi-by-xun-g-a3gw/ 来源:力扣(LeetCode) 著作权归作者所有。商业转载请联系作者获得授权,…

图书推荐管理系统Python,基于Django和协同过滤算法等实现

一、介绍 图书推荐系统 / 图书管理系统,以Python作为开发语言,基于Django实现,使用协同过滤算法实现对登录用户的图书推荐。 二、效果展示 三、演示视频 视频代码:https://www.yuque.com/ziwu/yygu3z/gq555ph49m9fvrze 四、Dj…

有什么事在Linux上顺理成章,在Windows就令人费解?

Linux与Windows都是十分常见的电脑操作系统,相信大家对它们二者都有所了解!在我们的使用过程中,是否有遇到这种情况,在Linux上顺理成章,换到Windows上就令人费解? 文章目录 一、介绍2.1 Linux系统1.2 Wind…

第九十七天学习记录:Linux基础:实用操作Ⅱ

进程管理 进程 程序运行在操作系统中,是被操作系统所管理的。 为管理运行的程序,每一个程序在运行的时候,便被操作系统注册为系统中的一个:进程 并会为每一个进程都分配一个独有的:进程ID(进程号&#xf…

机器人动力学与控制学习笔记(十六)——重复控制

十六、重复控制基本原理 16.1 重复控制理论 重复控制方法的目标是设计一个针对周期信号的跟踪控制器或者扰动补偿器,只需基于过去周期的误差信号,除了使用当前控制误差外,还“重复”使用了上一周期的误差,并与当前控制误差叠加在…

2023黑马头条.微服务项目.跟学笔记(三)

2023黑马头条.微服务项目.跟学笔记 三 自媒体文章发布1.自媒体前后端搭建1.1 后台搭建1.2 前台搭建 2.自媒体素材管理2.1 素材上传2.2.1 需求分析2.2.2 素材管理-图片上传-表结构2.2.3 实现思路2.2.4 接口定义2.2.5 自媒体微服务集成heima-file-starter2.2.6 具体实现 2.2 素材…

16 线程同步

文章目录 临界区MFC 临界区全部代码 事件内核对象信号量内核对象互斥量MFC 中设置只能有一个窗口 MFC线程通信 临界区 火车票买票问题 #include<stdio.h> #include <Windows.h>/* 临界区&#xff08;关键段&#xff09; */CRITICAL_SECTION g_cs;int g_count 500…

C++ day44

1、全局变量&#xff0c;int monster 10000;定义英雄类hero&#xff0c;受保护的属性string name&#xff0c;int hp,int attcKk;公有的无参构造&#xff0c;有参构造&#xff0c;虚成员函数void AtK()[blood-0,}&#xff0c;法师类继承自英雄类&#xff0c;私有属性int ap_at…

networkx

import networkx as nx import matplotlib.pyplot as plt# 创建一个空的无向图 G nx.Graph()# 添加节点 G.add_nodes_from([1, 2, 3, 4, 5])# 指定每个节点的位置 pos {1: (0, 0),2: (1, 1),3: (2, 0),4: (1, -1),5: (-1, -1)}# 添加边 G.add_edges_from([(1, 2), (1, 3), (1…

如何在家居行业运用IPD?

家居行业是我国国民经济重要的民生产业和具有显著国际竞争力的产业。家居家装是指对房屋的整体布局、风格、色彩及空间使用进行重新设定&#xff0c;整体的工程服务包含设计、建筑施工、建材生产、装饰及家具产品制造等&#xff0c;涉及装饰装修行业和制造业。家居家装行业内大…