创建vue3工程
创建方式[*]基于 vite 创建（vue3官方推荐）
[*]基于 vue-cli 创建
基于 vite 创建
vite 官方文档
vite 是新一代前端构建工具，上风如下：
[*]轻量快速的热重载（HMR），能实现极速的服务启动。
[*]对 TypeScript、JSX、CSS 等支持开箱即用。
[*]真正的按需编译，不再等待整个应用编译完成。
[*]webpack构建 与 vite构建对比图如下：
https://i-blog.csdnimg.cn/direct/c7c9ab52c879431f93a409298cb73b98.pnghttps://i-blog.csdnimg.cn/direct/a263d50f530544639150bd18b48594ff.png
[*]详细操作如下（点击查看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 的构建举动，如设置别名、配置插件等。
插件
https://i-blog.csdnimg.cn/direct/984f8660b76247319efc9e2d59067da3.png
基于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
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]