Vue-CLI的安装、使用及环境配置(超详细)

news2025/2/4 1:07:19

Vue CLI 是一个基于 Vue 进行快速项目开发的工具。它可以提供可交互式的项目脚手架和运行时的服务依赖,帮助你快速完成一个风格统一、拓展性强的现代化 web 单页面应用。

Vue-CLI  所需环境

Vue-CLI 是一个需要全局安装的NPM包,安装需要在 Node.js 环境下进行。

检查 Node 环境:

node -v

执行上面的命令之后,如果终端输出版本号,表示 Node.js 已安装;反之则无; 

可 Node.js 官网自行下载:https://nodejs.org/zh-cn/

 详细安装指南可参考:Node.js的安装及环境配置【超详细】_huangfuyk的博客-CSDN博客

安装 Vue-CLI

1、全局安装

执行 npm install -g @vue/cli 全局安装

npm install -g @vue/cli

如果安装过程中出现错误如下:

Unhandled rejection Error:EACCES:permission denied

表示当前的操作系统权限不足,可输入以下命令重新安装:

sudo npm install -g @vue/cil

添加 sudo 表示使用超级管理员权限进行安装,过程中需要你输入设备的启动密码。

2、检查是否安装完成

执行 vue --version 或 vue-V 检查是否安装完成,如果终端输出版本号,表示 Node.js 已安装;反之则无; 

vue --version

快速搭建项目

1、命令行创建项目

(1)执行vue create one-project ,创建一个项目名称为 one-project 的项目;

vue create one-project

(2) 可选择 Vue2 、Vue3 版本或者自定义设置,出现 $ cd one-project 和 $ npm run serve,代表已安装完成。如下图所示:

(3)执行 cd one-project 进入文件

 cd one-project

(4)执行 npm run serve 即可运行项目

npm run serve

(5) 打开链接即可看到,domo 页面

2、图形化工具创建项目

(1)命令行输入 vue ui ,获取图形化页面创建工程的链接,在浏览器中打开;

vue ui

 浏览器页面如下图所示:

(2)点击【创建】 ==》点击【+在此创建新项目】 

(3)输入项目信息(项目名:two-project)==》点击【下一步】

 (4)选择版本或自定义,点击【创建项目】

(5)等待创建完成即可,如下图

接下来就可以进行开发啦

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

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

相关文章

一、openCV+TensorFlow环境搭建

目录一、anaconda安装二、tensorflow安装三、Opencv安装四、pycharm新建项目使用Anaconda的环境五、验证环境安装六、tensorflow安装jupyter notebook一、anaconda安装 anaconda官网:https://www.anaconda.com/anaconda下载:https://repo.anaconda.com/…

【k8s】10.网络插件

文章目录一、etcd详解1、etcd的特点2、准备签发证书的环境二、网络插件原理1、flannel1.1 UDP模式(性能差)1.2 VXLAN模式(性能较好)1.3 host-gw模式(性能最高)2、calico插件3、总结一、etcd详解 etcd是Cor…

Redis_第二章_实战篇_第一节_ 短信登录

Redis_第二章_实战篇_第一节_ 短信登录 文章目录Redis_第二章_实战篇_第一节_ 短信登录短信登录1.1、导入黑马点评项目1.1.1 、导入SQL1.1.2、有关当前模型1.1.3、导入后端项目1.1.4、导入前端工程1.1.5 运行前端项目:1.2 、基于Session实现登录流程1.3 、实现发送短信验证码功…

ANDI数据集介绍|补充信息|2022数维杯国际赛C题

