Vue前端工程化准备--NodeJS安装、Vue-cli安装与框架介绍
目前，前后端分离式的开发越来越流行，我们如何初步配置这种开发模式中的前端框架呢？下面我会对配置过程进行详细介绍。
我们的前端工程化是通过vue官方提供的脚手架Vue-cli来完成的，用于快速的生成一个Vue的项目模板。Vue-cli主要提供了如下功能：
统一的目录结构
本地调试
热部署
单元测试
集成打包上线
我们需要运行Vue-cli，需要依赖NodeJS，NodeJS是前端工程化依赖的环境。所以我们需要先安装NodeJS，然后才能安装Vue-cli
一、NodeJS安装
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时环境，它允许开发者使用 JavaScript 编写命令行工具和服务器端脚本，并且能够使程序运行在浏览器环境之外。和java的JDK类似，NodeJS是 JavaScript 运行时环境。
注意：如果电脑里装有NodeJS最好不要重复安装
1.首先我们需要先获取到NodeJS的安装包（可以直接下载我提供的安装包），也可以点击下方链接可进入官网下载安装包:
Node.js — 在任何地方运行 JavaScript
2.下载完成后按照下载地址找到该安装包打开（本人下载的不是最新版本，但是安装步骤是一样的）
3.跟着图片步骤操作即可
4.选择安装到一个，没有中文，没有空格的目录下（新建一个文件夹NodeJS----推荐）
点击next后等待安装完后点击finish退出即可，NodeJS 安装完毕后，会自动配置好环境变量 。
5.验证是否安装与配置变量成功，打开命令提示符输入：node -v
如果回车后如下图返回版本信息则代表配置成功！
二、配置npm
1.配置npm的全局安装路径
使用管理员身份运行命令行
在命令行中，执行如下指令：
npm config set prefix "(你的安装路径)\NodeJs"
2.切换npm的淘宝镜像
同样使用管理员身份运行命令行，在命令行中，执行如下指令：
如果镜像被淘汰了更换至最新镜像就不会报错了
npm config set registry https://registry.npmmirror.com
三、 安装Vue-cli
同样是使用管理员身份运行命令行，在命令行中，执行如下指令：
npm install -g @vue/cli
这个过程中，会联网下载，可能会耗时几分钟，等待一下即可。
四、Vue项目简介
环境准备好了，接下来我们尝试通过Vue-cli创建一个vue项目，然后再学习一下vue项目的目录结构。
我们直接使用图形化界面：通过命令先进入到图形化界面，然后再进行vue工程的创建：
vue ui
1.Vue项目创建
进入到图形化界面后根据下图进行操作以创建vue项目：
首先，我们再桌面创建vue文件夹，然后双击进入文件夹，来到地址目录，输入cmd，然后进入到vue文件夹的cmd窗口界面，如下图所示：
下面的图用了现成的一些图，我就不再自己创建了，但是步骤都一样：
最后我们只需要等待片刻，即可进入到创建创建成功的界面，如下图所示：
这样，一个vue项目就创建完成了。
2.vue项目目录结构介绍
通过VS Code打开之前创建的vue文件夹
打开之后，呈现如下图所示页面：
vue项目的标准目录结构以及目录对应的解释如下图所示，我们平时开发代码就是在src目录下 :
前端界面开发的代码大部分存放在view文件夹下面AboutView.vue和HomeView.vue是项目自带的，我们可以自己新建一个文件夹存放我们自己的界面：
那么vue项目开发好了，我们应该怎么运行vue项目呢？
3.vue项目运行
代码运行此时访问的是 src/App.vue这个根组件，如果我们需要运行哪个界面，就把界面挂在到这个文件中，注意要改三个地方，而且页面的文件名严格遵守大写字母开头，以View.vue结尾的规则（View首字母也是大写）：
展示哪个页面就改哪个页面的这三处，其他页面不能同时挂载到App.vue中，都要删除或者注释掉
8080端口经常被占用，所以我们可以去修改默认的8080端口。我们修改vue.config.js文件的内容，添加如下代码：
devServer:{ port:7000 }
接下来我们需要把NPM脚本窗口调试出来，跟着下图操作即可：
把下图选项打开即可
右键下方栏目，勾选npm脚本即可成功调出
点击就可以开始运行我们的前端代码了
点击右侧连接即可进入浏览器查看我们开发的前端界面：
到此我们的项目就运行成功啦~
五、总结
本文提供了从 Node.js 安装到 Vue 项目创建的完整配置过程，帮助大家快速搭建前后端分离的开发环境。通过对 Vue-cli 的安装与使用、项目结构的理解。