一、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 创建项目过程如下：

1
2
3
$ npm create vue@latest
或
$ npm create vue@3.10.3

接着会出现一些配置的提示：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
# 输入项目名称
? 请输入项目名称： startvue

# 是否添加TypeScript支持
? 是否使用 TypeScript 语法？  否

# 是否添加JSX支持
? 是否启用 JSX 支持？ 否

# 是否添加VueRouter
? 是否引入 Vue Router 进行单页面应用开发？  否

# 是否添加pinia
? 是否引入 Pinia 用于状态管理？  否

# 是否添加单元测试
? 是否引入 Vitest 用于单元测试？  否

# 是否添加端到端测试方案
? 是否要引入一款端到端（End to End）测试工具？  不需要

# 是否添加ESLint语法检查
? 是否引入 ESLint 用于代码质量检测？  是

# 是否添加Prettiert代码格式化
? 是否引入 Prettier 用于代码格式化？ 否

# 是否引入Vue DevTools7调试
? 是否引入 Vue DevTools 7 扩展用于调试? (试验阶段) 是

创建完项目后，在项目根路径下输入命令：

1
2
3
$ cd startvue
$ npm install
$ npm run dev

即可启动项目运行。

三、项目结构介绍

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