vue手动搭建脚手架(保姆式教案)

news2024/10/5 21:23:36

目录

1.创建项目

1.node.js环境搭建

2.安装vue-cli 

3.搭建项目

 目录结构


1.创建项目

1.node.js环境搭建

  1. 下载安装node.js(Download | Node.js),安装时不要安装在C盘
  2. Windows+r打开cmd管理工具开始输入命令
  3. 检查node.js是否安装和版本号:输入 node -v ,回车,查看node版本号,出现版本号则说明安装成功
  4. 检npm –v
  5. 替换npm下载源

 npm config set registry https://registry.npmmirror.com

npm、cnpm、yarn、pnpm、npx、nvm的区别

2.安装vue-cli 

执行命令行安装

npm i -g @vue/cli

验证安装成功,有版本号则表示成功

vue -V

3.搭建项目

  1. 选择文件夹,通过命令行进入此文件夹
  2. 执行命令  vue create 项目名称(必须是英文开头,可以英文+数字)
  3. 选择Manually select features(自定义配置)
  4. 选择Router(后面要使用,也可以先不安装,后续安装)

Check the features needed for your project:
 //检查项目所需的功能:(按<space>选择,<a>切换所有,<i>反转选择)
 ( ) Choose Vue version						// 选择vue版本,不选择,默认安装`2.6.11`版本的vue
 ( ) Babel									// 语法编译器,es6->es5
 ( ) TypeScript								// 支持使用 TypeScript 书写源码
 ( ) Progressive Web App (PWA) Support		// PWA 支持
 ( ) Router									// 支持 vue-router
 ( ) Vuex									// 支持 vuex
 ( ) CSS Pre-processors						// 支持 CSS 预处理器。
 ( ) Linter / Formatter						// 支持代码风格检查和格式化。
 ( ) Unit Testing							// 支持单元测试。
 ( ) E2E Testing							// 支持E2E测试。

 

  1. 选择3.x的版本
  2. 剩下的一直回车,等待创建

 目录结构

 

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

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

相关文章

051-第三代软件开发-日志容量时间限制

第三代软件开发-日志容量时间限制 文章目录 第三代软件开发-日志容量时间限制项目介绍日志容量时间限制 关键字&#xff1a; Qt、 Qml、 Time、 容量、 大小 项目介绍 欢迎来到我们的 QML & C 项目&#xff01;这个项目结合了 QML&#xff08;Qt Meta-Object Language…

CentOS停更在即,国内厂商该如何应对?KeyarchOS X2Keyarch 迁移体验

一、CentOS 停更危机二、关于浪潮信息KeyarchOS三、浪潮信息 KeyarchOS License 应用迁移实践第一步&#xff1a;迁移前验证第二步&#xff1a;迁移第三步&#xff1a;迁移后验证 四、写在最后 一、CentOS 停更危机 自 1993 年开始&#xff0c;红帽 Linux 已经陪伴开发者们走过…

VUE基础的一些实战总结

目录 创建一个 Vue 应用 步骤 1&#xff1a;安装 Node.js 和 npm 步骤 2&#xff1a;安装 Vue CLI 步骤 3&#xff1a;创建 Vue 项目 步骤 4&#xff1a;启动开发服务器 步骤 5&#xff1a;访问应用程序 步骤 6&#xff1a;编辑 Vue 应用 步骤 7&#xff1a;构建和部署…

论文绘图-机器学习100张模型图

在现代学术研究和技术展示中&#xff0c;高质量的图表和模型结构图是至关重要的。这尤其在机器学习领域更为显著&#xff0c;一个领域以其复杂的算法和复杂的数据结构而闻名。机器学习是一种使用统计技术使计算机系统能够从数据中学习和改进其任务执行的方法&#xff0c;而有效…

算法分析与设计考前冲刺 阅读

拜读我胡哥的精品复习资料 acmack 胡哥发表重要讲话&#xff0c;强调算法的重要性&#xff0c;我等深受触动。 Map&#xff1a;底层是红黑树&#xff0c;按照key自动进行排序 list&#xff1a; 线性链表 我一直单纯的觉得list是列表&#xff0c;这不仅说明了胡哥与我的技术…

C++标准模板(STL)- 类型支持 (属性查询,获取类型的对齐要求)

类型特性 类型特性定义一个编译时基于模板的结构&#xff0c;以查询或修改类型的属性。 试图特化定义于 <type_traits> 头文件的模板导致未定义行为&#xff0c;除了 std::common_type 可依照其所描述特化。 定义于<type_traits>头文件的模板可以用不完整类型实例…

CentOS to KeyarchOS 系统迁移体验

1. KOS(KeyarchOS)——云峦操作系统简介 KeyarchOS 即云峦操作系统(简称 KOS)是浪潮信息基于 Linux 内核、龙蜥等开源技术自主研发的一款服务器操作系统&#xff0c;支持x86、ARM 等主流架构处理器&#xff0c;广泛兼容传统 CentOS 生态产品和创新技术产品&#xff0c;可为用户…

