【Vue3 + Vite】Vite搭建 项目解构 Vue快速学习 第一期

---

Vue3介绍

• Vue是一款用于构建用户界面的 JavaScript 框架。
• 它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。
• 无论是简单还是复杂的界面，Vue 都可以胜任。
• VUE官网

Vue的两个核心功能：

• 声明式渲染：Vue 基于标准 HTML 拓展了一套模板语法，使得我们可以声明式地描述最终输出的 HTML 和 JavaScript 状态之间的关系。
• 响应性：Vue 会自动跟踪 JavaScript 状态并在其发生变化时响应式地更新 DOM
  

---

Vue3通过Vite实现工程化：

Vite官方文档

Vite的介绍：
项目搭建脚手架，比如：webpack

一、Vite创建Vue3工程化项目

1.1 Vite+Vue3项目的创建、启动、停止

vscode 命令行 直接运行 创建Vite：（创建create 时 报错 是要用管理员身份运行 vscode）

npm create vite@latest

输入y回车即可,下次使用vite就不会出现了，第一次运行会出现：

之后选择vue+JavaScript（or TS）选项。

安装项目所需依赖 :

• cd进入刚刚创建的项目目录
• npm install or npm i命令安装基础依赖

• 启动项目 :
  npm run dev
• 停止项目：
  命令行上 ctrl+c

• 查看项目下的package.json

{
   
   
  "name": "demo01-vue3",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
   
   
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
   
   
    "vue": "^3.3.11"
  },
  "devDependencies": {
   
   
    "@vitejs/plugin-vue": "^4.5.2",
    "vite": "^5.0.8"
  }
}

启动成功：http://localhost:5173/

1.2 Vite+Vue3项目的目录结构

• public/ 目录：用于存放一些公共资源，如 HTML 文件、图像、字体等，这些资源会被直接复制到构建出的目标目录中。
• src/ 目录：存放项目的源代码，包括 JavaScript、CSS、Vue 组件、图像和字体等资源。在开发过程中，这些文件会被 Vite 实时编译和处理，并在浏览器中进行实时预览和调试。以下是src内部划分建议：
  • 1. assets/ 目录：用于存放一些项目中用到的静态资源，如图片、字体、样式文件等。
  • 2. components/ 目录：用于存放组件相关的文件。组件是代码复用的一种方式，用于抽象出一个可复用的 UI 部件，方便在不同的场景中进行重复使用。
  • 3. layouts/ 目录：用于存放布局组件的文件。布局组件通常负责整个应用程序的整体布局，如头部、底部、导航菜单等。
  • 4. pages/ 目录：用于存放页面级别的组件文件，通常是路由对应的组件文件。在这个目录下，可以创建对应的文件夹，用于存储不同的页面组件。
  • 5. plugins/ 目录：用于存放 Vite 插件相关的文件，可以按需加载不同的插件来实现不同的功能，如自动化测试、代码压缩等。