Vue前端篇——环境搭建配置

前言

随着互联网的快速发展，前端技术也在不断进步（主要是现在开发太卷了，存后端找不到工作，被迫学前端）。Vue.js作为一种流行的前端框架，已经成为了许多开发者的首选。本文将详细介绍如何搭建Vue.js开发环境，并配置相关工具，让你能够顺利地开始Vue.js的学习之旅。其实之前也是讲过嵌入式VUE的方式，也就是在原有的html加vue框架，但是这种方式对于存前端工程是没法继续开发的，而且如果真正系统学习前端还得是全面的学习VUE。

node安装

首先，需要安装Node.js。访问Node.js官网（https://nodejs.org/），根据操作系统选择合适的安装包。下载完成后，按照提示进行安装即可。主要是安装npm，npm也是类似后端构建工具maven（mvn）。

安装完成后，打开命令行终端，输入以下命令验证Node.js和npm（Node.js的包管理器）是否安装成功，分别执行以下命令

npm -v
node -v

这里介绍以下为什么安装node，node其实类似于后端的jdk，运行后端java程序一样，前端运行也是需要环境，所以就安装node，node安装成功也就是需要管理，就会自带生成npm命令，npm命令就是后续管理前端工程，包括依赖下载，构建启动等。

vue安装

node前端环境安装完成之后，编写前端代码需要VUE框架，所以需要安装vue。一般安装Vue CLI就行。Vue CLI是一个基于Vue.js进行快速开发的完整系统，提供了交互式的项目脚手架、零配置原型开发等功能。安装命令如下：

npm install -g @vue/cli

安装成功之后，查看vue版本号

vue --version

vue工程初始化

接下来就是创建前端工程，使用vite 构建初始化工程。Vite是一个由Vue.js作者尤雨溪开发的Web应用构建工具和开发服务器。它利用了浏览器原生支持的ES模块特性，实现了快速的开发和构建过程。具体操作步骤如下：

在命令行终端中执行以下命令创建一个新的Vue工程：

npm init vite-app vue-01

这将会在当前目录下创建一个名为vue-01的新项目文件夹。

进入工程目录，使用以下命令进入新创建的工程目录：

cd vue-01

安装依赖，在项目目录中，执行以下命令安装项目所需的依赖：

npm install

创建成功之后，可以用编译器打开项目，目录结构如下：

运行项目，安装完成后，执行以下命令启动开发服务器：

npm run dev

默认情况下，开发服务器将在http://localhost:3000上启动。你可以在浏览器中打开该地址，看到Vue.js工程的欢迎页面。

我正在参与2024腾讯技术创作特训营最新征文，快来和我瓜分大奖！