通过 Vue-cli3.1 搭建Vue项目（包含失败情况处理）

Node 版本要求

Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。你可以使用 nvm 或 nvm-windows在同一台电脑中管理多个 Node 版本。

此时如果使用过cli2创建过项目，会出现创建失败的情况

提示：需要先卸载原有的 vue-cli 才能使用vue cli3

 

npm安装 cli3

cnpm install -g @vue/cli

接下来 通过cli3创建新项目

vue create first-cli3

你会被提示选取一个 preset。你可以选默认的包含了基本的 Babel + ESLint 设置的 preset，也可以选“手动选择特性”来选取需要的特性。

default 的设置非常适合快速创建一个新项目的原型，而手动设置则提供了更多的选项，它们是面向生产的项目更加需要的。

因此，选择Manually select features(手动选择特性)

• Babel ：转换es6语法
• TypeScript ：支持使用 TypeScript 书写源码
• Progressive 渐进式的程序应用。
• Router  vue-router 路由管理。
• Vuex  状态管理器 。
• CSS Pre-processors 支持 CSS 预处理器。
• Linter / Formatter 代码风格检查和格式化。
• Unit Testing 单元测试。
• E2E Testing  E2E 测试。

选择所需的配置后，提示是否使用history模式（history模式用于去除连接上的#号，但是生产环境下需要后台配合支持），有需要的选择Y，不介意带#号的选择N。

继续 选择css预处理，我选择的是Sacc/SCSS

继续 选择ESLint + Prettier

回车，起个配置文件的名字，继续回车

接下来，终于配置完成了，等待项目自动创建，创建成功后，使用 npm run serve 运行项目

下次再次创建新项目的时候，就特别的方便快捷了。

 

如果创建项目过程中 提示 json 错误，不用担心，这是cli 之前版本的问题（好多人都遇到这种情况）

简单粗暴的解决方案，完全卸载之前的版本，清除缓存，重新安装即可

npm uninstall -g vue

npm uninstall -g vue-cli

npm uninstall -g @vue/cli

npm cache clean --force

npm install -g vue

cnpm install -g @vue/cli

然后 再次创建项目，问题就完美解决了~

vue cli3还支持使用图形化界面来创建项目