本文主要介绍Vue项目环境建设的总结，有一定的参考价值，感兴趣的朋友可以参考一下。

关于Vue安装的详细步骤总结

安装NodeJs

首先解释一下nodejs是什么，为什么要装node？node的优势？

Node.js是一个运行在chromeJavascript运行时环境(俗称GoogleV8引擎)的开发平台，用于方便快捷地创建服务器端网络应用。也可以理解为轻量级的JSP或者PHP环境，如果用来开发Web应用，有时候会方便很多。

node.js最大的优点是处理并行访问。如果一个web应用同时有很多访问连接，就可以体现出使用Node.js的优势。

另一个优点是使用javascript作为服务器端脚本语言可以消除一些与浏览器端js脚本的冲突。甚至发挥javascript动态编程的特点，在服务器和浏览器之间建立直接的动态程序。

一般来说，node.js可以像PHP一样开发动态网站和web应用。

安装步骤

安装环境：Windows7 x64

1.第一步检测一下电脑是否安装node.js

(1).开始-搜索cmd- enter，在命令行输入node -v，然后输入。如果“‘Node’不是内部或外部命令，也不是可运行的程序……”出现，说明没有安装node.js

(2).https://nodejs.org/en/下载安装node.js(选择LTS格式)。下载后，双击开始安装，然后单击下一步：

(3).勾选“我接受许可协议中的条款”表示同意许可协议，点击“下一步”，出现如下界面：

(4)4). node . js的默认安装路径是“C:Program Filesnodejs”，可以修改其他磁盘(我选择安装在D盘)。点击下一步，出现安装模式和模块选择界面：

(5).然后单击下一步：

(6).确认后，单击“安装”开始安装：

(7).耐心等一会儿。安装完成后，单击完成：

(8).打开cmd(Windows R)并检查节点是否安装成功：

首先，测试npm是否安装成功。由于nodejs新版本集成了npm，所以之前都是并行安装npm。也可以使用cmd命令行输入“npm -v”来测试安装是否成功。

(这种安装比较慢，也可以用淘宝镜像安装。直接在cmd中输入：NPM install-g cnpmregistry=https://registry.npm.taobao.org，按Enter键并等待安装.(windows以管理员身份安装))

2.安装全局webpack

在命令行上，输入：npm install webpack -g (C驱动器C)进行全局安装：

3.安装vue-cli脚手架工具

在命令行上，输入：npm install -g vue-cli (C驱动器C)进行全局安装：

回车：vue，回车，如果出现vue消息，说明安装成功。

4.创建项目

关闭命令行，任意选择一个磁盘(这里我选择D盘，新建一个名为mypro的文件夹)，将mypro文件夹放入HBuilder，进入D盘的mypro文件夹，右键打开这里的命令窗口，输入vue init webpack mypro，输入：

5.进入项目文件夹：

输入：npm install初始化并安装依赖包node_modules。

6.安装完成后输入：npm run dev 运行测试：

7.最后浏览器弹出结果为：

补充：

Vucli3安装：

一.安装

npm安装-g @vue/cli

或者

yarn全局添加@vue/cli

检查vue -V v。

其次，创建一个新项目

npm创建管理员

Admin是您需要创建的项目的名称。在这里，如果你是第一次使用3.0版本，没有前两个，只有后两个。在这里你可以选择。第一个是默认配置。一般可以选择第二种，自己配置。这里你可以选择最后一个。

3.回车后，会弹出以下选项

当你选择的时候，就会出现上图的东西。在这里可以自由选择使用哪种配置，按上下键选择哪种，按空格键确定，全部选择完毕后，按回车键进入下一步。你可以在这里根据自己的需求进行选择。

第四，安装预处理语言。

这一步会问你安装哪种CSS预处理语言，你可以根据自己的需求来选择。

第五，选择自动代码格式检测。

以上是问你关于代码格式检测的问题。使用vscode editor的beauty-Code formatter插件，您可以选择下一个。

第六，保存设置

上图中的第一个选项询问您是否要保存之前的配置。选择OK后，下次您将创建一个新项目，并且您将拥有以前选择的配置，因此您不需要再次重新配置它。

七、选择配置文件的位置。

上图的意思是你把babel，postcss，eslint ESLINT之类的配置文件放在哪里？

第一个是：放独立文件。

第二个是：放在package.json里

建议在这里放一个单独的配置文件。选择第一个。

八、最后一步保存设置。

倒数第二行询问您是否要将以上内容保存为未来项目的预配置？

最后一个是描述项目。你可以随意选择。单击“确定”开始下载模板。

九。下载模板

Admin进入项目并启动服务npm run serve。这里没有vue.config.js文件。

X.创建一个新的vue.config.js文件来配置项目。

这就是本文的全部内容。希望对大家的学习有帮助，支持我们。