第08讲:使用脚手架创建vue项目

news2024/10/7 4:27:06

一、安装NodeJS

二、配置环境变量

2.1、软件安装完成之后配置npm的环境变量

第1步:获取npm安装位置

使用管理员身份打开CMD,用如下命令获取npm的安装位置:

npm config list

在这里插入图片描述

第2步:配置环境变量

将以上获取的路径保存到path变量中
在这里插入图片描述

三、安装vue-cli

3.1、使用淘宝镜像

以管理员的身份运行CMD,并切换到NodeJS的安装目录
NodeJS的默认安装路径
在这里插入图片描述

命令行:

cd C:\Program Files\nodejs

Tip:如果是win10以上操作系统,并且NodeJS安装到了其他盘符(比如D盘),则需要在cd命令中添加/d参数,如:

cd /d D:\Program Files\nodejs

使用以下命令安装淘宝镜像

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

点击回车之后不会有其他输出,但是已经成功设置了淘宝镜像(前提是以下命令书写正确,注意单词的书写)
在这里插入图片描述

3.2、安装vue-cli

使用以下命令安装vue-cli

npm install -g @vue/cli

接下来就是下载过程,如果下载的非常慢,就说明淘宝镜像没有设置成功,请审视一下自己的单词是不是有拼错的地方
在这里插入图片描述

Ps:出现WARN是正确的,只要不出现ERROR就行,安装完成之后会显示有多少个包已经被添加(added xxx packages in xxxm)

此时输入以下命令查看vue-cli的版本,如果可以正常显示,则别是vue-cli安装完成

vue -V

在这里插入图片描述

四、使用脚手架创建vue项目

在电脑中创建一个文件夹,位置随意,但由于考虑到文件权限问题,尽量不要使用c盘根目录,当前案例将文件夹创建在我的文档中
在这里插入图片描述
使用管理员权限运行CMD,并切换到当前位置
在这里插入图片描述

Ps:如果是win10以上版本系统无法直接通过cd命令切换到其他盘符,需要在cd命令中添加/d属性即可

使用如下命令在当前文件夹下创建项目demo01

vue create demo01

在这里插入图片描述
移动光标键选择[Manually select features],按下回车键
在这里插入图片描述按下回车键
在这里插入图片描述
当前的案例使用的是vue的2.x版本,选择2.x,按下回车键
在这里插入图片描述在这个界面中,vue-cli 是在询问你:是将所有的配置都放在 pacakge.json 一个文件中,还是将各个功能的配置分开存放在独立的文件中?

选择第一项:分开存放。
按下回车键
在这里插入图片描述
在这里,vue-cli 是在询问你:是否将你的这些设置保留下来作为默认的项目设置的模板。默认值是 N
我们输入 N ,或者直接按回车确认进入安装界面:
当出现如下界面时,则表示项目成功创建
在这里插入图片描述在这里插入图片描述

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

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

相关文章

flask请求与响应、session执行流程

目录 请求对象 响应对象 session的使用和原理 闪现(flash) 请求扩展 蓝图 请求对象 请求对象request是全局的,需要导入这个全局的request,在哪个视图函数中就是当次的request对象 请求数据: request.method # 获取提交的方法 …

文件包含漏洞简介

今天继续给大家介绍渗透测试相关知识,本文主要内容是文件包含漏洞简介。 免责声明: 本文所介绍的内容仅做学习交流使用,严禁利用文中技术进行非法行为,否则造成一切严重后果自负! 再次强调:严禁对未授权设备…

一些好玩的js小作品

今天小编给大家带来了一些很实用的js小作品,下面请一看究竟。 1、计算详细年龄工具js脚本 2、检测是否安装Flash插件及版本号js脚本 3、无法查看源码的页面 4、面积换算js脚本 5、体积和容积换算js脚本 6、长度换算js脚本 7、重量换算js脚本 8、只能输入汉字…

记一些女装数据分析

文章目录服装维度女装生命周期门店维度常见度量值衍生指标服装维度 尺码:XS、S、M、L、XL颜色:黑、红、蓝、白……一级分类:上半身、下半身、全身季节:春、夏、秋、冬价格类型:正价、特价、折扣价、降价、优惠券…价格…

Android自定义ViewGroup布局进阶,完整的九宫格实现

自定义ViewGroup九宫格 前言 在之前的文章我们复习了 ViewGroup 的测量与布局,那么我们这一篇效果就可以在之前的基础上实现一个灵活的九宫格布局。 那么一个九宫格的 ViewGroup 如何定义,我们分解为如下的几个步骤来实现: 先计算与测量九…

【Linux学习】进程信号

文章目录前言一、信号初识1. 信号的概念2. Linux中的普通信号3. 信号的处理二、信号产生1. 终端按键产生信号2. 系统调用发送信号2.1 kill函数2.2 raise函数2.3 abort函数3. 由软件条件产生信号3.1 SIGPIPE信号3.2 alarm函数4. 由硬件异常产生信号三、信号阻塞1. 信号阻塞即其他…

[前端面试题]flex上下布局

