【VUE Cli脚手架软件安装篇】

news2024/11/14 13:26:40

目录

1. 搭建开发环境

1.1. 安装Node.js

1.2. 配置npm源

2. 安装VUE Cli

3. 创建第1个VUE CLI工程

3.1. 创建工程

3.2. 启动服务

3.3. 停止服务

3.4. 重启服务


1. 搭建开发环境

1.1. 安装Node.js

首先需要下载 Node.js 安装包,下载地址可参考:
https://nodejs.org/dist/v16.14.2/node-v16.14.2-x64.msi
https://mirrors.nju.edu.cn/nodejs/latest-v16.x/node-v16.14.2-x64.msi
https://mirrors.tuna.tsinghua.edu.cn/nodejs-release/v16.14.2/node-v16.14.2-x64.msi

Node.js 的安装过程没有特别的注意事项,整个安装过程中都可以 不必修改任何内容 ,直至其自动安装完成。

可以更换路径

 

 

 

 

 

 

 

此安装包会自动配置环境变量,安装完成后,可检查 npm 命令是否可用,在操作系统的命令提示符下执行以下命令即可:
npm -v
执行以上命令后,将显示版本号,例如:

 注意:你必须在新的命令提示符窗口(安装完Node.js后再打开的窗口)中运行此命令。

1.2. 配置npm

nmp 源(即 npm 仓库,称之为: registry )默认是境外服务器,在国内使用时,访问速度较慢,通常, 在初次使用时,应该将npm 源更换为国内的服务器地址,例如使用 https://registry.npmmirror.com 作为npm 源。
配置 npm 源的命令如下:
npm config set registry https://registry.npmmirror.com
当配置成功后,可通过 get 命令可查看 npm 源:

 npm config get registry

注意: 以上命令将显示当前生效的 npm 源,但并不检查 npm 源的 URL 是否有效,所以,即使配置了错误的npm 源,也不会提示错误,请认真检查是否配置了正确的 URL

2. 安装VUE Cli

安装 VUE Cli 的命令如下:
npm install -g @vue/cli
此过程将从仓库服务器中下载 VUE Cli ,通常耗时 30 秒至 5 分钟左右。
提示: 如果安装过程中的日志提示更新 npm 版本,或提示某些软件版本偏旧等,只要没有出现 ERROR 字样,均可无视。
注意: 以上操作仍需要管理权限才可以成功执行。
安装完成后,可通过以下命令检验 VUE Cli 是否安装成功:
vue -V
注意:以上命令中的 - V 中的 V 是大写的。
执行以上命令后,将显示当前的 VUE Cli 版本号,例如:

3. 创建第1VUE CLI工程

3.1. 创建工程

