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>

相关文章
|
7月前
|
存储 Kubernetes API
【K8S系列】第十一讲:包管理神器-Helm
【K8S系列】第十一讲:包管理神器-Helm
107 0
|
8月前
|
JavaScript 开发工具 git
GitBook新手入门
GitBook是使用Git管理书籍项目,使用Markdown撰写书籍,并使用GitHub和GitBook网站进行托管的一个实用工具。下面简单说一下新手如何使用该强大的工具。
88 0
|
存储 JavaScript 前端开发
VSCode安装配置使用教程(最新版超详细保姆级含插件)一文就够了
Visual Studio Code 是一个轻量级功能强大的源代码编辑器,支持语法高亮、代码自动补全(又称 IntelliSense)、代码重构、查看定义功能,并且内置了命令行工具和 Git 版本控制系统。适用于 Windows、macOS 和 Linux。它内置了对 JavaScript、TypeScript 和 Node.js 的支持,并为其他语言和运行时(如 C++、C#、Java、Python、PHP、Go、.NET)提供了丰富的扩展生态系统。为了不影响读者的沉浸式阅读学习,如需使用目录请在左侧使用即可。
3753 0
VSCode安装配置使用教程(最新版超详细保姆级含插件)一文就够了
|
3月前
|
缓存 JavaScript 开发工具
【安装指南】VSCode搭建运行Vue的详细教程
【安装指南】VSCode搭建运行Vue的详细教程
609 0
|
13天前
|
资源调度 JavaScript 搜索推荐
《VitePress 简易速速上手小册》第9章 VitePress 的扩展与插件(2024 最新版)
《VitePress 简易速速上手小册》第9章 VitePress 的扩展与插件(2024 最新版)
27 0
|
JavaScript 前端开发 搜索推荐
《VitePress 简易速速上手小册》第1章:VitePress 入门(2024 最新版)
《VitePress 简易速速上手小册》第1章:VitePress 入门(2024 最新版)
37 1
|
13天前
|
JavaScript 搜索推荐 前端开发
《VitePress 简易速速上手小册》第2章:Markdown 与页面创建(2024 最新版)
《VitePress 简易速速上手小册》第2章:Markdown 与页面创建(2024 最新版)
37 0
|
2月前
|
JavaScript 前端开发 数据安全/隐私保护
antdv入门安装教程
antdv入门安装教程
|
5月前
|
定位技术
MicroStation软件与Terrasolid插件合集的安装方法
MicroStation软件与Terrasolid插件合集的安装方法
|
9月前
|
缓存 JavaScript 前端开发
gulp安装教程(简单的前端自动化教程)
gulp安装教程(简单的前端自动化教程)
193 0