Vue脚手架的安装以及创建Vue2，Vue3、Vite+Vue3项目

Vue脚手架的安装以及创建Vue2，Vue3、Vite+Vue3项目

Vue-CLI的介绍

Vue CLI 是 Vue.js 官方提供的脚手架工具，用于快速搭建 Vue.js 应用程序。它提供了一套完整的工具链来帮助开发者高效地构建复杂的应用程序。Vue CLI 包括了创建新项目、提供内置的现代化构建设置、支持热重载（HMR）、以及一个插件系统来扩展其功能等特性。

对于第一次接触Vue小伙伴的温馨提示：在我们安装vue之前我们需要先安装Node.js，我们需要在node环境中来安装和运行Vue

Node的下载与安装

‌‌Node.js‌是一个基于‌Chrome V8引擎的JavaScript运行环境，它允许JavaScript代码在服务器端运行，使得JavaScript不仅可以用于前端开发，还能用于后端开发。

下载

Node 官网下载
根据自己所需下载对应版本，不推荐下载最新版本

下载完成后找到下载安装包进行安装

点击Next,


根据自己的磁盘情况选择对应的安装路径

直接默认就可以，再次点击Next


点击Install

待安装成功后，点击Finish,

检查安装

我们需要以下命令来检查我们的安装情况,打开终端输入以下命令
检查我们安装的 npm（Node.js 包管理器）的版本，在安装Vue-cli和创建Vue项目的时候我们都需要用到npm命令：

npm -v

检查系统上安装的 Node.js 的版本

node -v

为了提高我们的开发效率，我们还需要为npm配置国内的淘宝镜像：

npm config set registry https://registry.npmmirror.com/

没有报错则说明配置成功。
查看镜像配置：

npm config get registry

配置仓库和缓存目录

根据自己安装的node路径，并创建红框的两个文件 node_cache 和 node_global
并在终端打开运行以下命令（注意：引号内需要换成你自己的路径）

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

配置环境变量

找到桌面图标 计算机 右键，点击属性

往下滑找到 高级系统设置，点击环境变量 ，在系统属性模块 ，新建 NODE_PATH，变量值换成自己安装node的node_global文件夹里面的node_modules文件路径

编辑系统变量 path
添加 %NODE_PATH% 一栏，点击确定

一直点击确定退出，即可完成系统变量的配置

Vue-cli（脚手架的安装）

npm install -g @vue/cli

刚刚我们配置了淘宝镜像，使用整个下载过程应该还是比较快的，安装的过程中会出现一些警告，可以忽略不用管，出现以上页面，没有红色报错说明已经成功安装了Vue-cli

检查安装

打开终端，执行vue -V 或者 vue --version命令即可检查安装的版本情况，注意有时候个别小伙伴因为系统的权限问题则需要以管理员的方式打开才能正常执行该命令：

出现vue脚手架版本号,则说明安装vue成功

创建Vue2项目

为了更方便创建项目，我们大部分情况是先找个地方新建一个文件夹，并在终端打开此文件夹，
进入目录终端以后执行：vue create 项目名 例如：vue create demo
通过上下键切换选项,按回车确认，这里我使用Vue2

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

按回车键确认后，脚手架开始创建项目

出现以上页面说明创建成功，下面我们还需要按照命令行上的提示，运行项目

完成步骤后出现项目的访问地址，我们就可以复制在浏览器里面打开我们创建的项目了：

搞定！！！

创建Vue3项目

下面我们开始创建vue3的项目创建命令一样： vue create 项目名 例子：vue create demo3
这里我们可以选择第一项，但我这里选择最后一项自定义配置

按上下键是选择，在按空格键是确认选择

按回车到下一项



与vue2同样按照下面步骤操作：

创建Vite+Vue3项目

下面是基于vite来创建vue3的项目，之所以会基于vite是有以下几个特点：
快速启动：Vite 是一个现代的 Web 开发服务工具，它利用浏览器原生 ES 模块支持来实现更快的开发体验。与传统的打包工具相比，Vite 在启动项目时几乎不需要等待，因为它在开发模式下不会进行打包。
热模块替换 (HMR)：Vite 提供了高效的热模块替换功能，这意味着当源代码发生改变时，浏览器中的应用可以实时更新，而无需重新加载整个页面。这对开发体验是一个巨大的提升，因为它允许开发者即时看到修改结果。
简洁配置：Vite 的配置文件通常比 Webpack 等其他构建工具更简单明了，这使得项目的初始设置更加容易。对于 Vue 3 项目来说，这意味着你可以更专注于编写应用逻辑，而不是花费太多时间在配置文件上。
现代化构建：Vite 使用 Rollup 作为构建工具，在生产环境中可以有效地将代码转换成浏览器可理解的形式，并且优化后的输出文件体积更小，加载速度更快。
Vue 3 支持：Vue 3 本身就是为了更好的性能和更小的体积而设计的。结合 Vite 可以让你充分利用 Vue 3 的新特性，如 Composition API、Tree-shaking 等，从而创建高性能的应用程序。
社区支持：由于 Vite 是由 Evan You（Vue.js 的作者）创建的，所以它与 Vue 3 有很好的集成，并且得到了 Vue 社区的广泛支持。这意味着你可以找到大量的插件、教程和支持文档来帮助你构建项目。

创建项目

打开终端，使用以下命令：

npm  create  vite@latest

通过上下键选择框架类型，这里选择vue ,回车确认

选择语言类型，这里选择了js,也可以选择TS，现在vue3大部分都是配合TS来开发，根据个人所需

根据从下面三个步骤进行，即可完成项目搭建：


构建完成，按照项目地址在浏览器打开

在IDEA打开

这里我就演示任意项目在IDEA的启动步骤了，大同小异vue2,vue3都是一样的

选择你项目的路径，点击OK

点击箭头所指的图标

点击左上角的 + 号

找到Npm

之间点击控制台路径

正常访问

搞定！！！
今天的分享就到这里啦，小江会一直与大家一起学习努力，文章中如有不足之处，还请指出哦，感谢支持，持续更新中 ……