创建vue3工程

创建方式

• 基于 vite 创建（vue3官方推荐）
  
• 基于 vue-cli 创建
  

基于 vite 创建

   vite 官方文档
  vite 是新一代前端构建工具，上风如下：

• 轻量快速的热重载（HMR），能实现极速的服务启动。
  
• 对 TypeScript、JSX、CSS 等支持开箱即用。
  
• 真正的按需编译，不再等待整个应用编译完成。
  
• webpack构建 与 vite构建对比图如下：
  

   

  

  

• 详细操作如下（点击查看vue3官方文档-创建一个vue应用）
  
  
  
  • 注意：node.js的版本必须大于v18.3.0
    
  
  

1. ## 1.创建命令
2. npm create vue@latest
4. ## 2.具体配置
5. ## 配置项目名称
6. √ Project name: vue3_test
7. ## 是否添加TypeScript支持
8. √ Add TypeScript?  Yes
9. ## 是否添加JSX支持
10. √ Add JSX Support?  No
11. ## 是否添加路由环境
12. √ Add Vue Router for Single Page Application development?  No
13. ## 是否添加pinia环境
14. √ Add Pinia for state management?  No
15. ## 是否添加单元测试
16. √ Add Vitest for Unit Testing?  No
17. ## 是否添加端到端测试方案
18. √ Add an End-to-End Testing Solution? » No
19. ## 是否添加ESLint语法检查
20. √ Add ESLint for code quality?  Yes
21. ## 是否添加Prettiert代码格式化
22. √ Add Prettier for code formatting?  No

复制代码

项目目次结构

1. my-vue3-project/
2. ├── public/
3. │   └── favicon.ico
4. ├── src/
5. │   ├── assets/
6. │   │   ├── base.css
7. │   │   ├── logo.svg
8. │   │   └── main.css
9. │   ├── components/
10. │   │   ├── icons/
11. │   │   ├── HelloWorld.vue
12. │   │   └── TheWelcome.vue
13. │   ├── router/
14. │   │   └── index.ts
15. │   ├── store/
16. │   │   └── counter.ts
17. │   ├── views/
18. │   │   ├── HomeView.vue
19. │   │   └── AboutView.vue
20. │   ├── App.vue
21. │   └── main.ts
22. │
23. ├── .gitignore
24. ├── env.d.ts
25. ├── index.html
26. ├── package-lock.json
27. ├── package.json
28. ├── README.md
29. ├── tsconfig.app.json
30. ├── tsconfig.json
31. ├── tsconfig.node.json
32. └── 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 创建项目。
步调如下：

1. ## 查看@vue/cli版本，确保@vue/cli版本在4.5.0以上
2. vue --version
4. ## 安装或者升级你的@vue/cli
5. npm install -g @vue/cli
7. ## 执行创建命令
8. vue create vue_test
10. ##  随后选择3.x
11. ##  Choose a version of Vue.js that you want to start the project with (Use arrow keys)
12. ##  > 3.x
13. ##    2.x
15. ## 启动
16. cd vue_test
17. npm run serve

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。