介绍

由于现在Vue-cli版本更新到了3.0，而且创建项目的一些情况也发生了变化，所以本篇将在基于Vue-cli3.0以上版本创建项目，大家可以参考一下Vue-cli2.0版本（这里的Vue-cli3.0版本之前统称为2.0版本）和Vue-cli3.0版本的不同之处，不要混淆了。大家也可以进入Vue-cli3官网进行查看相关信息。

Vue-CLI

• 通过 @vue/cli 搭建交互式的项目脚手架。
• 通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发。

• 一个运行时依赖 (@vue/cli-service)，该依赖：

  • 可升级
  • 基于 webpack 构建，并带有合理的默认配置
  • 可以通过项目内的配置文件进行配置
  • 可以通过插件进行扩展
• 一个丰富的官方插件集合，集成了前端生态中最好的工具。
• 一套完全图形化的创建和管理 Vue.js 项目的用户界面。

准备

关于旧版本

Vue CLI 的包名称由 Vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 Vue-cli (1.x或 2.x)
你需要先通过一下命令卸载它

npm uninstall vue-cli -g
#或者
yarn global remove vue-cli

Node 版本要求

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

安装

可以使用下列任一命令安装这个新的包：

npm install -g @vue/cli    # -g或者global 表示全局安装
# 或者 cnpm
cnpm install -g @vue/cli
# 或者 yarn
yarn global add @vue/cli

• 这里是yarn的官方文档，有需要的可以研究一下

安装之后，你就可以在命令行中访问 vue 命令。你可以通过简单运行 vue，看看是否展示出了一份所有可用命令的帮助信息，来验证它是否安装成功。

你还可以用这个命令来检查其版本是否正确 (3.x)：

vue --version

创建项目

vue create

运行以下命令来创建一个新项目：

vue create 项目名

这时候控制台会提示你需要选择一个 preset。
我这里已经保存了vue-test一个之前创建项目包含的 vue-router、vuex、stylus、babel、eslint 基本设置的preset。
你可以选默认 default 包含了基本的 babel + eslint 设置的 preset。
也可以选手动选择特性 Manually select features 来选取需要的特性。

本次我们通过手动选择特性来帮大家了解全部创建的过程：
Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
移动光标至需要选择设置项按 space 来选择特性，按 a 来选择全部特性，按 i 来取消选择