VueCLi的安装步骤(第四课)

简介: VueCLi的安装步骤(第四课)

先了解一下几个概念


1 CLi的定义


命令行界面(英语:command-line interface,缩写:CLI)是在图形用户界面得到普及之前使用最为广泛的用户界面,它通常不支持鼠标,用户通过键盘输入指令,计算机接收到指令后,予以执行。也有人称之为字符用户界面(CUI)。


通常认为,命令行界面(CLI)没有图形用户界面(GUI)那么方便用户操作。因为,命令行界面的软件通常需要用户记忆操作的命令,但是,由于其本身的特点,命令行界面要较图形用户界面节约计算机系统的资源。在熟记命令的前提下,使用命令行界面往往要较使用图形用户界面的操作速度要快。所以,图形用户界面的操作系统中,都保留着可选的命令行界面。


2 Node.js


Node.js发布于2009年5月,由Ryan Dahl开发,是一个基于Chrome V8引擎的JavaScript运行环境,使用了一个事件驱动、非阻塞式I/O模型, [1]  让JavaScript 运行在服务端的开发平台,它让JavaScript成为与PHP、Python、Perl、Ruby等服务端语言平起平坐的脚本语言。 [2]


Node.js对一些特殊用例进行优化,提供替代的API,使得V8在非浏览器环境下运行得更好,V8引擎执行Javascript的速度非常快,性能非常好,基于Chrome JavaScript运行时建立的平台, 用于方便地搭建响应速度快、易于扩展的网络应用。



3 npm



Nodejs软件包管理工具


NPM的全称是Node Package Manager,是一个NodeJS包管理和分发工具,已经成为了非官方的发布Node模块(包)的标准。


4 webpack


webpack 是代码编译工具,有入口、出口、loader 和插件。webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时,它会在内部构建一个依赖图(dependency graph),此依赖图对应映射到项目所需的每个模块,并生成一个或多个 bundle。


5 vueCli


概念:本义指建筑上工人们构建房屋所用的能够用脚,手攀爬的架子,软件开发中指帮助我们快速搭建工程的工具,自动帮我们生成工程目录以及相关依赖。


作用:快速初始化工程项目文件目录。


使用:windows 中通过在cmd中执行初始化工程的命令。


而重点在VueCli脚手架的安装上


先吧项目的大致流程以截图的方式展示出来 然后以文字的方式一步一步的解释

测试运行的环境是否安装了Node.js 测试版本是否存在

 

安装淘宝的境象仓库 是否成功利用命令行操作一下

创建自己的第一个脚手架下那个吗名称为cad

显示项目已经创建成功

 

创建完成后有项目大纲的目录提示

 

运行到这里又说名已经成功安装了


上面是图片的演示信息可能看的不太明白吧!接下来文字说明


第一步 去官方官网下载安装node.js的安装包   下载 | Node.js 中文网 (nodejs.cn)

选择自己安装的系统是什么

 


  1. win+R键输入cmd===============>按下Enter
  2. node -v =============>按下Enter 判断nodes的版本
  3. npm -v =============>按下Enter 判断node中npm的版本号

第二步 下载淘宝镜像仓库的地址

npm install -g cnpm --registry=http://registry.npm.taobao.org

  • 淘宝镜像地址
  • npm install -g cnpm --registry=http://registry.npm.taobao.org


第三步 安装Vue CLI(目前最新的版本是v5.0.8) 和对 Vue CLI测试

升级Vue CLI: 如果是比较旧的版本,可以通过下面的命令来升级

npm update @vue/cli -g


测试VueCli的版本号

第四步 创建我的第一个VueCli项目

将命令行文件转送到这个窗口

 

切块盘符

创建项目

Vue create 项目的名称

选择创建的版本号 Vue2 Vue 3

 

项目正在创建中

 

Microsoft Windows [版本 10.0.22621.819]
(c) Microsoft Corporation。保留所有权利。
C:\Users\MZFAITHDREAM>node -v
v16.14.2
C:\Users\MZFAITHDREAM>npm -v
8.5.0
C:\Users\MZFAITHDREAM>npm install -g cnpm --registry=http://registry.npm.taobao.org
npm WARN deprecated @npmcli/move-file@2.0.1: This functionality has been moved to @npmcli/fs
removed 183 packages, and changed 362 packages in 48s
C:\Users\MZFAITHDREAM>npm WARN deprecated @npmcli/move-file@2.0.1: This functionality has been moved to @npmcli/fs
Unknown command: "WARN"
To see a list of supported npm commands, run:
  npm help
