Vue.js入门指南：简介、环境配置与Yarn创建项目

高菘菘

已于 2024-02-29 21:36:51 修改

阅读量1.7k

点赞数 22

CC 4.0 BY-SA版权

文章标签： vue.js 前端 javascript vue

于 2024-02-28 22:08:12 首次发布

本文链接：https://blog.csdn.net/2202_75568470/article/details/136357231

本文介绍了Vue.js的基础知识，包括其特点、核心库功能，详细指导如何通过Yarn和VueCLI进行环境配置，创建、运行和部署首个Vue组件，助力开发者快速上手并搭建开发环境。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、Vue.js简介

Vue.js，一个流行的JavaScript框架，以其直观、灵活和高效的特点，在前端开发者中赢得了广泛的赞誉。Vue.js的核心库专注于视图层，使得开发者能够构建出响应式的数据绑定和组合的视图组件。Vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。

二、环境配置

为了使用Vue.js开发应用程序，你需要配置一个适当的开发环境。以下是使用Yarn作为包管理器来创建Vue.js项目的步骤：

安装Node.js:

首先，你需要安装Node.js，请访问Node.js的官方网站 --点击进入

安装Yarn

通过npm（Node.js包管理器）来安装Yarn。在命令行中运行以下命令来安装Yarn：

npm install -g yarn

安装完成后，查看一下：

node -v  
npm -v
yarn -v

使用Yarn全局安装Vue CLI

Vue CLI是一个强大的命令行工具，用于快速创建和管理Vue.js项目。使用Yarn全局安装Vue CLI：

yarn global add @vue/cli

检查一下：

创建并启动项目 ：

yarn create vite hello-vite --template vue

cd hello-vite    #切换到项目目录
yarn             #安装项目的全部依赖
yarn dev         #启动服务

查看下面的端口：

Yarn会自动安装项目所需的依赖，并启动一个本地开发服务器。
默认情况下，应用程序将在http://localhost:8080上运行。

安装代码编辑器插件

        为了提高开发效率，你可能还需要在你的代码编辑器（如Visual Studio Code、Sublime Text等）中安装Vue.js相关的插件。

        这些插件可以提供语法高亮、代码片段、linting等功能。

        一在你的项目目录中，src文件夹包含了应用程序的主要代码。