1.搭建vue项目首先你需要了解一些基本的知识
Node.js:
简单的说 Node.js 就是运行在服务端的 JavaScript。
Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台。
Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。
npm:
NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题，常见的使用场景有以下几种：
- 允许用户从NPM服务器下载别人编写的第三方包到本地使用。
- 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
- 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。
由于新版的nodejs已经集成了npm，所以安装node.js会连同npm也一并安装好。
webpack:是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。
vue cli:vue的命令行工具command-line interface的缩写，为单页面应用 (SPA) 快速搭建繁杂的脚手架。它为现代前端工作流提供了 batteries-included 的构建设置。只需要几分钟的时间就可以运行起来并带有热重载、保存时 lint 校验，以及生产环境可用的构建版本。
2.首先到node.js官网下载安装包安装即可(本教程基于window10 64位操作系统)
官网地址:https://nodejs.org/en/download/
根据自己的需求下载对应位数和系统版本就行，下载完成后选择一个安装路径一路next即可，完成后的效果我是安装到D盘名为NodeJs的文件夹中
安装完成后会自动在Path中加入一个变量
打开cmd命令窗口验证是否安装成功，输入node -v 查看node.js版本，输入npm -v 查看npm版本
出现上图即为安装成功，新版本的node.js已经集成了npm安装node.js就行了
(1)接下来我们打开本地C:\Users\lenovo\AppData\Roaming这个路径（如果找不到AppData，点击查看把隐藏文件夹勾选，显示隐藏文件夹即可）
可以看到以上两个文件夹（安装的时候默认生成的），接下来我们需要把这两个文件夹所具备的功能移到刚才的安装目录下
首先手动在刚才的安装目录下手动建两个文件夹，如下图
然后执行以下命令：
npm config set prefix "D:\NodeJs\node_global"
npm config set cache "D:\NodeJs\node_cache"
现在我们再输入命令npm list -global
发现默认的目录已经改变了
（2）接下来我们需要配置一个镜像源提高下载速度
在cmd中输入命令 npm config set registry=http://registry.npm.taobao.org
输入命令npm config list 显示所有配置信息，验证是否设置成功
可以看到上图已经设置成功
接下来我们可以打开本地路径C:\Users\lenovo\.npmrc
看到一个.npmrc 以记事本的方式打开如下，可以看到刚才配置的信息
检测淘宝镜像是否生效，分别输入命令 npm config get registry 和 npm info vue可以看到下图结果即为配置成功
执行npm install npm -g命令
此命令的意思为在global文件夹下安装或更新命令npm模块（刚刚安装node.js已经装过npm，现在这个命令就会执行更新）
我们现在执行 npm list -global命令查看global里面都有什么
这里需要注意，经过以上步骤我们的操作后，原来默认的模块目录D:\NodeJs\node_modules将会改变到D:\NodeJs\node_global\node_modules
现在如果直接运行npm install 等一系列命令会报错
我们需要增加一个环境变量如下图
3. 接下来我们开始使用命令行和npm命令安装vue和相关模块(要重新打开cmd使上面的配置生效)
（1）首先输入npm install vue -g 安装最基本的vue
（2） 然后输入npm install vue-router -g 安装router模块
（3） 最后输入npm install vue-cli -g安装vue的命令行工具
这里解释一下
（4）然后我们打开本地路径D:\NodeJs\node_global\node_modules就可以看到我们刚才安装的三个模块
（5）现在我们再次打开cmd输入vue会出现如下图
（6）这是因为我们少配置了一个环境变量，我们需要在Path环境变量添加D:\NodeJs\node_global，如下图
（7） 输入vue -V查看vue版本(字母V为大写)
（8） 重新打开cmd，测试vue是否可以正常使用，首先要把盘符切换到你刚才安装node.js的盘符，我的是在D盘，然后输入
vue init webpack vuedemo命令来新建自己的第一个vue项目（vuedemo是我自定义的项目名，注意名称中不能包含大写）然后按照提示一次输入工程名，描述，作者等一系列信息，如下图
（9） 最后cd进你刚才自定义的项目目录下我的是D盘下的 vuedemo，执行npm install命令初始化安装依赖命令如下图
（10） 最终执行 npm run dev 命令运行整个项目，执行完结果如下（下面这个框别关）
默认的启动端口为8080如果你的8080端口被占用，会分配另外一个端口，这个端口也可以自己修改，我将它改为了83
打开游览器输入http://localhost:8083/#/看到以下页面即为安装成功
（11） cmd中切换到项目目录，运行 npm run build 命令生成静态文件
4.最好下载一个VSCode来开发vue项目，VSCode直接搜索安装就行很简单，然后使用vscode打开刚才建好的vue项目如下图：
端口可以在config下的index.js中修改，如上图 ，接下来你就可以尽情开发了
5.vue项目的结构介绍
| build | 项目构建(webpack)相关代码 |
| config | 配置目录，包括端口号等。我们初学可以使用默认的。 |
| node_modules | npm 加载的项目依赖模块 |
| src | 这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：
|
| static | 静态资源目录，如图片、字体等。 |
| test | 初始测试目录，可删除 |
| .xxxx文件 | 这些是一些配置文件，包括语法配置，git配置等。 |
| index.html | 首页入口文件，你可以添加一些 meta 信息或统计代码啥的。 |
| package.json | 项目配置文件。 |
| README.md | 项目的说明文档，markdown 格式 |