C:\Users\MZFAITHDREAM>npm install -g vue-cli
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated coffee-script@1.12.7: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
npm ERR! code EEXIST
npm ERR! path C:\Users\MZFAITHDREAM\AppData\Roaming\npm\vue.cmd
npm ERR! EEXIST: file already exists
npm ERR! File exists: C:\Users\MZFAITHDREAM\AppData\Roaming\npm\vue.cmd
npm ERR! Remove the existing file and try again, or run npm
npm ERR! with --force to overwrite files recklessly.
npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\MZFAITHDREAM\AppData\Local\npm-cache\_logs\2022-11-16T04_04_56_988Z-debug-0.log
C:\Users\MZFAITHDREAM>npm update @vue/cli -g
changed 1 package in 26s
72 packages are looking for funding
  run `npm fund` for details
C:\Users\MZFAITHDREAM>vue -V
@vue/cli 5.0.8
C:\Users\MZFAITHDREAM> cd D:\com.Html\Com.VueCll
C:\Users\MZFAITHDREAM>cmd D:\com.Html\Com.VueCll
Microsoft Windows [版本 10.0.22621.819]
(c) Microsoft Corporation。保留所有权利。
C:\Users\MZFAITHDREAM> d:
D:\com.Html\Com.VueCll>Vue create cat
Vue CLI v5.0.8
? Please pick a preset: Default ([Vue 3] babel, eslint)
Vue CLI v5.0.8
✨  Creating project in D:\com.Html\Com.VueCll\cat.
⚙️  Installing CLI plugins. This might take a while...
added 847 packages in 1m
🚀  Invoking generators...
📦  Installing additional dependencies...
added 96 packages in 15s
⚓  Running completion hooks...
📄  Generating README.md...
🎉  Successfully created project cat.
👉  Get started with the following commands:
 $ cd cat
 $ npm run serve
D:\com.Html\Com.VueCll>

相关文章
|
存储 Kubernetes API
【K8S系列】第十一讲:包管理神器-Helm
【K8S系列】第十一讲:包管理神器-Helm
286 0
|
4月前
|
JavaScript 前端开发 开发者
从零到一:教你如何发布自己的npm插件包
从零到一:教你如何发布自己的npm插件包
|
6月前
|
前端开发
[巨详细]安装HBuilder-X教程
【6月更文挑战第6天】下载HBuilder-X 官方网址:https://www.dcloud.io/ 点击网址 ,打开官网
244 1
|
7月前
|
JSON JavaScript 关系型数据库
❤Nodejs 第十六章(Nodejs环境安装和依赖使用)
【4月更文挑战第16天】本文介绍了Node.js环境安装和项目搭建步骤。检查Node.js和npm版本安装核心依赖,如Express(Web应用框架)、MySQL库、CORS(解决跨域问题)、body-parser(解析POST数据)、express-jwt和jsonwebtoken(JWT验证)、multer(文件上传处理)、ws(WebSocket支持),以及可选的dotenv(管理环境变量)和ejs(模板引擎)。完整源码可在Gitee开源项目[nexusapi](https://gitee.com/lintaibai/nexusapi)中找到。
125 0
|
7月前
|
分布式计算 Java 网络安全
Ambari【部署 01】最新版本ambari-2.7.7下载编译打包安装使用(踩坑实录)
Ambari【部署 01】最新版本ambari-2.7.7下载编译打包安装使用(踩坑实录)
799 0
|
7月前
|
移动开发 前端开发 IDE
前端知识笔记(三十四)———HBuilder的下载与使用(详细步骤)
前端知识笔记(三十四)———HBuilder的下载与使用(详细步骤)
249 0
|
Ubuntu Python
全网最简约的Vscode配置Anaconda环境(百分百成功)
全网最简约的Vscode配置Anaconda环境(百分百成功)
16387 0
全网最简约的Vscode配置Anaconda环境(百分百成功)
|
Web App开发 IDE Java
手把手教你下载安装Goland 新手别错过!
手把手教你下载安装Goland 新手别错过!
414 0
|
存储 缓存 资源调度
众生皆苦,我选pnpm(一)
众生皆苦,我选pnpm
176 1
|
存储 资源调度 JavaScript
众生皆苦,我选pnpm(三)
众生皆苦,我选pnpm
320 0