vue脚手架(vue-cli)详细安装过程

news2024/11/22 22:33:39

CLI,俗称脚手架。全称是Command Line Interface。 vue-cli 是vue官方发布的开发vue项目的脚手架。

vue脚手架用于自动生成vue和webpack的项目模板,是一个快速构建vue项目的工具,可以自动安装vue所需要的插件,避免手动安装各种插件、逐个引入的麻烦。以及自动配置webpack,之前我们都是手动配置webpack。首先是特别的繁琐,而且有一个很明显的问题是版本问题。版本不对可能就报错。以后这些事儿都交给我们的cli,他会自动帮助我们配置webpack。

1、安装Node.js及配置环境

1.1 下载Node.js

官网:https://nodejs.org/zh-cn/
在这里插入图片描述
选择自己系统对应版本下载
在这里插入图片描述
双击下载好的安装文件,一路下一步安装
在这里插入图片描述
记住你的安装路径,后面配置会用到
在这里插入图片描述
安装完毕后,命令行输入:node -v
显示nodejs版本号,安装成功
在这里插入图片描述
命令行输入:npm -v ,查看npm是否安装成功
在这里插入图片描述
发现,虽然返回了版本号,但也报了个错

npm WARN config global --global, --local are deprecated. Use --location=global instead.

解决方法,依次执行:

npm install -g npm-windows-upgrade
npm-windows-upgrade

解决:

在这里插入图片描述

1.2 配置npm仓储和缓存

配置镜像源(淘宝镜像)

npm config set registry https://registry.npm.taobao.org

在这里插入图片描述


配置仓储和缓存目录
在安装目录下新建两个文件夹 cacheglobal
在这里插入图片描述
执行:(后面替换成你的目录)

npm config set prefix “C:\Program Files\nodejs\global”
npm config set cache “C:\Program Files\nodejs\cache”

查看配置是否生效
执行:npm config ls
在这里插入图片描述


配置环境变量
a、新建系统变量:NODE_PATH 值:C:\Program Files\nodejs\global\node_modules(改为你自己安装目录下)
在这里插入图片描述
b、编辑系统变量 path
在这里插入图片描述


2、安装vue/cli

执行:npm install -g @vue/cli

  • install 安装模块
  • -g 全局安装
  • @vue/cli 脚手架模块名称
    在这里插入图片描述

整个下载安装的过程还是比较快的,因为我们刚刚配置好了淘宝镜像

安装的过程中会出现一些警告,可以忽略不用管,这是因为vue脚手架内部依赖的各种模块的提示信息,不会影响我们安装和使用脚手架。


检查是否安装成功: vue -V 或者 vue --version

:先关掉命令行,重新进入
在这里插入图片描述

3、 用脚手架创建一个vue项目

a、命令行进入新建的项目目录,执行:vue create 项目名
在这里插入图片描述


b、选择你项目开发时使用的vue版本(上下键选择,回车确认),这里我用vue2
在这里插入图片描述

  • babel: ES6->ES5 语法转换支持
  • eslint:语法检查插件
  • Manually select features:自定义配置

c、按回车键确认后,脚手架开始帮我们创建项目
在这里插入图片描述


d、按照命令行上的提示,运行项目

在这里插入图片描述
进入项目目录,执行:npm run serve
在这里插入图片描述


e、根据提示,访问项目

打开浏览器,访问:http://localhost:8080/
在这里插入图片描述
结束!

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

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

相关文章

camunda执行监听器和任务监听器有什么区别

Camunda的执行监听器和任务监听器是用于添加自定义逻辑的监听器,它们的区别在于作用对象和触发事件的不同。 执行监听器是与BPMN流程中的各种流程元素(例如开始事件、用户任务、服务任务、网关等)相关联的。执行监听器可以在流程元素执行前、…

德邦快递:逆境之下,让数字化辅助业务的利润增长

#01行业背景 2022年,我国快递业务量完成 1105.8 亿件,业务量连续 9 年位居世界第一,仅用七年时间,中国的快递行业就完成了从百亿到千亿的十倍增长。我国快递物流行业正从蓝海进入红海,在下半场激烈竞争中破局的关键在…

线上问题-CPU使用频率飙升

描述 中午收到群内人员反馈环境访问速度慢。登录验证码打不开等问题。通过查看日志发现是kafka出现问题,无法处理消息。联系运维解决。在排查的过程中使用mobaXterm连接服务器。左下角看到CPU使用频率非常高。于是记录一下通过CPU查看程序占用情况分析问题。 过程 …

各大厂与卡顿和ANR的战斗记录篇

作者:Drummor 1.1 认识ANR 1.1.1 系统如何处理ANR 设计原理和影响因素篇,主要对以下关键问题展开 ANR触发的条件以及根本原因发生ANR之后,系统处理ANR的流程。应用层如何判定ANR:对ANR的感知,通过监听SIGQUIT信号。…

直播合辑 | 微软ATP与您相约100场公益演讲

(本文阅读时间:5 分钟) Public100已历经了近一年的春夏秋冬,截止目前我们一共举办33场公益直播,由微软及合作伙伴中从事 AI 相关工作的工程师、产品经理、市场总监、运营经理等各类专家和学者,分享自己在学…

