1.基于vue-cli 创建
## 查看@vue/cli版本，确保@vue/cli版本在4.5.0以上
vue --version
## 安装或者升级你的@vue/cli
npm install -g @vue/cli
## 执行创建命令
vue create vue3_project
## 随后选择3.x
## Choose a version of Vue.js that you want to start the project with (Use arrow keys)
## > 3.x
## 2.x
## 启动
cd vue3_project
npm run serve
2.基于vite创建
前提条件:
- 熟悉命令行
- 已安装 18.3 或更高版本的 Node.js
运行命令行命令_
npm create vue@latest
根据自己项目的实际情况选择配置项,完成项目工程基本配置
补充提示:
- 推荐的 IDE 配置是 Visual Studio Code + Vue - Official 扩展
- 要了解构建工具 Vite 更多背后的细节，请查看 Vite 文档。
- 如果你选择使用 TypeScript，请阅读 TypeScript 使用指南。
3.工程文件列表
vue3-project-vite/
│── node_modules/ # 依赖库，`npm install` 后生成
│── public/ # 静态资源目录，不会被 Vite 处理，直接映射到根目录
│ ├── favicon.ico # 网站图标
│── src/ # 源代码目录（Vue 组件、页面、状态管理等）
│ ├── assets/ # 存放静态资源（图片、CSS）
│ ├── components/ # 复用组件,常用封装功能组件
│ ├── views/ # 主要页面（通常按路由划分）
│ ├── router/ # Vue Router 配置,管理页面路由
│ ├── store/ # Vuex / Pinia 状态管理
│ ├── App.vue # 根组件,所有页面组件的父组件
│ ├── main.js / main.ts # 入口文件，初始化 Vue 实例
│── .gitignore # Git 忽略文件
│── index.html # 入口 HTML 文件
│── package.json # 依赖和脚本配置
│── vite.config.js # Vite 配置文件
│── tsconfig.json # TypeScript 配置（仅 TypeScript 项目）
重点区别: vue3与vue2工程文件区别点最大的地方在于,入口文件vue3是index.html文件,浏览器加载时最先解析,vite处理HTML文件通过
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
