Vue框架学习记录2（vue框架实战）
接着上一节记录1，学习构建基本Vue项目模板，并且解决上一节的一些没有具体操作的坑点
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项目：
官方文档的样例快速上手 | Vue.js，使用create-vue包
以下介绍代码均使用npm命令完成（推荐要修改淘宝镜像地址，否则网络问题频繁），或者你下载了淘宝定制cnpm包，使用cnpm替代npm命令其他相同即可
npm create vue@latest 这个指令就会下载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包
npm create vite@latest 这个指令就会下载create-vite包，下载完成后自动运行它构建前端项目
是使用vite作为基础的另一个类似的脚手架工具
它与create-vue不同的是：它是一个快速生成主流框架基础模板的脚手架工具包（包含Vue），可以直接使用它构建Vue项目，可以使用它构建其他Vite支持框架项目，构建过程中就会有可选框架选项，使用者可以选择不同框架构建项目
上述命令使用如npm create vue，会下载对应create-vue 脚手架工具包，到本地的 npm 全局缓存cache目录中暂存，作为临时工具在本地缓存中使用，以便创建新的 Vite 项目。不会下载到全局仓库占用内存
我们也可以直接下载这些对应的脚手架包到全局仓库存储直接使用，当然注意内存规划，比如
npm install -g create-vue然后构建项目时，在具体的文件目录下使用cmd命令行构建项目到其中
create-vue create-vite包一样
查看全局仓库安装的包：
npm list -g卸载全局仓库里的包命令行命令（注意可能需要使用管理员权限）：
npm uninstall -g 构建过程展示：
注意项目管理是个好习惯，推荐对应具体类型项目使用专门代表它的具体文件夹统一存储管理，比如Java项目存在对应比如JavaProject文件里，python项目存在比如PythonProject文件夹里等
在我本地的D:\VueProject下构建Vue项目模板：
进入命令行cmd，我下载了具体包到全局仓库，所以使用create-vue创建一个test1项目
create-vue test1显示相关提示选项，可以自己选择，一路往下进行初始化
初始化完成后，进入项目test1目录里，然后npm install构建具体的项目仓库文件夹node_modules
然后就可以运行这个实例npm run，并访问展示页面了，默认地址为localhost:5173
而使用create-vite构建test2就会有一个提示你可选的构建框架：
选择Vue构建一路向下类似，展示页面：
两者构建的项目具体内容结构也相似
vue ui图形化界面构建项目
当然Vue还提供更直观的使用图形化界面构建项目
在具体构建文件夹的cmd命令行使用
vue ui执行以上命令，会在浏览器弹出一个项目管理的界面
然后在这个界面点击"创建"选项来创建一个项目，选择底部"在此创建项目"，页面上方也可以选择具体构建路径，然后继续往下配置选项，直观简便，参考菜鸟教程Vue3 创建项目 | 菜鸟教程