IPC机制之管道

每个进程各自有不同的用户地址空间,任何一个进程的全局变量在另一个进程中都看不到,所以进程之间要交换数据必须通过内核,在内核中开辟一块缓冲区,进程1把数据从用户空间拷到内核缓冲区,进程2再从内核缓冲区把数据读走…

一行代码绘制高分SCI火山图

一、概述 在近半年中,我读了很多的高分SCI文章,很多文章中都有多种不同的火山图,包括「普通的火山图、渐变火山图、以及包含GO通路信息的火山图」! 经过一段时间的文献阅读和资料查询,终于找到了一个好用而且简单的包…

烽火HG680KA-Hi3798MV300-当贝纯净桌面-卡刷固件包

烽火HG680KA-Hi3798MV300-当贝纯净桌面-卡刷固件包-内有教程 特点: 1、适用于对应型号的电视盒子刷机; 2、开放原厂固件屏蔽的市场安装和u盘安装apk; 3、修改dns,三网通用; 4、大量精简内置的没用的软件&#xff…

乳杆菌属Lactobacillus——维持肠道和阴道健康不可忽缺的角色

谷禾健康 乳杆菌属(Lactobacillus)是厚壁菌门乳杆菌科下的一类革兰氏阳性菌,最早于19世纪在酸奶中发现。 乳杆菌在自然界中分布很广,在植物体表、乳制品、肉制品、葡萄酒、发酵面团、污水以及人畜粪便中,均可分离到。在…

dubbo高级特性分析

1.dubbo多协议支持 某些场景下,可能接口是使用的老的协议去发布的,此时希望接口能够以一种新的协议去发布,老的服务按照老的协议去调用,新的服务按照新的协议去调用 而dubbo服务就可以支持发布多种协议,如 dubbo / he…

c++入门第一篇

C 1 C是编译语言1.1 windows平台运行c1.2 linux平台运行c1.3 Clion和MinGW-w64(编译器)安装教程1.4 clion的使用教程1.5 c开发工具1.6 c发展应用领域1.7 c学习路线1.8 c学习资料1.9 编程界的四大派系 2 基本语法2.1 c程序各部分介绍2.2 编写C程序2.3 c第…

zeppos 开发工具模拟器 simulator 无法显示app

zeppos 开发工具模拟器 simulator 无法显示app 目录问题描述:simulator的 Apps 不显示 hello-world 工程解决方案 目录 问题描述:simulator的 Apps 不显示 hello-world 工程 已确认部分: 1.网卡驱动安装成功 2.simulator version:1.1.9 3.d…

【LinuxShell】Shell编程之数组

文章目录 一、数组二、数组的定义方式三、数组的相关概述1.数组包括的数据类型2.获取数组长度3.获取数组数据列表4.获取数据下标列表5.获取某下标赋值6.如何判断数组是否缺少元素 四、数组的操作1.数组遍历2.数组切片3.数组替换4.数组删除5.数组追加元素 五、函数与数组的使用1…

致力于中小企业JavaEE企业级快速开发平台、后台框架平台

一、开源项目简介 J2eeFAST 是一个 Java EE 企业级快速开发平台, 致力于打造中小企业最好用的开源免费的后台框架平台 。系统基于(Spring Boot、Spring MVC、Apache Shiro、MyBatis-Plus、Freemarker、Bootstrap、AdminLTE)经典技术开发&…

zigbee抓包器使用

软件名称:Ubiqua Protocol Analyzer 主要操作流程: 1. 添加物理抓包器 2. 抓包 3. 过滤

注入攻击(一)--------SQL注入(结合BUUCTF sqli-labs)

目录 写在前面一、暴力破解Basic-3-Brute 11.解题思路2.Burp Suite工具使用简介 二、基于GET的SQL注入Pre.使用校园网做题时可能遇到的小问题 2.1 Basic-4-SQL course 1(sql注入)1.解题思路 2.2 Basic-8-sqli-labs(sql注入的各种攻击形式&…

iostat

目录 iostat 查看读写速度和占用CPU时间比率 一、包名 二、常用命令 三、模拟磁盘读写 iptop 看哪个进程使用存储多 iostat 查看读写速度和占用CPU时间比率 一、包名 sysstat (和sar同一个包) 二、常用命令 iostat 1 每一秒…

js执行思维导图

备注: js执行: 执行分为两部分:预执行和执行 预执行:创建好执行上下文 执行:执行栈中执行 js引擎: 读取并执行js 各个浏览器的引擎如下 …

总结846

学习目标: 月目标:5月(张宇强化前10讲,背诵15篇短文,熟词僻义300词基础词) 周目标:张宇强化前3讲并完成相应的习题并记录,英语背3篇文章并回诵 每日必复习(5分钟&#…

软考A计划-重点考点-专题八(知识产权和标准化知识)

点击跳转专栏>Unity3D特效百例点击跳转专栏>案例项目实战源码点击跳转专栏>游戏脚本-辅助自动化点击跳转专栏>Android控件全解手册点击跳转专栏>Scratch编程案例 👉关于作者 专注于Android/Unity和各种游戏开发技巧,以及各种资源分享&am…