一个前端非侵入式骨架屏自动生成方案

目录 背景 现有方案调研 侵入业务式手写代码 非侵入业务式手写代码 非侵入式骨架屏代码自动生成 技术方案 设计原则 架构图 骨架屏生成 骨架屏注入 优化点 部分技术细节解析 puppeteer 文本块处理 图片块处理 a 标签处理 自定义属性处理 首屏HTML处理 首屏样…

用照片预测人的年龄【图像回归】

在图像分类任务中&#xff0c;卷积神经网络 (CNN) 是非常强大的神经网络架构。 然而&#xff0c;鲜为人知的是&#xff0c;它们同样能够执行图像回归任务。 图像分类和图像回归任务之间的基本区别在于分类任务中的目标变量&#xff08;我们试图预测的东西&#xff09;不是连续…

WireGuard 组网教程:快速构建安全高效的私密网络并实现内网穿透

文章目录 1 引言1.1 什么是WireGuard1.2 WireGuard可以用来做什么1.3 WireGuard原理1.4 WireGuard安装 2 WireGuard组网实现内网穿透2.1 前提条件2.2 网络拓扑结构2.3 具体步骤2.3.1 中继服务器配置2.3.2 其他peer2.3.3 测试 2.4 WireGuard配置文件说明 3 WireGuard工具3.1 wg-…

智慧环保:科技驱动下的环境保护新篇章

智慧环保&#xff1a;科技驱动下的环境保护新篇章 环境保护已经成为当今社会的重要议题&#xff0c;而科技的飞速发展为我们开启了智慧环保的新篇章。在这篇文章中&#xff0c;我们将介绍智慧环保所带来的机会和创新&#xff0c;以及科技在环境保护中的重要作用。 智慧环保的理…

Topaz Video AI:引领视频质量革命,让您的内容焕发新生

随着数字媒体的日益普及&#xff0c;视频质量的重要性日益凸显。无论是个人用户还是专业团队&#xff0c;都需要确保他们的视频内容具有最佳的质量。但是&#xff0c;由于各种原因&#xff0c;如设备限制、环境干扰等&#xff0c;往往导致视频质量不尽如人意。这时&#xff0c;…

基于SSM的员工信息管理系统设计与实现

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;采用JSP技术开发 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#x…

[Android]创建TabBar

创建一个包含“首页”、“分类”和“我的”选项卡的TabBar并实现切换功能&#xff0c;通常可以通过使用TabLayout结合ViewPager或ViewPager2来完成。以下是一个基本的示例&#xff0c;展示了如何使用Kotlin和XML来实现这个功能。 1.添加依赖项到build.gradle dependencies {/…

linux 网络 cat /proc/net/dev 查看测试网络丢包情况

可以通过 cat /proc/net/dev 查看测试网络丢包情况&#xff0c;drop关键字&#xff0c;查看所有网卡的丢包情况 还可以看其他数据&#xff0c; /proc/net/下面有如下文件

德迅云安全为您介绍关于抗D盾的一些事

抗D盾概述&#xff1a; 抗D盾是新一代的智能分布式云接入系统&#xff0c;接入节点采用多机房集群部署模式&#xff0c;隐藏真实服务器IP&#xff0c;类似于网站CDN的节点接入&#xff0c;但是“抗D盾”是比CDN应用范围更广的接入方式&#xff0c;适合任何TCP 端类应用包括&am…

kubernetes--资源调度

目录 一、自动调度 1. Pod 启动创建过程&#xff1a; 2. 调度过程&#xff1a; 2.1 调度分为几个部分&#xff1a; 2.2 常见的预算策略&#xff08; Predicate &#xff09;&#xff1a; 2.3 常见的优选策略&#xff08;priorities&#xff09;&#xff1a; 二、定向调度&…

【Vue】内置指令

hello&#xff0c;我是小索奇&#xff0c;本章带大家掌握核心的内置指令&#xff0c;一起study吧 内置指令 v-text v-text用于将一个变量的值渲染为元素的文本内容 注意v-text只能接受字符串类型的值,对于对象类型,会调用toString()方法 与插值表达式区别就是它会替换标签中…

wpf devexpress 排序、分组、过滤数据

这个教程示范在GridControl如何排序数据&#xff0c;分组数据给一个行创建一个过滤。这个教程基于前一个教程。 排序数据 可以使用GridControl 排序数据。这个例子如下过滤数据对于Order Date 和 Customer Id 行&#xff1a; 1、对于Order Date 和 Customer Id 行指定Colum…

11_聚类算法

文章目录 1 聚类1.1 什么是聚类1.2 相似度/距离公式1.3 聚类的思想 2 K-means算法2.1 K-means算法步骤2.2 K-means算法思考2.3 K-means算法优缺点 3 解决K-Means算法对初始簇心比较敏感的问题3.1 二分K-Means算法3.2 K-Means算法3.3 K-Means||算法3.4 Canopy算法3.4.1 Canopy算…