[前端面试题]flex上下布局 [万字长文]一文教你彻底搞懂flex布局 [CSS]一些flex的应用场景 页面中有两个元素。元素bottom固定在底部,靠内容来撑开;而元素top在上边,高度自适应,自动铺满除bottom剩下的空间,且top内容…

第十四届蓝桥杯集训——JavaC组第十篇——分支语句

第十四届蓝桥杯集训——JavaC组第十篇——分支语句 目录 第十四届蓝桥杯集训——JavaC组第十篇——分支语句 if单分支 if单分支语法 if单分支语句示例 单分支例题: 连续单分支示例 if简写语法 if双分支语句 if双分支语法 if双分支语法示例 if双分支简写法…

全栈jmeter接口测试教程之Jmeter+ant+jenkins实现持续集成

jmeterantjenkins持续集成 一、下载并配置jmeter 首先下载jmeter工具,并配置好环境变量;参考:https://www.cnblogs.com/YouJeffrey/p/16029894.html jmeter默认保存的是.jtl格式的文件,要设置一下bin/jmeter.properties,文件内容…

圣诞节快来了~用python做一个粒子烟花震撼众人赚个女孩回来吧~

前言 嗨喽,大家好呀~这里是爱看美女的茜茜呐 又到了学Python时刻~ 准备 准备一下你运行效果的背景图 以及一首你喜欢或那你女朋友喜欢的音乐 效果 代码展示 导入模块 import random import pygame as py import tkinter as tk from time import time, sleep fr…

Fuzzing with Data Dependency Information阅读笔记

相关数据 论文:https://www.s3.eurecom.fr/docs/eurosp22_mantovani.pdf 开源代码:https://github.com/elManto/DDFuzz 论文背景 这篇论文是2022年发表在sp上的一篇论文,也是在afl的基础上进行改进的一篇论文。afl是在afl的基础上进行整合…

第二十六章 linux-输入子系统二

第二十六章 linux-输入子系统二 文章目录第二十六章 linux-输入子系统二框架三个重要结构体struct input_devstruct input_handlerstruct input_handle框架 Linux系统支持的输入设备繁多,例如键盘、鼠标、触摸屏、手柄或者是一些输入设备像体感输入等等&#xff0c…

[附源码]Python计算机毕业设计电子投票系统Django(程序+LW)

该项目含有源码、文档、程序、数据库、配套开发软件、软件安装教程 项目运行 环境配置: Pychram社区版 python3.7.7 Mysql5.7 HBuilderXlist pipNavicat11Djangonodejs。 项目技术: django python Vue 等等组成,B/S模式 pychram管理等…

30岁转行网络安全来得及吗?有发展空间吗?

30岁转行网络安全来得及吗?有发展空间吗? 现阶段,很多30岁左右的人群都面临就业难的问题,尤其是对于年龄已过30.没有一技之长的人。现阶段,网络安全行业已成了风口行业,也有很多30岁人群也想转行学习网络安全,但又担…

python之界面案例

目录 一、海龟绘图 二、图形化编程入门 窗口创建 三、表格控件的简单认知 四、综合案例 一、海龟绘图 海龟绘图作用:提升界面美观度,吸引用户使用 学习网址: turtle --- 海龟绘图 — Python 3.8.14 文档 二、图形化编程入门 窗口创建 …

【数据结构与算法】跳表

目录 一、什么是跳表 二、跳表的效率验证 三、跳表的实现 1、search 2、add 3、erase 四、跳表与其它搜索结构对比 总结 一、什么是跳表 跳表是一个随机化的数据结构,可以被看做二叉树的一个变种,它在性能上和红黑树,AVL树不相上下&am…

【高精度定位】RTK定位与RTD定位知识科普

高精度定位一般指亚米级别或厘米级别的定位,常见的室内有蓝牙AoA和UWB两种技术,室外有北斗地基增强技术,这些技术都是采用算法进行定位。 工业4.0时代,在资源和环境约束不断强化的背景下,创新驱动传统制造向智能制造转…

【MAUI】条形码,二维码扫描功能

前言 本系列文章面向移动开发小白,从零开始进行平台相关功能开发,演示如何参考平台的官方文档使用MAUI技术来开发相应功能。 介绍 移动端的扫描条形码、二维码的功能已经随处可见,已经很难找到一个不支持扫描的App了,但是微软的…

sync fsync fdatasync 三者的区别

传统的UNIX系统实现在内核中设有缓冲区高速缓存或页高速缓存,大多数磁盘I/O都通过缓区进行。当我们向文件写入数据时,内核通常先将数据复制到缓冲区中,然后排入队列,晚些时候再入磁盘。这种方式被称为延迟写 (delayed wrie)(Bach[…

最惨面试季:“这么简单的9道题,我刷掉了90%的测试员。”

人往高处走水往低处流,十二月将至,“金三银四”招聘季还会远吗? 远观2022年的招聘季,在资本寒冬的映照下,的确萧条了不少,裁员、取消年终奖、末尾淘汰制等热门制度,让很多人陷入了“工作难保&a…