现在越来越多的公司开始转用前后端分离的方式来搭建项目，各司其职，给开发和用户体验带来了极大的改善。前后端混写的模式已经退居主流，单页面程序开始流行起来。

不得不说vue是个很好的选择，轻便而简单。但是对于之前没有接触过的伙伴可能一下摸不着头脑，因为原来的项目根本不是基于npm来搭建的，对于前端工程化就更加没有接触过。今天就给打算用vue构建项目的伙伴们介绍下通过vue-cli脚手架搭建一个vue项目（脚手架就好比一栋已经盖好的楼房，但只是毛坯。你需要做的就是在这个基础上把楼房装修的好看）。废话不多说植入主题~

1.下载nodejs

因为我们的项目是基于npm来进行的，npm是随同NodeJS一起安装的包管理工具。所以首先百度下nodejs进入官网进行下载及安装。

2.简单说下命令行在哪里输入（只针对没用过命令行的小白）

方式一：系统自带命令行工具，即cmd。

用win键打开菜单按钮，看到运行，点击运行进入输入cmd回车。（快捷键win+r）

方式二：github里的git bush，要在电脑上装github。右键桌面或对应文件夹，菜单里会有git bush.

方式三：苹果的终端（Terminal）或安装完nodejs自带的commend。

当然还有其他方式，比如vscode自带的终端。在此就不一一赘述。

3.全局安装vue-cli

在命令行里输入 npm install --global vue-cli（--global也可以简写为-g）

4.进入项目文件夹路径

命令是 cd +路径名称。比如有个project文件夹，就cd project

5.基于webpack搭建vue-cli脚手架

vue init webpack demo（后面这个demo是自己的项目名称，随意起）

之后会提示你输入一些有关项目的信息及配置

上面是我网上找的一张图，但是eslint对于新手来说选no比较好。因为它会很严格的对你的代码进行把控。

6.安装项目依赖并运行项目

按照上图提示，首先进入你刚才创建好的demo文件夹（cd demo），但现在其实不用再次npm install了。之前是必须要的，更新之后这个流程在前面已经帮你执行完了。最后npm run dev。在浏览器输入localhost:8080（默认是这个地址）,搞定！

希望对新入门的小白能有所帮助！