vue2快速安装环境,从0-1创建vue2项目教程

vue2快速安装环境,从0-1创建vue2项目教程(windows)

一、node下载

1.如何查看node版本和npm版本

二、npm安装脚手架

1.注意事项

三、vue2选项解读

四、运行脚手架

一、node下载

1、(node.js中文网)

在这里插入图片描述

下载长期稳定版本就行

解释下node.js和npm的关系?

想象你在做一顿意大利面,Node.js 就像是你的大锅炉,它提供了一个地方来煮东西,比如煮意大利面酱。
而 npm 就像是你的配料盒,里面装满了各种各样的调料和食材。你可以从盒子里拿出需要的调料,比如香料、番茄酱等,然后加入到大锅炉里煮意大利面酱中。npm 为你提供了许多常用的代码包,你可以轻松地将它们添加到你的项目中,就像在做意大利面时添加调料一样。
所以,Node.js 提供了一个运行 JavaScript 代码的地方,而 npm 则提供了一个获取、管理和分享 JavaScript 代码包的方式.

意思下载node就是下载了npm,就是下载商店的地方

查看node版本和npm版本

node -v //这个查看node的版本号
npm -v //这个查看npm的版本号

![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/54ef87cc87bd4df6be0b2f28f94fbb65.png

二、npm安装脚手架

npm install vue@2 --save //安装vue2脚手架

创建vue2项目

vue create vue2 //这个vue2就是你项目的名称

创建之后的界面就是选择你选择创建vue2的项目还是vue3的项目(我们选择第三个里面有自定义的选项一一解读)

在这里插入图片描述

点击之后的页面

在这里插入图片描述

我来一一解读
Babel:
Babel 是一个 JavaScript 编译器,它可以将最新版本的 JavaScript 代码转换成向后兼容的版本,以确保你的代码可以在更旧的浏览器中运行。
选择这个特性可以让你使用最新的 JavaScript 语法和特性,一般选上
TypeScript:
TypeScript 是 JavaScript 的一个超集,它添加了静态类型检查和其他一些高级特性。
选择这个特性可以让你使用 TypeScript 来开发你的 Vue 项目,一般是vue3选择ts,这个不选
Progressive Web App (PWA) Support:
渐进式 Web 应用(PWA)是一种可以像原生应用一样运行的 Web 应用程序。
选择这个特性可以帮助你将你的 Vue 项目转换为一个 PWA,从而提供更好的离线支持、推送通知等功能。
Router:
Vue Router 是 Vue.js 官方的路由管理器,它允许你构建单页应用程序(SPA)并实现页面之间的导航。
选择这个特性可以为你的项目集成 Vue Router,从而管理页面之间的路由和导航,路由要选。
Vuex:
Vuex 是 Vue.js 官方的状态管理库,用于管理应用程序中的共享状态。
选择这个特性可以为你的项目集成 Vuex,从而管理应用程序中的复杂状态和数据流,这个也常用。
CSS Pre-processors:
CSS 预处理器允许你使用类似于变量、嵌套规则、混合等高级功能来编写 CSS。
选择这个特性可以让你选择并集成一个 CSS 预处理器,如 Sass、Less 或 Stylus,以提高 CSS 的可维护性和复用性。这个看情况。
Linter / Formatter:
代码检查器(Linter)和代码格式化工具帮助你保持代码的一致性、可读性和可维护性,这个不用,公司要求的话就需要。
选择这个特性可以为你的项目集成一个代码检查器(如 ESLint)和一个代码格式化工具(如 Prettier),以确保代码质量。
Unit Testing:
单元测试是一种测试方法,用于测试应用程序中的各个单元(如函数、组件等)是否按预期工作。
选择这个特性可以为你的项目集成单元测试工具(如 Jest、Mocha 等),以帮助你编写和运行单元测试。不用
E2E Testing:
端到端测试是一种测试方法,用于测试整个应用程序的功能和流程。
选择这个特性可以为你的项目集成端到端测试工具(如 Cypress、Nightwatch 等),以帮助你编写和运行端到端测试。不用

在这里插入图片描述

空格键就是选中状态,确认就是进行下一步
在这里插入图片描述

这里选2.x
在这里插入图片描述
选择 Y 表示使用 history 模式,这需要在生产环境中正确配置服务器以支持 index 回退。
选择 n 表示不使用 history 模式,这会默认使用 hash 模式。

History 模式:
优点: URL 更加简洁(没有 # 号),看起来更像传统的服务器渲染的 URL。
缺点: 需要在生产环境中进行额外的服务器配置。如果直接访问一个深层次的 URL(例如 example.com/about),服务器需要被配置为返回 index.html,否则会返回 404 错误。
适用场景: 如果你对 URL 结构有严格的需求或者希望用户体验更好,并且你有能力配置服务器,那么可以选择 history 模式。
Hash 模式:
优点: 不需要服务器额外配置,默认支持所有环境。URL 中会包含 # 号,例如 example.com/#/about。
缺点: URL 包含 # 号,看起来不像传统的 URL。
适用场景: 适用于不需要额外服务器配置,或者项目部署在静态文件服务器上的情况。
在这里插入图片描述

这个是在选择配置文件的存放位置,
可以根据以下优缺点来决定:

单独的配置文件(dedicated config files):
优点:
配置更清晰,易于管理和维护。
各种配置文件之间的职责分离明确,不会混淆。
更易于复制和移植到其他项目中。
缺点:
项目根目录下会有更多的配置文件,可能显得有些杂乱。在 package.json 文件中(In package.json):
优点:
所有配置集中在一个文件中,项目根目录看起来更整洁。
对于小型项目,所有配置放在一起比较方便。
缺点:
配置文件可能会变得很长,不易于阅读和维护。
各种配置的职责混在一起,不易于分辨和管理。
对于大多数中大型项目以及团队合作项目,单独的配置文件会是更好的选择,因为这样更易于管理和维护。

在这里插入图片描述
这个的意思是需不需要保存这次配置,需要的话下次直接创建项目的话直接有这个选项
在这里插入图片描述
我选的是y,所以得起个名字方便你下次进入
在这里插入图片描述
ok了家人们你下来输入这两个
在这里插入图片描述
在这里插入图片描述
这就启动起来了创建完毕

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

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

相关文章

原始字面常量(C++11)

原始字面常量(C11) 文章目录 原始字面常量(C11)前言一、原始字面量二、代码示例总结 前言 字面量一般是指数值(12、454等)和字符串(“Hw”、“h\t”),但是有时候我们想表…

leetcode题目274

H指数 中等 给你一个整数数组 citations ,其中 citations[i] 表示研究者的第 i 篇论文被引用的次数。计算并返回该研究者的 h 指数。 根据维基百科上 h 指数的定义:h 代表“高引用次数” ,一名科研人员的 h 指数 是指他(她&…

Android Studio 问题集锦

报 Plugin [id: ‘com.android.application’, version: ‘8.1.3’, apply: false] was not found in any of the following sources: 场景:在一个Android 11的项目中添加一个Android 9的项目作为其Module,结果导致原项目无法正常运行,且原项…

PyTorch安装与配置

前言 参考文档:https://github.com/TingsongYu/PyTorch-Tutorial-2nd 环境配置之Anaconda 解释器——python.exe,是人类与CPU之间的桥梁,需要配置系统环境变量 Anaconda:集成环境,包管理器 Conda 安装 Anaconda&am…

WXSS模板样式-全局样式和局部样式

一、WXSS 1.WXSS WXSS(WeiXin Style Sheets)是一套样式语言,用于美化WXML的组件样式,类似于网页开发中的CSS 2.WXSS和CSS的关系 WXSS具有CSS大部分特性,同时,WXSS还对CSS进行了扩充以及修改,以适应微信小程序的开发…

PropertyGrid显示嵌套对象

简介: 在C#中,使用PropertyGrid来显示多重变量,通常意味着你想要展示一个对象的属性,该对象包含子对象或者集合。以下是一个简单的例子,展示如何使用PropertyGrid来显示包含嵌套属性的对象。 使用: 嵌套对象…

CSDN 自动评论互动脚本

声明 该脚本的目的只是为了提升博客创作效率和博主互动效率,希望大家还是要尊重各位博主的劳动成果。 数据库设计 尽量我们要新建一个数据库csdn_article,再在其中建一个数据表article -- csdn_article-- article-- 需要进行自动评论的表格信息...CR…

ClickHouse 24.4 版本发布说明

本文字数:13148;估计阅读时间:33 分钟 审校:庄晓东(魏庄) 本文在公众号【ClickHouseInc】首发 新的一个月意味着新版本的发布! 发布概要 本次ClickHouse 24.4版本包含了13个新功能🎁…

Element-wise Addition和Element-wise Multiplication

逐元素相加(element-wise addition)和逐元素相乘(element-wise multiplication)对于特征图(feature maps)的空间尺寸和通道数有特定的要求: 逐元素相加(Element-wise Addition&…

ML307R OpenCPU DEMO_SDK环境搭建

一、工程目录 二、环境搭建 三、编译 四、下载 五、添加自定义文件打印 hello 一、工程目录 OpenCPU SDK代码目录结构,如下图所示: | 名称 | 描述 | | ---------------- | --------------------------| | custom …

软件设计师中级

计算机系统 运算器和控制器 算术逻辑单元 累加寄存器器 状态寄存器 数据缓冲寄存器 指令寄存器 程序计数器 地址寄存器 指令译码器 内存按字节编址 内存存储单元16位 1 浮点数 浮点数范围:-2的(2的阶码次)-1到-2的(2的阶码次)-1 乘 1-2负尾数次 海明码 海明码&…

自定义一个SpringBoot场景启动器

前言 一个刚刚看完SpringBoot自动装配原理的萌新依据自己的理解写下的文章,如有大神发现错误,敬请斧正,不胜感激。 分析SpringBoot自动配置原理 SpringBoot的启动从被SpringBootApplication修饰的启动类开始,SpringBootApplicaiotn注解中最…

代码随想录算法训练营第四十四天|70. 爬楼梯(进阶版)

70. 爬楼梯(进阶版) 多重背包问题,代取商品就是从1:m的数组,背包的容量就是n,由于是求方法数,所以递推公式为 dp[j]dp[j-nums[i]]; 因为是排序问题,所以需要先循环容量&#xff0…

C语言 宏

目录 一、宏定义 1.1 预定义符号 1.2 预处理指令 #define 1.3 带有副作用宏定义 1.4 宏和函数的一个对比 ​编辑 1.5 #undef 二、条件编译 2.1 #if、#else、#elif、#endif 2.2 #ifdef和#ifndef 2.3 C语言中如何通过条件编译来预防头文件的重复包含? 一、宏定义 在C语…

EXCEL VBA终极提速,超级公式,算法优化

1,简化公式,200个字变成10个字 有很多公式写的很长,看不懂很难维护,如果改成VBA代码,简化成一个超级函数,方便维护,还可以给多个工程共用,实现模块化开发 2,计算提速。有…

第三十七天 | 860.柠檬水找零 406.根据身高重建队列 452.用最少数量的箭引爆气球

题目:860.柠檬水找零(很像模拟题) 看来贪心题目基本都需要看题解了,哎。 甚至有想不通的地方,都说不出哪里不通 看了题解怎么这么简单?完全就是模拟了收入和找零的这个过程。看来懵的很重要一点就是不知…

导弹初识(一)

目录 导弹初识1 导弹是什么2 导弹的分类2.1 按飞行方式2.2 按发射/目标2.2.1 空空导弹2.2.1 空地导弹2.2.1 地空导弹2.2.1 地地导弹 2.3 按打击目标 3.实例3.1 防空导弹3.2 低空防空导弹武器系统 本文节选自 zh,还有百度百科 导弹初识 1 导弹是什么 导弹两个字拆…

欧拉函数、快速幂、扩展欧几里得算法、中国剩余定理和高斯消元

欧拉函数 给定 n 个正整数 ai,请你求出每个数的欧拉函数。 欧拉函数的定义1∼N 中与 N 互质的数的个数被称为欧拉函数,记为 ϕ(N)。 若在算数基本定理中,Np1a11p2a2…pmm,则:ϕ(N) Np1−1/p1p2−1/p2…pm−1/pm 输…

二叉树基于队列实现的操作详解

一、队列知识补充 有关队列的知识请详见博主的另一篇博客:http://t.csdnimg.cn/3PwO4 本文仅仅附上需要的队列操作供读者参考 //结构体定义 typedef struct BinaryTreeNode* QDataType;typedef struct QueueNode {struct QueueNode* next;QDataType val; }QNode;…

添砖Java(十一)——常见类的使用Object,Math,System,BigDeciaml,包装类

目录 object: toString: equals: ​编辑 Math:​编辑 System: BigDecimal: 基本数据的包装类:​编辑 object: 我们知道,所有的类都是间接或直接继承了object类。然后object里面有几个用得很多的方法…