摘要：下载的vue-cli支持包不是最新的Vue CLI脚手架工具包了，这个包latest版本为2.9.6，不支持Vue3命令行构建，是Vue2时期使用的

接着上一节记录1，学习构建基本Vue项目模板，并且解决上一节的一些没有具体操作的坑点

上一节中讲解了Vue环境的搭建和下载基本的Vue框架包和构建包vue-cli

踩坑：

下载的vue-cli支持包不是最新的Vue CLI脚手架工具包了，这个包latest版本为2.9.6，不支持Vue3命令行构建，是Vue2时期使用的

Vue CLI的包名称由 vue-cli 更新成了 @vue/cli，使用@vue/cli包来完成构建，latest版本为5.0.8，支持Vue3

但是仍然不推荐使用Vue CLI工具了现在，参考官方文档@vue/cli工具处于维护中

现在推荐使用基于新构建工具Vite来构建Vue项目，但是具体使用的包可选

官方文档的样例快速上手 | Vue.js，使用create-vue包

以下介绍代码均使用npm命令完成（推荐要修改淘宝镜像地址，否则网络问题频繁），或者你下载了淘宝定制cnpm包，使用cnpm替代npm命令其他相同即可

这个指令就会下载create-vue包，@latest代表下载的最新的包版本，下载完成后并自动运行它构建Vue项目，会看到后续提示信息供你选择构建项目相关配置，首先如果你没在后续指定项目名，也会让你指定项目名作为文件名，后续还有一些配置等等

create-vue包是Vue官方提供的一个基于Vite构建项目新的脚手架工具包

基于Vite构建前端项目：

Vite 需要 Node.js 版本 18+ 或 20+，有些模板可能需要依赖更高的 Node 版本才能正常运行，当你的包管理器发出警告时，请注意升级你的 Node 版本

Vite支持构建Vue3项目，它是一个构建工具，由 Vue 的创建者尤雨溪（Evan You）开发，设计目标是成为一个通用的前端构建工具，所以它不仅仅服务于 Vue 项目，它还支持多个框架，包括 React、Preact、Svelte，甚至是纯 JavaScript 项目

官方文档使用Vite构建样例开始 | Vite 官方中文文档，使用create-vite包

这个指令就会下载create-vite包，下载完成后自动运行它构建前端项目

是使用vite作为基础的另一个类似的脚手架工具

它与create-vue不同的是：它是一个快速生成主流框架基础模板的脚手架工具包（包含Vue），可以直接使用它构建Vue项目，可以使用它构建其他Vite支持框架项目，构建过程中就会有可选框架选项，使用者可以选择不同框架构建项目

上述命令使用如npm create vue，会下载对应create-vue 脚手架工具包，到本地的 npm 全局缓存cache目录中暂存，作为临时工具在本地缓存中使用，以便创建新的 Vite 项目。不会下载到全局仓库占用内存

我们也可以直接下载这些对应的脚手架包到全局仓库存储直接使用，当然注意内存规划，比如

然后构建项目时，在具体的文件目录下使用cmd命令行构建项目到其中

create-vite包一样

查看全局仓库安装的包：

卸载全局仓库里的包命令行命令（注意可能需要使用管理员权限）：

注意项目管理是个好习惯，推荐对应具体类型项目使用专门代表它的具体文件夹统一存储管理，比如Java项目存在对应比如JavaProject文件里，python项目存在比如PythonProject文件夹里等

在我本地的D:\VueProject下构建Vue项目模板：

进入命令行cmd，我下载了具体包到全局仓库，所以使用create-vue创建一个test1项目

显示相关提示选项，可以自己选择，一路往下进行初始化

初始化完成后，进入项目test1目录里，然后npm install构建具体的项目仓库文件夹node_modules

然后就可以运行这个实例npm run，并访问展示页面了，默认地址为localhost:5173

而使用create-vite构建test2就会有一个提示你可选的构建框架：

选择Vue构建一路向下类似，展示页面：

两者构建的项目具体内容结构也相似

当然Vue还提供更直观的使用图形化界面构建项目

在具体构建文件夹的cmd命令行使用

来源：信笔乱画