Vue3 构建指南：揭秘无 @vue/cli 之旅

2024-01-17 23:10:20

前言

Vue3 作为当下炙手可热的 JavaScript 框架，凭借其强大的响应式系统、丰富的组件生态以及简洁优雅的语法，受到了广大开发者的青睐。然而，在项目开发过程中，我们常常依赖于官方脚手架 @vue/cli 来快速搭建项目环境。但如果有一天，@vue/cli 不再存在，我们又该何去何从？

搭建项目环境

安装 Node.js 和 npm

首先，我们需要确保计算机中已安装了 Node.js 和 npm。这两个工具是构建 Vue3 项目的基础，负责管理项目依赖和运行构建脚本。
创建项目目录

在计算机中创建一个用于存放 Vue3 项目的目录，例如 my-vue3-project。
初始化项目

使用 npm 初始化一个新的项目，并在命令行中运行以下命令：
```
npm init -y
```
安装 Vue3

使用 npm 安装 Vue3，并在命令行中运行以下命令：
```
npm install vue@next
```

创建主文件

在项目根目录下创建一个名为 main.js 的文件，并在其中添加以下代码：

import Vue from 'vue';
import App from './App.vue';

new Vue({
  render: h => h(App),
}).$mount('#app');

创建组件

在项目根目录下创建一个名为 App.vue 的文件，并在其中添加以下代码：

<template>
  <div>Hello, world!</div>
</template>

<script>
export default {
  name: 'App',
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
}
</style>

运行项目

在命令行中运行以下命令来运行 Vue3 项目：
```
npm run serve
```
这将启动一个开发服务器，并在浏览器中打开项目。

编写与调试代码

创建组件

为了构建更复杂的应用程序，我们需要创建可复用的组件。组件可以被视为独立的模块，负责处理特定的任务。我们可以使用 Vue3 的单文件组件特性来创建组件。
使用模板语法

Vue3 使用模板语法来定义组件的结构和行为。模板语法类似于 HTML，但它允许我们使用特殊的指令来实现响应式数据绑定和事件处理。
使用脚本

组件的脚本部分使用 JavaScript 来定义组件的数据、方法和生命周期钩子。脚本部分可以用来处理用户交互、更新组件状态和与其他组件进行通信。
使用样式

组件的样式部分使用 CSS 来定义组件的外观。样式部分可以用来设置组件的字体、颜色、布局和动画效果。
调试代码

在开发过程中，难免会遇到代码错误。为了快速定位和修复代码错误，我们可以使用 Vue3 的内置调试工具。我们可以使用浏览器控制台来查看组件的状态、调用堆栈和网络请求。我们还可以使用 Vue3 的 devtools 来检查组件的结构、数据和事件。