【大前端】Vue3 工程化项目使用详解

目录

一、前言

二、前置准备

2.1 环境准备

2.1.1 create-vue功能

2.1.2 nodejs环境

2.1.3 配置nodejs的环境变量

2.1.4 更换安装包的源

三、工程化项目创建与启动过程

3.1 创建工程化项目

3.2 项目初始化

3.3 项目启动

3.4 核心文件说明

四、VUE两种不同的API风格

4.1 选项式API风格

4.2 组合式API风格

4.2.1 自定义Vue文件

4.2.2 在App.vue文件中引入

五、写在文末

---

一、前言

在实际开发中，为了快速满足业务的需求，开发者往往不想投入过多的时间在搭建工程、配置环境上面，于是很多编程语言都逐渐推出合适的工程化项目的脚手架，开发者只需要按照要求输入一些命令即可，对于VUE来说也是如此，本文将通过实际案例详细分享一下VUE3中工程化项目的使用。

二、前置准备

2.1 环境准备

脚手架工具：create-vue，是vue官方提供的最新的脚手架工具，可用于快速生成一个工程化的Vue项目

2.1.1 create-vue功能

create-vue提供了如下功能：

• 统一的目录结构；

• 本地调试；

• 热部署；

• 单元测试；

• 集成打包；

2.1.2 nodejs环境

本地安装nodejs，这个比较简单就不再赘述了，安装完成后，通过下面的窗口命令检查一下

注意：vue3要求的最低nodejs的版本是18.16

2.1.3 配置nodejs的环境变量

使用下面的命令设置一下nodejs环境变量，方便后续执行相关的npm命令

npm config set prefix ""D:\dev-tools\node\place

2.1.4 更换安装包的源

设置使用下面的命令

npm config set registry http://registry.npm.taobao.org/

检查是否设置成功

npm config get registry

三、工程化项目创建与启动过程

3.1 创建工程化项目

创建一个工程化VUE项目，执行下面的命令

npm init vue@latest

执行上面的命令之后，将会安装并执行 create-vue ，它是Vue官方的项目脚手架工具，第一次创建项目，先都使用默认的选项即可；

关于创建项目过程中的各个参数项做如下说明：

• Project name：------》项目名称，默认值：vue-project，可输入想要的项目名称，此处我写的是：vueproject1。

• Add TypeScript? ------》是否加入TypeScript组件？默认值：No。

• Add JSX Support? ------》是否加入JSX支持？默认值：No。

• Add Vue Router for Single Page Application development? ------》是否为单页应用程序开发添加Vue Router路由管理组件？默认值：No。

• Add Pinia for state management? ------》是否添加Pinia组件来进行状态管理？默认值：No。

• Add Vi