15第7章Vue脚手架第1节快速构建项目

第7章：Vue脚手架《Vue应用程序开发》

Part17.1快速构建项目Part27.2前端路由Part37.3服务器端数据访问axiosPart47.4webpack基础目录CONTENTSPart57.5章节案例7.1Vue脚手架工具的安装

create-vue是Vue官方推荐的脚手架工具，其安装前提是已经安装了Node.js，因为Node.js自带NPM。安装Node.js可以直接到其中文官网（网址为）下载安装包；也可以在浏览器地址栏中输入网址“/download/”，进入Node.js安装包下载界面。7.1初始化项目

Node.js安装成功后，即可使用官方推荐的Vue脚手架工具create-vue初始化项目。该工具无须全局安装，直接使用以下命令创建项目：若使用最新版本，则运行“npmcreatevue@latest”命令。1．打开命令提示符窗口按“Windows+R”键，输入“cmd”，按“Enter”键，或在“开始”菜单中搜索“命令提示符”并运行该程序，均可打开命令提示符窗口。2．进入目标目录在Windows命令提示符窗口中，若要将项目创建在非系统盘（如D盘）下，则可按以下方式操作。7.1初始化项目

其中，“D:”是目标盘符；“\my-projects”是目标文件夹路径（可自定义）；“/d”参数用于确保同时切换盘符和目录，避免出现常见错误。3．创建Vue3项目（1）运行命令创建项目在Windows命令提示符窗口中运行“npmcreatevue@latest”命令来创建项目（若需指定版本，则可将其替换为npmcreatevue@<版本号>），输入指令后按“Enter”键即可。（2）后续交互说明①若提示“请输入项目名称：”，则可输入项目名称并按“Enter”键继续下一步操作。②若提示“请选择要包含的功能（↑↓切换，空格选择，a全选，回车确认）”，可根据提示对项目进行配置。其配置项说明如下。7.1初始化项目

（3）项目创建完成7.1快速构建项目-Vue目录结构

执行命令：npmrundev来启动项目，启动完成后会自动弹出默认网页：7.1快速构建项目-运行结果

项目目录解析文件名/目录名文件介绍.vscode存放VSCode编辑器的工作区配置（如插件推荐、格式化规则等，仅在使用VSCode开发时自动生成，非项目运行必需）node_modules项目依赖的第三方模块（由npminstall自动安装，不可手动修改）public存放无须编译的静态资源（如favicon.ico图标、robots.txt等，构建时会将其原封不动地复制到输出目录中）public/favicon.ico项目在浏览器标签页中显示的图标文件src项目源码目录，包含所有业务代码和核心逻辑src/assets存放可被编译的静态资源（如图片、全局CSS、字体等）src/components存放可复用的自定义组件（如按钮、表单等通用UI组件，或业务相关的功能组件）src/router存放VueRouter路由配置文件（仅在使用路由功能时存在）src/views存放页面级组件（通常与路由对应，如首页、详情页等，仅在勾选了“VueRouter”复选框时生成，用于区分组件层级）项目目录解析文件名/目录名文件介绍src/stores存放Pinia状态管理的Store文件（仅在勾选了“Pinia”复选框时存在）src/App.vue项目的根组件，负责组装页面结构src/main.js项目入口文件，用于初始化Vue应用、挂载根组件等.gitignoreGit版本控制忽略文件（指定无须提交到仓库的文件/目录，如node_modules，仅在初始化选择Git支持时生成）index.html应用入口HTML模板，Vite会将打包后的JavaScript/CSS资源自动注入此处jsconfig.jsonJavaScript项目的环境配置文件（定义模块路径、编译选项等）package.json项目核心配置文件，用于记录依赖包版本、脚本命令（如dev/build）等README.md项目说明文档（包含启动、构建等基本操作指引）vite.config.jsVite构建工具的配置文件（可自定义打包规则、开发服务器等）7.1.4.初识单文件组件为了更好地适应复杂的项目开发，Vue.js支持以.vue为扩展名的文件来定义一个完整组件。这个组件被称为单文件组件，是Vue.js自定义的一种文件格式。一个扩展名为.vue的文件就是一个单独的组件，在文件中封装了组件相关的代码，如HTML、CSS和JavaScript，最终通过Webpack编译成JavaScript文件并在浏览器中运行。扩展名为.vue的文件由3部分组成：<template>、<style>和<script>。在src/views目录中创建hello.vue文件，内容如下：7.1.4.初识单文件组件要想使用以上文件，需要在App.vue中引入组件，代码如下：<scriptsetup>import{RouterView}from'vue-router';importhellofrom'./views/hello.vue'</script><template><div><hello></hello></div><router-view/></template><stylescoped></style>7.1.5单文件组件嵌套

脚手架项目创建完成后，index.html是应用入口，会加载并渲染根组件App.vue。App.vue作为单文件组件，是整个应用的根组件，其核心功能之一是引入其他单文件组件（即自定义组件），实现单文件组件的嵌套使用，即其他页面或功能组件可以嵌套在根组件中。下面以自定义组件和根组件的嵌套为例来进行讲解，其他自定义组件之间的嵌套方法与此类似。首先，在/src/components文件夹中新建一个自定义单文件组件，并将其命名为Vuejs.vue。内容如下：7.1.6构建一个简单的脚手架项目（1）项目构思和设计项目的核心目标是搭建一个具备通用页面结构的网站脚手架，支持快速扩展不同页面，通过组件化设计实现代码复用，降低后续开发与维护成本。从需求与结构设计来看，图

7-10

所示为简单的网站首页的

UI，整体分为页头、主体部分和页脚三大模块。其中，页头包括登录/注册和个人中心两个核心入口，页脚用于展示版权信息，这两个模块是该网站所有页面的公共元素，需要保持风格和结构的一致性，因此设计为可复用组件；主体部分为首页专属内容，用于展示热点榜信息，需作为独立内容组件进行开发，以方便后续替换为其他页面的核心内容。7.1.6构建一个简单的脚手架项目（2）项目实施基于上述项目构思和设计，项目实施步骤如下。在components文件夹中新建两个Vue文件，分别是index.vue（页面主体部分）、Layout.vue。（整合页面的页头和页脚），组件文件结构如图所示。7.1.7组件通信

父组件与子组件的通信下面通过一个实例来说明父组件如何向子组件传递数据：在子组件Child.vue中如何获取父组件Parent.vue中的数据。①父组件Parent.vue的代码如下：7.1.7组件通信

②子组件Child.vue的代码如下。7.1.7组件通信

③App.vue展示内容的代码如下。7.1.7组件通信

子组件与父组件的通信子组件触发自定义事件并传递数据，父组件监听这些事件并处理传递过来的数据。在Vue3中，使用defineEmits来声明自定义事件。①子组件的代码如下：7.1.7组件通信

②父组件的代码如下：7.1.7组件通信

③App.vue的代码如下：7.1.7组件通信

非父子组件之间的通信非父子组件进行通信时，一般会借助第三方媒介mitt，当项目比较大时，可以选择更好的状态管理Vuex作为解决方案。①安装mitt。npminstallmitt②初始化mitt。新建文件src/utils/emitter.js，添加代码如下：7.1.7组件通信

③组件A（AComponent.vue）的代码