Vue之环境安装

提示：本文全长2000字左右，完整阅读大约需要花费7分钟。

---

前言

随着前端技术的不断发展，掌握各种框架也越来越重要，很多人都开启了学习 Vue，本文就介绍了 Vue 的环境安装和项目创建，大家也可访问我之前的博客查看Vue基础知识点小结。

---

一、Vue 是什么？

Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。更多相关介绍请查看 Vue 官网。

二、环境的安装配置

1.安装Node.js

简介：Node.js是一个开源的Javascript运行环境和库,用于在客户的浏览器之外执行和运行网络应用（安装成功之后才能够使用npm命令）。

安装流程：
先访问 Node.js 中文官网，然后根据需要下载对应的版本（这里不建议下载最新的版本，因为可能会存在兼容问题，别问我怎么知道的，都是血与泪的教训）。
这里是以往的版本下载地址。如下图所示：

点击Releases后，选择对应系统的版本就可以，博主这里是Win10的64位操作系统，所以选择的x64.msi的安装包，如下图所示：

下载完成后，双击进入安装界面，傻瓜式安装（一直 next 就可以了），有协议就点接受，然后安装路径可以根据你的需要进行更改。安装完成后可以使用 Win+R 输入 cmd 进入命令提示符应用，然后在里面输入 node -v ，如果显示版本号，即说明安装成功。如下图所示：

这时输入 npm -v，也能成功看到 npm 版本号。如下图所示：

至此，node环境安装完成。

2.全局安装@vue/cli

简介：vue-cli 是 Vue.js 开发的标准工具。它简化了程序员基于 webpack 创建工程化的 Vue 项目的过程。
注意：Vue CLI 现已处于维护模式！现在官方推荐使用 create-vue 来创建基于 Vite 的新项目。另外请参考 Vue 3 工具链指南 以了解最新的工具推荐。

在cmd命令行中输入 npm install -g @vue/cli 代码，然后回车。就开始自动下载所需要的文件了（如果下载特别慢以及下载失败可以考虑换个镜像地址或者多试几次）。安装完成也可以使用 vue --version 命令查看版本号。如下图所示：

这上面notice是告诉我们有新版本npm可以使用（不是报错不是报错不是报错，重要的事情说三遍），但是非必要就不用更新了。

3.创建Vue项目

1. 新建项目文件夹
   选择好你想要存放 Vue 项目的文件路径后，鼠标右键>新建文件夹day1，作为你项目的根目录。如下图所示：
   

2. 进入命令行模式
   这里可以双击进入day1文件夹，然后在上面地址栏输入 cmd 后按回车，如下图所示：
   
   也可以直接用前面的方法打开cmd，因为我项目放在了D盘上，所以先要使用d:跳转到D盘根目录下，然后使用 cd + 文件夹路径 直接跳转到day1文件夹里面，如下图所示：
   
   3.创建项目
   使用 vue create 项目名称 创建 Vue 项目。有可能你们会遇到和我一样的情况（大概意思就是默认连接较慢，需要换下载地址的，这里直接输入y或者Y就可以了），如下图所示：
   
   然后就进入到 Vue 项目设置选项了，这里建议新手创建项目选择第三个选项“Manually select features”（使用↑和↓箭头进行切换，按Enter选择），自己手动配置项目，如下图所示：
   
   再然后就是选择需要安装的功能，按住space（空格）键进行勾选/取消，这里强烈建议刚开始学习 Vue 项目的同学把“Linter / Formatter”取消勾选（不然格式报错找半天），其它功能按需选择就好了，如下图所示：
   
   随后选择你想要创建的 Vue 项目的版本，我这里选择的是 2.x版本。如下图所示：
   
   这里是选择你所需要的CSS预处理器，我选择的是Less，如下图所示：
   
   关键的一步来了，选择配置文件的存放方式，默认选项是将各个插件的配置项放到自己独立的配置文件中，直接选择进入下一步就行，如下图所示：
   
   最后一步，是否将这些配置信息保存下来，以便下次创建项目时快速使用，不需要就输入n或N就好了。但是作为初学者建议保存，这里输入一个自定义名称方便下次自己认出选择，操作步骤如下图所示：
   
   等待加载完成，按照提示先输入 cd vue_demo 切换目录，然后输入 npm run serve ，把地址复制到浏览器打开就可以成功运行 Vue 项目了，如下图所示：
   
   
   看到下面这个界面，就说明 Vue 项目运行成功啦，接下来就该用VSCode打开项目文件，写Hello World去了（bushi）。
   

---

总结

本文是在对自己学习过程中的一次思考和总结，希望这篇文章能够对正在阅读的您有所帮助或启发。如果您觉得这篇文章写的不错，欢迎点赞收藏分享加评论，也可以留下您的问题我们互相探讨学习，共同进步！

下一篇：Vue之代码初体验