Vue3学习-vue项目创建、项目结构介绍、vue文件结构介绍

本文链接：https://blog.youkuaiyun.com/u013342594/article/details/144245793

一、Vue介绍

Vue(读音/vjuː/，类似于view) 是一套用于构建前后端分离的框架。刚开始是由国内优秀选手尤雨溪开发出来的，目前是全球“最”流行的前端框架。使用vue开发网页很简单，并且技术生态环境完善，社区活跃，是前后端找工作必备技能！Vue目前是3版本了。

Vue官网：https://cn.vuejs.org/
Vue Github：https://github.com/vuejs

二、Vue项目创建

创建Vue项目目前有两种方式，一种是使用VueCli，另一种是使用Vite，其中VueCli已经处于维护模式了，过不了多久便不再支持，因此我们学习Vite的方式创建。

使用Vite 创建项目有以下优点：

采用热重载功能，能快速的启动服务。
对TypeScript、JSX等支持开箱即用。
按需编译，不用等待整个应用编译完成。

使用Vite 创建项目过程如下：

打开创建项目的目录

D:\codes\vue3_basic

然后直接输入cmd,然后输入回车键

就会打开终端，位置在当前终端

使用Vite 创建项目命令

npm create vue@latest

D:\codes\vue3_basic>npm create vue@latest

Vue.js - The Progressive JavaScript Framework

√ 请输入项目名称： ... startvue
√ 是否使用 TypeScript 语法？ ... 否 / 是
√ 是否启用 JSX 支持？ ... 否 / 是
√ 是否引入 Vue Router 进行单页面应用开发？ ... 否 / 是
√ 是否引入 Pinia 用于状态管理？ ... 否 / 是
√ 是否引入 Vitest 用于单元测试？ ... 否 / 是
√ 是否要引入一款端到端（End to End）测试工具？ » 不需要
√ 是否引入 ESLint 用于代码质量检测？ » 是
√ 是否引入 Prettier 用于代码格式化？ ... 否 / 是

正在初始化项目 D:\codes\vue3_basic\startvue...

项目初始化完成，可执行以下命令：

  cd startvue
  npm install
  npm run dev

使用VSCode打开项目，然后再执行上面的命令

选择文件，打开文件夹

点击信任

VSCode打开终端（鼠标放到下面这个线上往上面拖动）

然后执行命令，安装依赖包

vite-plugin-inspect 插件需要 Vite 的版本在 3.x、4.x 或 5.x 范围内。您可能需要降级 Vite 版本以兼容该插件。更改package.json的vite版本为5.1.6

npm install

安装的包是package.json中的dependencies和devDependencies里面的包，保存在mode_modules文件夹中

启动项目

npm run dev

出现以下界面就表示启动项目成功了

浏览器可以打开以下界面

三、Vue项目结构介绍

node_modules：存放项目依赖的第三方包
public：一些公共的文件
src：项目的源代码，图片资源等
--assets：图片、字体等静态资源
--components：自定义组件
App.vue：项目的主入口vue文件
main.js：项目的主入口ts文件
index.html：项目的html文件
package.json：项目依赖包文件
vite.config.js：vite项目配置文件