目录 1.患者基本信息 2.生物标记物量化值 3.认知评估 4.解剖结构量化值 5.Other 6.上述各信息的bl值 1.患者基本信息 RID (Participant roster ID) ex. 2、PTID (Original study protocol) ex. 011_S_0002、VISCODE (Visit code) ex. bl、SITE ex. 11、COLPROT (Study p…

服务拆分和远程调用(微服务)

博客主页:踏风彡的博客 博主介绍:一枚在学习的大学生,希望在这里和各位一起学习。 所属专栏:SpringCloud 文章创作不易,期待各位朋友的互动,有什么学习问题都可在评论区留言或者私信我,我会尽我…

课程设计 | 教学设备管理系统

🎈 作者:Linux猿 🎈 简介:CSDN博客专家🏆,华为云享专家🏆,Linux、C/C、云计算、物联网、面试、刷题、算法尽管咨询我,关注我,有问题私聊! &…

SpringCloud微服务(二)——Eureka服务注册中心

Eureka服务注册中心 SpringCloud组件,Eureka已停更。 内容简介 1、Eureka是什么 Eureka 是 Netflix 开发的,一个基于 REST 服务的,服务注册与发现的组件,以实现中间层服务器的负载平衡和故障转移。服务注册:将服务…

[杂记]算法: 单调栈

0. 引言 单调栈, 顾名思义就是从栈底到栈顶元素单调递增或者单调递减的栈. 往往, 我们在解决寻找一个元素前面/后面的最远/最近处满足某条件的另一个元素的时候可以用到单调栈. 也是用两道算法题作为例子. 在这之前, 先简单写一下构造单调栈的模板. 如果我们需要从一个数组中…

ES6 入门教程 18 Iterator 和 for...of 循环 18.7 for...of 循环

ES6 入门教程 ECMAScript 6 入门 作者:阮一峰 本文仅用于学习记录,不存在任何商业用途,如侵删 文章目录ES6 入门教程18 Iterator 和 for...of 循环18.7 for...of 循环18.7.1 数组18.7.2 Set 和 Map 结构18.7.3 计算生成的数据结构18.7.4 类似…

供应叶酸PEG试剂Folic acid-PEG-Azide,FA-PEG-N3,叶酸-聚乙二醇-叠氮

1、名称 英文:Folic acid-PEG-Azide,FA-PEG-N3 中文:叶酸-聚乙二醇-叠氮 2、CAS编号:N/A 3、所属分类:Azide PEG Folic acid(FA) PEG 4、分子量:可定制,FA-PEG-N3 5…

Web安全之CTF测试赛

Web安全之CTF测试赛 1.000-我是谁 题目描述: 找到诈骗网站bsde.cn的域名注册人及邮箱,将域名注册人的126邮箱填写到下方答案框并点击送出 考察点:whois查询 whois查询网址: https://x.threatbook.com/ //微步在线 http://wh…

ES6 入门教程 17 Promise 对象 17.11 Promise.reject() 17.12 应用 17.13 Promise.try()

ES6 入门教程 ECMAScript 6 入门 作者:阮一峰 本文仅用于学习记录,不存在任何商业用途,如侵删 文章目录ES6 入门教程17 Promise 对象17.11 Promise.reject()17.12 应用17.12.1 加载图片17.12.2 Generator 函数与 Promise 的结合17.13 Promise…

ES6 入门教程 15 Proxy 15.2 Proxy 实例的方法 15.2.2 set() 15.2.3 apply()

ES6 入门教程 ECMAScript 6 入门 作者:阮一峰 本文仅用于学习记录,不存在任何商业用途,如侵删 文章目录ES6 入门教程15 Proxy15.2 Proxy 实例的方法15.2.2 set()15.2.3 apply()15 Proxy 15.2 Proxy 实例的方法 拦截方法的详细介绍。 15.2.…

【附源码】Python计算机毕业设计天润律师事务所管理系统

项目运行 环境配置: Pychram社区版 python3.7.7 Mysql5.7 HBuilderXlist pipNavicat11Djangonodejs。 项目技术: django python Vue 等等组成,B/S模式 pychram管理等等。 环境需要 1.运行环境:最好是python3.7.7,…

〖全域运营实战白宝书 - 运营角色认知篇③〗- 运营的底层逻辑是什么?

大家好,我是 哈士奇 ,一位工作了十年的"技术混子", 致力于为开发者赋能的UP主, 目前正在运营着 TFS_CLUB社区。 💬 人生格言:优于别人,并不高贵,真正的高贵应该是优于过去的自己。💬 &#x1f4e…

【笔试题】【day24】

文章目录第一题(完全二叉树的最多结点个数)第二题(哈夫曼树的带权路径长度)第三题(堆的重建)第四题(哈希映射的冲突)第一题(完全二叉树的最多结点个数) 一棵…

UE4 几种蓝图通信的方法

根据视频(UE4 几种蓝图通讯的方法)所做笔记 目录 方法一:通过公有变量 方法二:通过“获取类的所有actor”节点 方法三:通过蓝图接口 关卡蓝图与蓝图通信 方法一:通过公有变量 步骤: 1.新建…

一款php开发的非常好的OA办公管理系统源码

一款基于TP5 HAdmin Mysql打造的简单实用的开源的企业办公系统框架。可以帮助解决企业办公项目60的重复工作,让开发更多关注业务逻辑。既能快速提高开发效率,帮助公司节省人力成本,同时又不失灵活性。使用本系统可以简单快速地开发出企业级的…

如何将 MATLAB 源代码导出成 Java 的 JAR 包

文章目录编写 MATLAB 源文件安装 Java制作 JAR 包找到 MATLAB 的 JAR 包运行环境: MATLAB R2022a Java 8(1.8.0_311) Windows 10 教育版 64位 使用混合编程通常都不是好主意,但是有时候会遇到极端的情况。Java 擅长网络编程&am…

vivo霍金实验平台设计与实践-平台产品系列02

vivo 互联网平台产品研发团队 - Bao Dawei 本篇介绍了vivo霍金实验平台的系统架构以及业务发展过程中遇到的问题以及对应的解决方案。 《平台产品》系列文章: 1.vivo平台化实践探索之旅-平台产品系列01 一、前言 互联网企业经历过野蛮生长的开拓红利期之后&#xf…