Vue3---(1)项目工程创建

前端无涯2025-12-16 13:42

1.基于vue-cli 创建

shell 复制代码

## 查看@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

运行命令行命令_

sql 复制代码

npm create vue@latest

根据自己项目的实际情况选择配置项,完成项目工程基本配置

补充提示:

推荐的 IDE 配置是 Visual Studio Code + Vue - Official 扩展
要了解构建工具 Vite 更多背后的细节，请查看 Vite 文档。
如果你选择使用 TypeScript，请阅读 TypeScript 使用指南。

3.工程文件列表

csharp 复制代码

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文件通过

xml 复制代码

<!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>