首先简单说一下 vue-cli2.x 与 vue-cli3.x 的区别

(1) 3.x 新加入了 TypeScript 以及 PWA 的支持

(2) 部分命令发生了变化：

    下载安装  npm install -g vue@cli

    删除了vue list

    创建项目   vue create

    启动项目   npm run serve

(3) 默认项目目录结构也发生了变化：

    移除了配置文件目录，config 和 build 文件夹

    移除了 static 文件夹，新增 public 文件夹，并且 index.html 移动到 public 中

    在 src 文件夹中新增了 views 文件夹，用于分类 视图组件 和 公共组件

(4) 配置

    配置信息在根目录下 vue.config.js

vue-cli3.x 项目搭建

第一步.安装

卸载旧版本（如果事先安装了vue cli1.x或者vue cli2.x，要先卸载掉）

npm uninstall vue-cli -g

node版本要要求

You are using Node v6.11.0, but this version of vue-cli requires Node >=8.9.

安装Vue cli

npm install -g @vue/cli

( vue-cli2.x 是 npm install -g vue-cli )

查看Vue cli的版本

vue --version

第二步创建项目文件

vue create project-name

( vue-cli2.x 是 vue init webpack project-name )

第三步.选择快捷式安装配置

这里是 让你选的，第一个是默认配置，第二个是自己配置，这里选择最后一个

默认配置只有babel和eslint其他的都要自己另外再配置，所以我们选第二项手动配置

第四步.选择安装依赖

这里你可以自由选择用哪些配置

按上下键 选择哪一个，按空格键确定，A键是全选，

所有的都选择好后，按enter键进行下一步

第五步.是否使用路由的history模式

这里我建议选No，这样打包出来丢到服务器上可以直接使用了，

后期要用的话，也可以自己再开起来。

选yes的话需要服务器那边再进行设置

第六步 选择css预处理

les s和 sass可以自行选择

第七步.选择自动化代码格式化检测

第八步.是否保存刚才的配置

选择确定后你下次再创建新项目 就有你以前选择的配置了，不用重新再配置一遍了

第九步.配置文件放哪

第一个是放在单独的文件配置

第二个是放在package.json文件里

通常我们会选择独立放置，让package.json干净些

第十步.是否将以上这些将此保存为未来项目的预配置

第十一步. 回车下载

第十二步.启动项目

npm run serve

( vue-cli2.x 是 npm run dev )

提示

如果你仍然需要使用旧版本的 vue init 功能，你可以全局安装一个桥接工具

npm install -g @vue/cli-init

vue init webpack my-project

本人还是Vue的小学生, 以上如有问题或不妥之处还请多多指教 ( 474529914@qq.com )