先了解一下几个概念
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)
选择自己安装的系统是什么
- win+R键输入cmd===============>按下Enter
- node -v =============>按下Enter 判断nodes的版本
- 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>