通常使用 Vue 的命令来创建 VUE CLI 工程,并且,会将工程创建在执行命令时的位置,所以,先在命令提示符窗口中进入Vue Workspace (自行指定的用于存放项目的文件夹),例如(以下示例中的 # 开头是注释,不要执行):
# 切换到 D
d:
# 创建 Vue Workspace ,文件夹名称为 Vue-Workspace ,是自定义名称
# 如果 Vue Workspace 已经存在,则不需要执行接下来这条命令
# 如果使用 IntelliJ IDEA 开发 VUE CLI 工程,也可以直接使用 IntelliJ IDEA Workspace ,无强制
要求
mkdir Vue-Workspace
# 进入 D 盘下的 Vue-Workspace
cd Vue-Workspace
当进入 Vue Workspace 后,就可以创建工程了。
使用 vue create 命令即可创建 VUE CLI 工程,命令格式是:
vue create 工程名称

 例如执行:

vue create vue-project-01
输入以上指令后,按下 Enter 键将准备创建工程,创建过程可能耗时较长, 注意:不可反复按 Enter ,否则会自动选择后续各设置选项的默认项。
创建过程中会有一些选项,最先提示的选项是 Please pick a preset ,表示 请选择一个预设项 ,推荐选择 Manually select features ,表示 手动选择 ,通过键盘的上下箭头进行选择,选择到目标项后按下键盘的 Enter 键到下一步:
接下来的选项是 Check the features needed for your project ,表示 选择你的工程中需要使用
的功能 ,推荐在列表中选择 Babel Router Vuex 3 项,使用键盘的上下箭头移动,使用空格选中或取消选中,选择完成后按下键盘的 Enter 键到下一步:

 

接下来的选项是 Choose a version of Vue.js that you want to start the project with ,表示“ 选择你的工程中希望使用的 Vue.js 的版本 ,推荐选择 2.x 这项,选择到目标项后按下键盘的 Enter 键到下一步:

 

接下来的选项是 Use history mode for router ,表示 是否在路由中选择历史模式 ,推荐选择“是 ,输入 Y 后按下键盘的 Enter 键到下一步(提示信息中, Y 是大写的,表示它是默认选项,不输入Y 而直接按下 Enter 键是等效的):

 

接下来的选项是 Where do you prefer placing config for Babel, ESLint, etc.? ,表示 你习惯把一些配置信息存放在哪里?” ,推荐选择 In package.json ,即存放在 package.json 文件中,选择到目标项后按下键盘的 Enter 键到下一步:

 

 

最后的选项是 Save this as a preset for future projects? ,表示 是否保存以上配置信息,作为后续将创建的新工程的预设?” ,推荐选择 ,输入 N 后按下键盘的 Enter 键(提示信息中, N 是大写的,表示它是默认选项,不输入 N 而直接按下 Enter 键是等效的):

 

至此,配置过程已经结束,接下来会自动创建工程,耗时取决于网络速度,通常需要 30 秒至 5 分钟左右。
如果未出现 Error 字样,通常是创建成功了

3.2. 启动服务

注意: 从现在开始,你可以使用 IntelliJ IDEA 或类似的开发工具来打开你的项目,并使用内置的
Terminal 执行各个命令,使用方式与命令提示符窗口完全相同。
进入工程目录,执行 npm run serve 命令即可启动此工程的服务(过程中会编译打包此工程):
npm run serve
当提示以下信息时,表示工程已成功启动:

 

 当工程成功启动后,即可根据提示的URL在浏览器中进行访问:

3.3. 停止服务

如果需要停止服务,在控制台使用 Ctrl + C 即可。
提示: 当按下 Ctrl + C 后,会提示 " 终止批处理操作吗 (Y/N)?" ,其实,当按下 Ctrl + C 后,服务已经被停止,在此提示中无论选择 Y N 结果都已经不重要了。

3.4. 重启服务

Vue 脚本架工程启动的服务支持热部署(热更新,即:当保存对源代码的修改后,会自动重新编译打包 并覆盖原本已经启动的服务中的文件),并没有重启服务的做法,如果在某些场景中需要实现“ 重启 的效果(例如修改服务端口等),可以先停止服务,然后再次启动服务。

个人主页:居然天上楼

感谢你这么可爱帅气还这么热爱学习~~

人生海海,山山而川

你的点赞👍 收藏⭐ 留言📝 加关注✅

是对我最大的支持与鞭策

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

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

相关文章

【数据结构】顺序表的概念及实现

顺序表1、顺序表概念2、初始化顺序表3、销毁顺序表4、判断顺序表是否为空5、打印顺序表6、检查顺序表的容量(同时充当扩容任务)7、顺序表的尾插8、顺序表的头插9、顺序表的尾删10、顺序表的头删11、查找顺序表中某个数的位置12、在顺序表pos位置插入数字…

光环:元宇宙概念及生态发展现状与研判——张子良

摘要:文章内容主要来源于光环国际2022年第三届中国科创者大会张子良老师的分享,原分享名称为"元宇宙行业应用实践探索"。讲述了元宇宙的理论知识、元宇宙生态圈及当前发展的情况。提出来看一个概念是否相同可以从引入时间、内容两个方面去界定…

【用python的标准库画出显示实时时间的数码管】

🤵‍♂️ 个人主页老虎也淘气 个人主页 ✍🏻作者简介:Python学习者 🐋 希望大家多多支持我们一起进步!😄 如果文章对你有帮助的话, 欢迎评论 💬点赞👍🏻 收藏…

Java项目:SSM电影售票管理系统

作者主页:源码空间站2022 简介:Java领域优质创作者、Java项目、学习资料、技术互助 文末获取源码 项目介绍 管理员角色包含以下功能: 管理员登陆,管理员用户管理,新闻公告增删改查,电影类型增删改查,影院信息增删改查,电影信息增删改查,订单…

计算机网络学习笔记(II)——应用层

文章目录第二章—应用层2.1、应用层原理网络应用的体系结构客服—服务器(C/S)体系结构对等体(P2P)体系结构C/S和P2P体系的混合结构进程通信分布式进程通信需要解决的问题应用层协议Internet传输层提供的服务UDP存在的必要性2.2、W…

【Android插件化框架】插件APK中的动态代理

在 Android 中实现插件化框架,需要解决的问题主要如下: 资源和代码的加载Android 生命周期的管理和组件的注册宿主 APK 和插件 APK 资源引用的冲突解决 下面分析几个目前主流的开源框架 DL 动态加载框架 ( 2014 年底) 是基于代理的方式实现插件框架&…

渗透测试 | APP信息收集

0x00 免责声明 本文仅限于学习讨论与技术知识的分享,不得违反当地国家的法律法规。对于传播、利用文章中提供的信息而造成的任何直接或者间接的后果及损失,均由使用者本人负责,本文作者不为此承担任何责任,一旦造成后果请自行承担…

【学习笔记76】认识ajax和ajax的请求

一、认识前后端交互 1、前后端交互 前端向后端发送请求, 索要数据因为前端没有办法存储大量数据, 所以数据都存储在后端当前端需要数据时, 需要向后端发送请求, 得到想要的数据 2、什么是ajax ajax全名async javascript and XML(异步JavaScript和XML)是前后台交互的能⼒&#…

手摸手带你撸一个拖拽效果

目录 前言 准备 创建所需要结构 编写样式 js编写拖拽效果 解释方法 所有代码 结尾 前言 最近看见一个拖拽效果的视频,看好多人评论说跟着敲也没效果,还有就是作者也不回复大家提出的一些疑问,本着知其然必要知其所以然的心理&#xf…

【疯狂世界杯】css 动画实现跳动的足球

📋 个人简介 💖 作者简介:大家好,我是阿牛,全栈领域优质创作者😜📝 个人主页:馆主阿牛🔥🎉 支持我:点赞👍收藏⭐️留言📝…

python T检验

T检验通常分为三种:单样本T检验、双样本T检验、配对样本T检验原理可以参考:一文详解t检验本文主要介绍使用python实现T检验的过程,内容主要是参考这篇博文:利用python库stats进行t检验 文章目录一、单样本T检验二、独立样本t检验&…

二、Git本地仓库基本操作——创建Git仓库、提交更新或删除文件

1. 创建本地工作仓库 创建本地工作仓库有两种方法: git init 在本地初始化一个git仓库git clone 直接克隆一个远程的git仓库 方法一: 我们在其中一个目录下,点击鼠标右键,然后启动git bash。输入下面命令: git in…

【实战案例】Python 信用卡欺诈检测其实特简单

当我们在网上购买产品时,很多人喜欢使用信用卡。但信用卡欺诈常常会在身边发生,网络安全正成为我们生活中至关重要的一部分。 为了解决这个问题,我们需要利用机器学习算法构建一个异常行为的识别系统,如果发现可疑,中…

2023最新SSM计算机毕业设计选题大全(附源码+LW)之java高校饭堂管理系统8gmjo

这个选题的话其实有很多的,就看你自己能接受怎么样的,比如可以做网站类、系统类、小程序类、安卓app、大数据类等等,这个也要看你个人能力和技术问题,如果技术小白或者有一点点基础的话建议选择网站类和系统类的,如果有…

微服务框架 SpringCloud微服务架构 10 使用Docker 10.2 镜像命令练习

微服务框架 【SpringCloudRabbitMQDockerRedis搜索分布式,系统详解springcloud微服务技术栈课程|黑马程序员Java微服务】 SpringCloud微服务架构 文章目录微服务框架SpringCloud微服务架构10 使用Docker10.2 镜像命令练习10.2.1 练习10 使用Docker 10.2 镜像命令…

Spring boot 自动装配原理

Spring boot 为了解决Bean的复杂配置&#xff0c;引入了自动装配机制&#xff1b;那么什么是自动装配&#xff0c;它的原理又是什么呢&#xff1f;我们先通过以下例子来了解以一下什么是自动装配。 Spring boot 集成 redis 引入依赖包 <dependency><groupId>org…

CTFShow pwn07 (ret2libc-64bit

用ROPgabdet 找到pop rdi地址和ret地址&#xff1a; 来自ctfshow pwn7&#xff1a; 64位程序是需要栈平衡的&#xff0c;而且前六个寄存器用完了才会用栈传参 %rdi&#xff0c;%rsi&#xff0c;%rdx&#xff0c;%rcx&#xff0c;%r8&#xff0c;%r9 用作函数参数&#xff0c;依…

rust编程-rust所有权理解(chapter 4.1)

目录 1. 什么是所有权 1.1 堆与栈 1.2 变量作用域 1.3 String类型 1.4 内存和分配 1.5 变量和数据交互的方式 1.5 所有权和函数 1.6 返回值和作用域 所有权 是Rust独有的特性&#xff0c;该设计开创了编程语言中的先河。所有权使得Rust能保证内存的安全&#xff0c;且不…

游程编码(Run Length Coding)

游程编码游程编码基本介绍示例1示例2游程编码适用的场景游程编码 游程编码&#xff08;Run Length Coding&#xff0c;简称RLC&#xff09;又称游程编码、行程长度编码、变动长度编码 等&#xff0c;是一种统计编码。主要技术是检测重复的比特或字符序列&#xff0c;并用它们的…

亚马逊云科技re:Invent 2022 Ruba Borno主题演讲

2022亚马逊云科技re:Invent全球大会精彩内容应接不暇&#xff0c;亚马逊云科技全球渠道与联盟副总裁Ruba Borno在2022亚马逊云科技re:Invent大会的全球合作伙伴峰会上&#xff0c;为合作伙伴带来一系列全新的合作伙伴创新服务。 云上发展持续加速的当下&#xff0c;上云好比一场…