使用Vite创建一个Vue项目

安装软件

我们使用vscode代码编辑器来创建这个VUE项目官网网址如下

https://code.visualstudio.com/

一、软件配置

安装完成之后软件打开是这样的

有些朋友可能是英文界面，需要在左侧选择第五个按钮安装中文插件，然后点击安装（我这里已经安装过此款插件）

二、在vscode配置node.js环境

下面是node.js的官网，打开之后下载node.js环境包

https://nodejs.org/zh-cn

安装完成之后在cmd窗口运行node -v指令，如果安装成功之后将显示安装完成的版本号，如果显示“不是内部指令”就是没有安装成功

在安装node.js的时候会自动安装npm包管理工具，在cmd窗口输入npm -v会显示所对应的安装的版本

三、使用npm命令安装yarn

在确保安装了node.js环境之后，使用npm安装yarn，安装命令如下

npm install yarn -g

安装成功之后将显示以下代码

为了提高下载yarn的速度，可以将yarn的下载源切换成国内的镜像服务器，具体设置命令如下

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

为了验证镜像地址是否验证成功，使用以下命令进行验证

yarn config get registry

执行上述命令后如果显示了设置的镜像地址，则表示设置成功

四、通过模版自动创建VUE3项目

打开命令提示符，将目录切换到已经创建好的文件夹下面，使用yarn创建一个基于vite+vue模版且项目名称为（项目名称）的项目，具体命令如下

yarn create vite (项目名称) --template vue

输入之后显示以下代码

这就是项目创建成功了，在项目创建完成之后给出了一些提示命令，需要执行这些命令才能完成项目的启动，具体命令如下

cd hello              #切换到项目目录
yarn                  #安装项目的全部依赖
yarn dev              #启动服务

项目启动后，会默认开启一个本地服务，具体如下

这就是项目创建成功之后的页面

补充：Vue3项目的结构目录

目录和文件说明

-- node_modules/: 存放项目的所有依赖包，由 npm 或 yarn 自动生成和管理
-- public/: 静态文件目录，里面的文件不会被 Webpack 处理，最终会原样复制到打包目录下
-- favicon.ico: 网站的图标。 
-- index.html: 应用的主 HTML 文件，Vue CLI 会在构建时自动注入生成的静态资源链接。
-- src/: 源代码目录，存放应用的主要代码
-- assets/: 存放静态资源，如图像、字体等。这些文件会由 Webpack 处理，可以通过相对路径引用。
-- components/: 存放 Vue 组件，每个组件都是一个独立的 .vue 文件。
-- views/: 存放视图组件，通常对应路由，每个视图都是一个独立的 .vue。 
-- App.vue: 根组件，整个应用的入口组件。 
-- main.js: 应用的入口文件，负责创建 Vue 实例并挂载到 DOM 上^1^。 
-- router/: 存放路由配置文件。 index.js: 路由的配置文件，定义了应用的路由规则^1^。
-- .gitignore: Git 忽略文件列表，指定哪些文件和目录不被包含在版本控制中
-- babel.config.js: Babel 配置文件，指定 Babel 的编译规则
-- package.json: 项目的依赖、脚本和其他元数据
-- README.md: 项目的说明文件，通常用于描述项目、如何安装和使用等信息
-- vue.config.js: Vue CLI 的配置文件，用于修改默认配置
-- yarn.lock 或 package-lock.json: 锁定安装的依赖版本，确保项目依赖的一致性

到此一个Vite+Vue3项目就创建成功了