创建方式
- 基于 vite 创建（vue3官方推荐）
- 基于 vue-cli 创建
基于 vite 创建
vite 官方文档
vite 是新一代前端构建工具，优势如下：
- 轻量快速的热重载（
HMR），能实现极速的服务启动。 - 对
TypeScript、JSX、CSS等支持开箱即用。 - 真正的按需编译，不再等待整个应用编译完成。
webpack构建 与vite构建对比图如下：
- 具体操作如下（点击查看vue3官方文档-创建一个vue应用）
- 注意：node.js的版本必须大于v18.3.0
## 1.创建命令
npm create vue@latest## 2.具体配置
## 配置项目名称
√ Project name: vue3_test
## 是否添加TypeScript支持
√ Add TypeScript? Yes
## 是否添加JSX支持
√ Add JSX Support? No
## 是否添加路由环境
√ Add Vue Router for Single Page Application development? No
## 是否添加pinia环境
√ Add Pinia for state management? No
## 是否添加单元测试
√ Add Vitest for Unit Testing? No
## 是否添加端到端测试方案
√ Add an End-to-End Testing Solution? » No
## 是否添加ESLint语法检查
√ Add ESLint for code quality? Yes
## 是否添加Prettiert代码格式化
√ Add Prettier for code formatting? No
项目目录结构
my-vue3-project/
├── public/
│ └── favicon.ico
├── src/
│ ├── assets/
│ │ ├── base.css
│ │ ├── logo.svg
│ │ └── main.css
│ ├── components/
│ │ ├── icons/
│ │ ├── HelloWorld.vue
│ │ └── TheWelcome.vue
│ ├── router/
│ │ └── index.ts
│ ├── store/
│ │ └── counter.ts
│ ├── views/
│ │ ├── HomeView.vue
│ │ └── AboutView.vue
│ ├── App.vue
│ └── main.ts
│
├── .gitignore
├── env.d.ts
├── index.html
├── package-lock.json
├── package.json
├── README.md
├── tsconfig.app.json
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.ts
顶级目录的文件说明：
.gitignore：用于指定哪些文件和目录不应被 Git 版本控制系统跟踪。env.d.ts：用于定义环境变量的 TypeScript 类型声明文件。index.html：应用的入口 HTML 文件，通常包含对 JavaScript 包的引用和基本的页面结构。package-lock.json（如果使用 npm）：记录了项目确切的依赖版本信息。package.json：包含项目的元数据、依赖列表、脚本命令等。README.md：项目的说明文档，通常包括项目的介绍、安装说明、使用方法等。tsconfig.app.json、tsconfig.json、tsconfig.node.json：不同场景下的 TypeScript 配置文件，可能用于特定的编译选项或模块解析规则。vite.config.ts：Vite 的配置文件，用于自定义 Vite 的构建行为，如设置别名、配置插件等。
插件
基于vue-cli创建
vue-cli 官方文档
注意：目前vue-cli已处于维护模式，官方推荐基于 Vite 创建项目。
步骤如下：
## 查看@vue/cli版本，确保@vue/cli版本在4.5.0以上
vue --version## 安装或者升级你的@vue/cli
npm install -g @vue/cli## 执行创建命令
vue create vue_test## 随后选择3.x
## Choose a version of Vue.js that you want to start the project with (Use arrow keys)
## > 3.x
## 2.x## 启动
cd vue_test
npm run serve
)