Vue学习

最新推荐文章于 2025-06-08 20:10:18 发布

zmmyzdq

最新推荐文章于 2025-06-08 20:10:18 发布

阅读量109

点赞数 2

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

本文链接：https://blog.youkuaiyun.com/qq_40357993/article/details/120975274

版权

Vue环境搭建

一、简介

	Vue是于2013年(与React框架同年发布)推出的一个渐进式、自底向上的前端框架，用于构建用户界面。

**渐进式框架：**通俗说，就是可以只使用自己想用或者能用的功能，不想用的部分可以先不用。*VUE不强求你一次性接受并使用它的全部功能特性。*官方的说法是：以Vue内核作为核心，随着业务的深入、需求的递增，可以使用其周边生态深度应用到项目中。

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SXrFRvg3-1635237478868)(C:\Users\17818\AppData\Roaming\Typora\typora-user-images\image-20211026104456807.png)]$

二、Vue入门

安装

安装node.js

首先安装node.js，到官网（https://nodejs.org/en/）下载安装包，点击安装。

在这里插入图片描述

检查安装，打开cmd窗口输入以下命令，出现版本号，则安装成功。

在这里插入图片描述

安装yarn

介绍：

Yarn 对你的代码来说是一个包管理器。它可以让你使用并分享全世界开发者的（例如 JavaScript）代码。 Yarn 能够快速、安全、并可靠地完成这些工作，所以你不用有任何担心。

通过Yarn你可以使用其他开发者针对不同问题的解决方案，使自己的开发过程更简单。使用过程中遇到问题，你可以将其上报或者贡献解决方案。一旦问题被修复， Yarn会更新保持同步。
安装：

直接在命令行输入：npm install -g yarn

在这里插入图片描述

检测是否安装成功

在这里插入图片描述

安装vue cli(vue脚手架)

介绍：

vue cli是一个脚手架，可以帮助我们快速搭建一个完整的vue应用，vue cli 是官网提供的构建工具，可用于快速搭建一个带有热重载（在代码修改后不必刷新页面即可呈现修改后的效果），lint代码语法检测及构建生产版本等功能的单页面应用。

安装：

npm install -g @vue/cli 或者 npm global add @vue/cli 在这里插入图片描述

安装及配置cnpm

介绍：

由于有些npm有些资源被屏蔽或者是国外资源的原因，经常会导致用npm安装依赖包的时候失败，所以还需要安装npm的国内镜像——cnpm.

安装：

打开命令行工具，通过如下方式全局安装@vue/cli脚手架，具体命令如下：

npm install -g cnpm --registry=http://registry.npm.taobao.org

在这里插入图片描述

安装及配置webpack

介绍：

webpacke是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

安装：

使用cnpm安装webpack

在这里插入图片描述

Visual Studio Code 安装及配置

到官网（https://code.visualstudio.com/docs/?dv=win）下载安装包，点击安装。
在这里插入图片描述

安装插件，点击如下图标，输入安装插件的名称。

在这里插入图片描述

安装完插件后点击Restart now即可应用。

至此Vue环境配置成功，可以开始创建项目了！
参考网址：https://blog.youkuaiyun.com/weixin_40377925/article/details/112168465